html標(biāo)簽
1.標(biāo)簽語法
雙標(biāo)簽(常規(guī)標(biāo)簽): <標(biāo)簽名 屬性名1:屬性值1 屬性名2:屬性值2...> 標(biāo)簽內(nèi)容 </標(biāo)簽名>
單標(biāo)簽: <標(biāo)簽名 屬性名1:屬性值1 屬性名2:屬性值2.../> 或者 <標(biāo)簽名 屬性名1:屬性值1 屬性名2:屬性值2...>
說明：
標(biāo)簽名 - 是html中已有的標(biāo)簽纱昧，不能自己隨便命名。標(biāo)簽名和<以及標(biāo)簽名和/之間都不能有空隙
屬性 - 屬性和屬性值之間用:連接软舌，多個屬性之間用空格隔開殉疼。所有的屬性沒有位置要求
標(biāo)簽內(nèi)容 - 在開始標(biāo)簽和結(jié)束標(biāo)簽之間梯浪，標(biāo)簽的內(nèi)容可以是任意的（可以文本也可以是其他標(biāo)簽）
2.head標(biāo)簽中的內(nèi)容
head中的標(biāo)簽有：title捌年，mate, base, link, style, script
title - 設(shè)置網(wǎng)頁標(biāo)題
meta - 設(shè)置網(wǎng)頁元數(shù)據(jù)(單標(biāo)簽)
3.body
body中的標(biāo)簽主要用來在網(wǎng)頁的內(nèi)容中添加顯示信息的
<!DOCTYPE html>
<html>
<head>
<!-- 設(shè)置網(wǎng)頁標(biāo)題 -->
<title>html標(biāo)簽</title>
<!-- 設(shè)置網(wǎng)頁內(nèi)容的編碼方式 -->
<meta charset="utf-8"/>
</head>
<body>
內(nèi)容
</body>
</html>
2.文本標(biāo)簽
1.標(biāo)題標(biāo)簽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>文本標(biāo)簽</title>
</head>
<body>
<!--
1.標(biāo)題標(biāo)簽：h1-h6
h1 - 大標(biāo)題
h2 - 副標(biāo)題
h3 - 副標(biāo)題下的副標(biāo)題
....
-->
<h1>我是標(biāo)題1</h1>
<h2>我是標(biāo)題2</h2>
<h3>我是標(biāo)題3</h3>
<h4>我是標(biāo)題4</h4>
<h5>我是標(biāo)題5</h5>
<h6>我是標(biāo)題5</h6>
<h1>市民“救助”警犬涉嫌盜竊被立案
當(dāng)事人可提申訴</h1>
</body>
</html>
2.段落標(biāo)簽：p
一個段落使用一個p標(biāo)簽。每個p標(biāo)簽中的內(nèi)容顯示完成后會自動換行
<p>內(nèi)容</p>
3.特殊功能標(biāo)簽和符號
html中文本中的換行挂洛、空格礼预、tab等都是無效的（空白無效）
換行：
空格：? ?
4.字體相關(guān)標(biāo)簽
加粗：b標(biāo)簽/strong標(biāo)簽
b標(biāo)簽只是單純的文字效果加粗，strong標(biāo)簽有強調(diào)的意思
傾斜：i標(biāo)簽/em標(biāo)簽
i標(biāo)簽只是單純的文字效果傾斜虏劲，em標(biāo)簽有強調(diào)的意思
水平線：
3.列表標(biāo)簽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>列表標(biāo)簽</title>
</head>
<body>
<!-- 列表標(biāo)簽分為有序列表托酸、無序列表、自定義列表 -->
<!--
1.有序列表:
ol標(biāo)簽 -- 代表整個列表
li標(biāo)簽 -- 代表列表中的元素
-->
<ol>
<li>基礎(chǔ)語法</li>
<li>web前端</li>
<li>web后端</li>
<li>數(shù)據(jù)和人工智能</li>
<li>項目</li>
</ol>
<!--
2.無序列表
ul標(biāo)簽 - 代表整個列表
li標(biāo)簽 - 代表列表中的元素
-->
<ul>
<li>Python人工智能</li>
<li>HTML5</li>
<li>Java大數(shù)據(jù)</li>
<li>自動化測試</li>
</ul>
<!--
3.自定義列表
dl標(biāo)簽 - 代表整個列表
dt標(biāo)簽 - 分組名
dd標(biāo)簽 - 分組中的內(nèi)容
-->
<dl>
<dt>Python教學(xué)部</dt>
<dd>余婷</dd>
<dd>駱昊</dd>
<dd>王海飛</dd>
<dd>肖世榮</dd>
<dt>H5教學(xué)部</dt>
<dd>吳老師</dd>
<dd>丁老師</dd>
<dd>周老師</dd>
</dl>
</body>
</html>
4.圖片標(biāo)簽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<!--
1. 圖片標(biāo)簽: img
單標(biāo)簽
a.src屬性 - 圖片地址(可以本地圖片路徑也可以是網(wǎng)絡(luò)圖片的url)
本地圖片：地址可以是絕對路徑也可以是相對路徑柒巫。一般將圖片放在img文件夾中励堡，然后寫相對路徑
b.title - 設(shè)置圖片標(biāo)題（鼠標(biāo)停留在圖片上，顯示的內(nèi)容）
c.alt - 設(shè)置圖片加載失敗的提示信息
-->
<!-- 顯示一張本地圖片 -->
<img id="top" src="img/luffy4.jpg" title="路飛" alt="加載失敗">
<p>第二張</p>
<img id="2" title="王也" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540796986561&di=8e0f6899b0c99d9c9bea3c3b19a5216b&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180309%2F63e7157798c34e8794e81572d38aaa06.jpeg" >
<p>第三張</p>
<img title="王也" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540796986561&di=8e0f6899b0c99d9c9bea3c3b19a5216b&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180309%2F63e7157798c34e8794e81572d38aaa06.jpeg" >
<p id="4">第4張</p>
<img title="王也" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540796986561&di=8e0f6899b0c99d9c9bea3c3b19a5216b&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180309%2F63e7157798c34e8794e81572d38aaa06.jpeg" >
<p>第5張</p>
<img title="王也" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540796986561&di=8e0f6899b0c99d9c9bea3c3b19a5216b&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180309%2F63e7157798c34e8794e81572d38aaa06.jpeg" >
<p>第6張</p>
<img title="王也" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540796986561&di=8e0f6899b0c99d9c9bea3c3b19a5216b&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180309%2F63e7157798c34e8794e81572d38aaa06.jpeg" >
<p>第7張</p>
<img title="王也" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540796986561&di=8e0f6899b0c99d9c9bea3c3b19a5216b&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180309%2F63e7157798c34e8794e81572d38aaa06.jpeg" >
<p>第8張</p>
<img title="王也" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540796986561&di=8e0f6899b0c99d9c9bea3c3b19a5216b&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180309%2F63e7157798c34e8794e81572d38aaa06.jpeg" >
<!--
2.超鏈接標(biāo)簽: a標(biāo)簽
a. 內(nèi)容 - 文字/圖片
-->
<!-- 文字超鏈接 -->
<a >
hao123
</a>
<!-- 圖片超鏈接 -->
<a >
<img src="img/luffy2.png" >
</a>
<!--
b.href - 跳轉(zhuǎn)到的目標(biāo)地址
1）網(wǎng)絡(luò)地址 - 跳轉(zhuǎn)到指定的網(wǎng)頁
2）本地的html文件地址 - 跳轉(zhuǎn)到本地的html對應(yīng)的網(wǎng)頁中
3）空 - 刷新網(wǎng)頁
4）選擇器 - 在當(dāng)前網(wǎng)頁中堡掏，跳轉(zhuǎn)到指定的位置
-->
<a href="03-列表標(biāo)簽.html">列表標(biāo)簽</a>
<a href="">刷新</a>
<a href="#top">回到頂部</a>
<a href="#2">第二張</a>
<a href="#4">第四張</a>
<!--
c.target - 跳轉(zhuǎn)方式
_self - 默認值应结，在當(dāng)前頁面加載新的網(wǎng)頁(原網(wǎng)頁被覆蓋)
_blank - 在新的頁面中加載新的網(wǎng)頁(原網(wǎng)頁還在)
-->
<a target="_blank">百度一下</a>
</body>
</html>
5.數(shù)據(jù)表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表格</title>
</head>
<body>
<!--
1.表格標(biāo)簽
table標(biāo)簽 - 整個表格
tr - 行
td - 單元格
2.邊框相關(guān)的屬性
border - 邊框的寬度
bordercolor - 設(shè)置邊框顏色(顏色值可以是英語單詞 - red，也可以RGB對應(yīng)的16進制值 - #ff0000)
cellspacing - 單元格和單元格之間的間隙
cellpadding - 設(shè)置內(nèi)容和單元格邊框之間的間距
3.背景顏色
bgcolor - 背景顏色
a.作為table屬性 - 設(shè)置整個表格的背景顏色
b.作為tr屬性 - 設(shè)置一行的背景顏色
c.作為td屬性 - 設(shè)置某一個單元格的背景顏色
-->
<table border="1" bordercolor="#ff0000" cellspacing="0" cellpadding="20" bgcolor="aquamarine">
<!-- 第一行 -->
<tr bgcolor="bisque">
<td>First Name</td>
<td>Last Name</td>
<td>Points</td>
</tr>
<!-- 第二行 -->
<tr>
<td>Jill</td>
<td bgcolor="green">Smith</td>
<td>50</td>
</tr>
<!-- 第三行 -->
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
<br>
<!--
4.寬度和高度
width - 設(shè)置寬度
height- 設(shè)置高度
a.作用與table - 設(shè)置整個表格的寬度和高度（會按比例分配每一行和每一列的寬度和高度）
b.分別設(shè)置每一行的高度和每一列的寬度
-->
<!-- 應(yīng)用：細線表格
第一步：設(shè)置整個表格的背景顏色(邊框顏色)和每個單元格的背景顏色(表格內(nèi)容的顏色)不一樣
第二步：設(shè)置cellspacing的值為邊框的寬度
-->
<table bgcolor="black" cellspacing="1" width="300" height="200">
<tr bgcolor="wheat">
<td>姓名姓名</td>
<td>年齡</td>
<td>性別</td>
</tr>
<tr bgcolor="wheat">
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="wheat">
<td></td>
<td></td>
<td></td>
</tr>
</table>
<br>
<!--
5.對齊方式
align - center(居中)/left(左對齊)/right(右對齊)
a.作用于table泉唁， 讓整個表格在其父標(biāo)簽中居中/左對齊/右對齊
b.作用于tr鹅龄， 讓整行中每個單元格中的內(nèi)容在其單元格中居中/左對齊/右對齊
c.作用于td, 讓指定的單元格中的內(nèi)容居中/左對齊/右對齊
-->
<!-- 單獨設(shè)置每一行和每一列的寬度和高度 -->
<table bgcolor="black" cellspacing="1" align="center">
<tr align="right" height="40" bgcolor="wheat">
<td width="120">姓名姓名</td>
<td width="100">年齡</td>
<td width="70">性別</td>
</tr>
<tr height="80" bgcolor="wheat">
<td align="center">小明</td>
<td>18</td>
<td>男</td>
</tr>
<tr height="80" bgcolor="wheat">
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
