一、html標簽
標簽 == 標記
1.標簽語法
雙標簽(常規(guī)標簽): <標簽名 屬性名1:屬性值1 屬性名2:屬性值2...> 標簽內(nèi)容 </標簽名>
單標簽: <標簽名 屬性名1:屬性值1 屬性名2:屬性值2.../> 或者 <標簽名 屬性名1:屬性值1 屬性名2:屬性值2...>
說明：
標簽名 - 是html中已有的標簽，不能自己隨便命名。標簽名和<以及標簽名######和/之間都不能有空隙
屬性 - 屬性和屬性值之間用:連接，多個屬性之間用空格隔開。所有的屬性沒######有位置要求
標簽內(nèi)容 - 在開始標簽和結(jié)束標簽之間，標簽的內(nèi)容可以是任意的（可以文本也可以是其他標簽）
2.head標簽中的內(nèi)容
head中的標簽有：title，mate, base, link, style, script
title - 設(shè)置網(wǎng)頁標題
meta - 設(shè)置網(wǎng)頁元數(shù)據(jù)(單標簽)
3.body
body中的標簽主要用來在網(wǎng)頁的內(nèi)容中添加顯示信息的
<!DOCTYPE html>
<html>
<head>
<!-- 設(shè)置網(wǎng)頁標題 -->
<title>html標簽</title>
<!-- 設(shè)置網(wǎng)頁內(nèi)容的編碼方式 -->
<meta charset="utf-8"/>
</head>
<body>
內(nèi)容
</body>
</html>
二、文本標簽
1.標題標簽：
h1-h6
h1 - 大標題
h2 - 副標題
h3 - 副標題下的副標題
<h1>我是標題1</h1>
<h2>我是標題2</h2>
<h3>我是標題3</h3>
<h4>我是標題4</h4>
<h5>我是標題5</h5>
<h6>我是標題5</h6>
2.段落標簽：p
一個段落使用一個p標簽。每個p標簽中的內(nèi)容顯示完成后會自動換行
<p> 近日，浙江金華市民救助警犬被取保候?qū)徱皇乱l(fā)關(guān)注。</p>
<p>三個多月前，應女士和丈夫傍晚出門散步，救助了一只在路邊翻食垃圾的“流浪狗”，幾天后，卻被民警告知帶回家的是派出所的警犬，夫妻二人涉嫌盜竊被立案，隨后被取保候?qū)彙?lt;/p>
<p>10月27日晚，金華市公安局金東分局發(fā)布通報稱，2018年6月29日晚，金東公安分局多湖派出所民警發(fā)現(xiàn)散放在派出所門口附近的一條警犬被盜。7月3日，金東公安分局對涉嫌盜竊的朱某、應某采取取保候?qū)弿娭拼胧?。并稱，犯罪嫌疑人朱某、應某知道該犬系名貴犬種德國牧羊犬。</p>
3.特殊功能標簽和符號
html中文本中的換行、空格、tab等都是無效的（空白無效）
換行：<br>
空格：  
<p>
床前明月光,<br>
疑是地上霜.<br>
舉頭望明月,<br>
低頭思故鄉(xiāng)。
</p>
4.字體相關(guān)標簽
加粗：b標簽/strong標簽
b標簽只是單純的文字效果加粗，strong標簽有強調(diào)的意思
傾斜：i標簽/em標簽
i標簽只是單純的文字效果傾斜，em標簽有強調(diào)的意思
水平線：<hr>
三 、列表標簽
列表標簽分為有序列表、無序列表、自定義列表
1.有序列表:
ol標簽 -- 代表整個列表
li標簽 -- 代表列表中的元素
<ol>
<li>基礎(chǔ)語法</li>
<li>web前端</li>
<li>web后端</li>
<li>數(shù)據(jù)和人工智能</li>
<li>項目</li>
</ol>
2.無序列表
ul標簽 - 代表整個列表
li標簽 - 代表列表中的元素
<ul>
<li>Python人工智能</li>
<li>HTML5</li>
<li>Java大數(shù)據(jù)</li>
<li>自動化測試</li>
</ul>
3.自定義列表
dl標簽 - 代表整個列表
dt標簽 - 分組名
dd標簽 - 分組中的內(nèi)容
<dl>
<dt>Python教學部</dt>
<dd>余婷</dd>
<dd>駱昊</dd>
<dd>王海飛</dd>
<dd>肖世榮</dd>
<dt>H5教學部</dt>
<dd>吳老師</dd>
<dd>丁老師</dd>
<dd>周老師</dd>
</dl>
四、圖片標簽和超鏈接
1. 圖片標簽: img
單標簽
a.src屬性 - 圖片地址(可以本地圖片路徑也可以是網(wǎng)絡(luò)圖片的url)
本地圖片：地址可以是絕對路徑也可以是相對路徑。一般將圖片放在img文件夾中，然后寫相對路徑
b.title - 設(shè)置圖片標題（鼠標停留在圖片上，顯示的內(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>
2.超鏈接標簽: a標簽
a. 內(nèi)容 - 文字/圖片
<!-- 文字超鏈接 -->
<a >
hao123
</a>
<!-- 圖片超鏈接 -->
<a >
<img src="img/luffy2.png" >
</a>
b.href - 跳轉(zhuǎn)到的目標地址
1）網(wǎng)絡(luò)地址 - 跳轉(zhuǎn)到指定的網(wǎng)頁
2）本地的html文件地址 - 跳轉(zhuǎn)到本地的html對應的網(wǎng)頁中
3）空 - 刷新網(wǎng)頁
4）選擇器 - 在當前網(wǎng)頁中，跳轉(zhuǎn)到指定的位置
<a href="03-列表標簽.html">列表標簽</a>
<a href="">刷新</a>
<a href="#top">回到頂部</a>
<a href="#2">第二張</a>
<a href="#4">第四張</a>
c.target - 跳轉(zhuǎn)方式
_self - 默認值，在當前頁面加載新的網(wǎng)頁(原網(wǎng)頁被覆蓋)
_blank - 在新的頁面中加載新的網(wǎng)頁(原網(wǎng)頁還在)
五、數(shù)據(jù)表格
1.表格標簽
table標簽 - 整個表格
tr - 行
td - 單元格
2.邊框相關(guān)的屬性
border - 邊框的寬度
bordercolor - 設(shè)置邊框顏色(顏色值可以是英語單詞 - red，也可以RGB對應的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>
4.寬度和高度
width - 設(shè)置寬度
height- 設(shè)置高度
a.作用與table - 設(shè)置整個表格的寬度和高度（會按比例分配每一行和每一列的寬度和高度）
b.分別設(shè)置每一行的高度和每一列的寬度
<!-- 應用：細線表格
第一步：設(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>
5.對齊方式
align - center(居中)/left(左對齊)/right(右對齊)
a.作用于table， 讓整個表格在其父標簽中居中/左對齊/右對齊
b.作用于tr， 讓整行中每個單元格中的內(nèi)容在其單元格中居中/左對齊/右對齊
c.作用于td, 讓指定的單元格中的內(nèi)容居中/左對齊/右對齊
<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>
六、復雜表格
1.制作復雜表格的方法：
a.確定表格的最大行數(shù), 在table中用tr表示出來
b.確定每一行有多少個單元格,用td表示出來
c.確定每一個單元格是否有合并現(xiàn)象。如果是行合并就設(shè)置rowspan的值，如果是列合并設(shè)置colspan的值
<table border="1" cellspacing="0" width="600" height="400">
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
