一.HTML是什么？

HTML(Hyper Text Mark-up Language超文本標記語言)：不是編程語言，而是一種描述性的標記語言，用于描述網頁中內容的顯示方式，Web 瀏覽器讀取HTML 檔案，并以網頁的形式顯示出來，瀏覽器不會顯示 HTML 標簽，而是通過標簽來解釋網頁的內容，

二.HTML檔案結構

<html>
      <head>
           <title>標題</title>
      </head>
       <body>
 	正文
       </body>
 </html>

三.元素

1.按單/雙標記劃分

單標記：

<br/> <hr/> <img/> <input/> <link/>

雙標記：

<html> <head> <title> <body> <table> <tr> <td>
<span> <p> <form> <h1> <h2> <h3> <h4> <h5> <h6>
<style> <b> <u> <strong> <i> <div> <a> <script>

單標簽：只有一個<>組成，例如<br/>
雙標簽：由<></>組成，有始有終，<>表示標簽開始，</>表示標簽結束，例如<div>...</div>

2.按塊狀/行內元素劃分

塊狀元素	解釋	行內元素	解釋
div	定義檔案中的磁區或節	a	定義鏈接
h1-h6	定義標題	b	字體加粗
ui,li	定義無序串列	code	定義計算機代碼文本
ol,li	定義有序串列	em	定義為強調的內容
p	定義段落	img	定義圖片
form	定義表單	input	輸入框
hr	定義水平線	label	為input元素定義標記
pre	定義預格式化文本	span	組合檔案中的行內元素
table,tr,td…	定義表格	sub	定義下標文本
dl,dt,dd	自定義串列	sup	定義上標文本
		textarea	定義多行輸入框
		strong	語氣更強的強調內容

3.塊狀元素和行內元素的互相轉換

1、display
display:block轉換為塊狀元素
display:inline轉換為行內元素
display:inline-block轉換為行內塊狀元素
注意：如果把一個div設定成inline也要遵守行內元素的特點，

2、float
當把行內元素設定為float:left/right后，該行內元素的display屬性會被賦予block值，且擁有浮動特性，行內元素去除了中間莫名的空白，

3、當為行內元素進行定位時，absolute(絕對定位)與fixed(固定定位)都會使原先的行內元素變成塊級元素，

行內元素和塊級元素的區別，各自的特點：
1、塊狀元素，總是在新行上開始，默認寬度是它容器的100%，也可以設定寬度和高度，行內元素，和其他元素在一行，設定寬度和高度不起作用，
2、塊狀元素能容納其他塊狀元素或者行內元素，行內元素只能容納文本或其他行內元素（如果行內元素容納塊狀元素都會顯示怪異），
3、塊狀元素和行內元素一些樣式屬性不同，
塊狀元素可以設定width/height/line-height/margin/padding>
行內元素設定width/height無效，設定line-height樣式怪異，設定margin和padding的時候左右有效果，上下沒有效果，

四.重點

1.影像鏈接

在一個<a>標簽中加上bai一個<img>標簽內容，即可讓該<img>擁有一個超鏈接，然后可以在后面繼續寫文字，此文字就會顯示成超鏈接，點擊該文字即可進入超鏈接，
下面實體：

  <a href="www.baidu.com"> <img border="0" src="/i/eg_buttonnext.gif" /></a>

2.導航選單

①串列

有序串列 ol li
type：有五個屬性值：1、a、A、i、I(羅馬數字)，表示串列前綴的格式，
start：屬性值位數字，表示從type型別的第幾個數字開始，有點繞，比如當你選的type=“a”,start=“3”，表示選擇的是小寫字母型別，從第三個字母c開始充當串列前綴，

<ol >
    <li>dd</li>
    <li>aa</li>
    <li>dd</li>
</ol>

在這里插入圖片描述

無序串列 ul li
串列默認的前綴樣式是實心圓其實是disc，
ul標簽中的屬性是type，type屬性值有disc（實心圓默認）、circle（空心圓）、square（實心正方形）、none（取消前綴），

<ul>
    <li>一</li>
    <li>二</li>
    <li>三</li>
</ul>

在這里插入圖片描述

自定義串列 dl dt dd

<h3>自定義串列</h3>
        <dl>
            <dt>一級</dt>
                <dd>二級</dd>
                <dd>二級</dd>
            <dt>一級</dt>
                <dd>二級</dd>
                <dd>二級</dd>
        </dl>

在這里插入圖片描述

1.有序串列和無序串列之間的區別是：前綴的不同，有序的是有大寫字母和小寫字母、數字、羅馬數字等，而無序串列是實心圓、空心圓、實心正方形，
2.但是共同點是都有前綴，
3.而自定義串列與有序無序的區別是沒有前綴，而且是有縮進

②超鏈接

基本語法：<a> 超鏈接
例如：<a href=“https://zxfdog.blog.csdn.net/”>花狗Fdog的博客

屬性：
href路徑問題：

3.表單

input（包含多種輸入控制元件）:
在這里插入圖片描述
select(下拉串列):
用定義下拉串列框中的可用選項，

下拉選擇框支持多選multiple：multiple=“multiple”，input默認選中屬性 checked，默認選中屬性 selected，

例如：

<form>
	用戶名：<br />
	<input type="text"><br />
	手機號：<br />
	<input type="text"><br />
	密碼：<br />
	<input type="password"><br /><br>
	<select style="width: 170px;">		
		<option value="共青團員">共青團員</option>
		<option value="群主">群主</option>
		<option value="黨員">黨員</option>
	</select><br><br>
	<input type="button" value="提交" style="width: 150px;"/>
</form>

在這里插入圖片描述

4.表格

表格標題由標簽定義，
由 <th> 標簽定義表頭單元格，表頭自動加粗，
由<td>定義，字母 td 指表格資料（table data），即資料單元格的內容，資料單元格可以包含文本、圖片、串列、段落、表單、水平線、表格等等，
由定義，每個表格均有若干行，
rowspan屬性用于合并行，colspan屬性用于合并列，在<th>標簽中添加，
例如：

<table border="1">              <!--表格開始-->
    <caption>博主串列</caption>  <!--這是本表格的標題-->
    <tr>                          <!--第一行開始-->
        <td>姓名</td>             <!--第一個單元格-->
        <td>性別</td>
        <td>年齡</td>
    </tr>                       <!--第一行結束-->
    <tr>
        <td>花狗Fdog</td>
        <td>男</td>
        <td>22</td>
    </tr>
    <tr>
        <td>君莫笑</td>
        <td>男</td>
        <td>21</td>
    </tr>
</table>                       <!--表格結束-->