前端（HTMl） 1
一、初識HTMl
超文字標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用於建立網頁的標準標記語言。
二、HTMl是什麼
1.標籤
html 標籤 tog / 元素element / 節點node
最大標籤是html 根元素
head： 頭標籤 =包含了當前文件的元資料 meta 可以設定頁面資訊 引用等等
<head> <!-- SEO 搜尋關鍵字 優化--> <meta name="keywords" content="網站關鍵字" /> <meta name="description" content="網站的描述" /> <!-- 瀏覽器尺寸適配--> <meta name="viewport" content="white=device-witdh,initial-scale=1,minimum-scale=1" /> <!-- 字符集 /編碼格式 --> <meta charset="utf-8" /> <title>標題</title> </head>
body ：包含了可見的網頁內容
標籤語法：
格式規則：由尖括號包圍的關鍵字（標籤名） <br>
注意事項：標籤名使用大小寫字母書寫含義一樣 <BR> 建議小寫
功能作用：不同的標籤名固有的顯示效果不同
結構分類:
雙標籤 <p> 開始標籤/開放標籤 </p> 結束/閉合標籤
單標籤 <meta> （省略結束標籤） 或 <br/> （合併結束標籤）
結構關係 :
標籤之間只能並列或巢狀(包含) （絕對不能交叉使用）
上一級 / 下一級（父子級/上下級）
前一個 / 後一個（兄弟級/同一級）
<div><!-- 巢狀-->
<span>內容文字</span><!-- 並列-->
<h1>內容文字</h1><!-- 並列-->
</div><!-- 巢狀-->
上一級 / 下一級（父子級/上下級）
前一個 / 後一個（兄弟級/同一級）標籤功能作用：
不同的標籤名固有的顯示效果不同
除了內容外的部分一般都是固有的
標籤屬性 屬性名=屬性值（多個） 屬性值可以用 "" 也可以 ''
不同的屬性名或屬性值會導致標籤功能作用不同
全域性屬性
<div id="" class="" style="" title="" name=""></div>
id = 唯一標識（規定當前標籤的唯一性）
calss/style=css樣式
title = 額外資訊
name = 請求引數名常用屬性
<!-- 超連結 -->
<a href="http://www.baidu.com" target="_self" >AA</a><!-- 在當前頁面開啟-->
<a href="http://www.baidu.com" target="_blank" >AA</a><!-- 在新頁面開啟-->
<!-- image -->
<!--靜態網頁-->
<!--絕對路徑 (本地檔案地址)-->
<img src=C:\Users\Administrator\Desktop\1.jpeg/>
<!--相對路徑（同文件下的地址 推薦)-->
<img src="./img/1.jpeg" width="200" height="200"/>
換行<br />
(html轉義字元) 空格轉義字元
<h3>標題標籤</h3>
<p>段落</p>
<div>行標籤 </div>
<span> 塊標籤</span>2.文字標籤
<!-- 文字標籤 -->
<a href="#tips">錨點跳轉</a>
<b></b>
<code></code>
<em></em>
<i></i>
<pre></pre>
<small></small>
<strong></strong>
<abbr></abbr>
<address></address>
<bdo></bdo>
<blockquote></blockquote>
<cite></cite>
<del></del>
<ins></ins>
<sub></sub>
<sup></sup>3.列表
列表
<ul><!--無序列表 -->
<li>無序</li>
<li>無序</li>
<li>無序</li>
</ul>
<ol><!-- 有序列表 -->
<li>無序1</li>
<li>無序2</li>
<li>無序3</li>
</ol>
4.條目
條目
<dl>
<dt>條目標題</dt>
<dd>條目內容</dd>
<dt>條目標題</dt>
<dd>條目內容</dd>
<dt>條目標題</dt>
<dd>條目內容</dd>
</dl>5.水平線
<hr> 水平線6.表格
<thead>表頭 通常放表格的標題</thead>所包含的程式碼、
<tbody>表身 通常放表格的資料</tbody>所包含的程式碼、
<tfoot>表尾 通常放表格的腳註</tfoot>所包含的程式碼、
三者的相對位置關係如何，html顯示時總是以先thead後tbody然後tfoot的順序顯示
**另注：**在一個table中，tbody可以出現多次，但thead與tfoot只能出現一次
<table> 表格
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
</tr>
</table>
<table border="1px" width="200px">邊框 寬度
<head>
<th>加粗
<td colspan="2">合併行單元格</td>
<td>12</td>
</th>
</head>
<body>
<tr>
<td rowspan="2">合併單元格列</td>
<td>12</td>
</tr>
</body>
<tfoot>
<tr>
<td>11</td>
<td>12</td>
</tr>
</tfoot>
</table>7.巢狀
<iframe src="index.html" width="200" height="200">
包含其他檔案的內容
</iframe>
<frameset cols="25%","25%">
舊式格式
</frameset>9.表單
表單用於蒐集不同型別的使用者輸入的資料
表單readonly/disabled/ checked
action = 提交的目的地址
method =get/post 區別
1 - get 顯式 -- url顯示出來請求的引數--不安全
- post 隱式 -- url不顯示出請求的引數
2 - 攜帶的資料量get(較小) post(較大)
<!-- 表單用於蒐集不同型別的使用者輸入的資料 -->
<!-- 表單readonly/disabled/ checked -->
<!-- action = 提交的目的地址 -->
<!-- method =get/post 區別 -->
<!-- 1- get 顯式 -- url顯示出來請求的引數--不安全 -->
<!-- - post 隱式 -- url不顯示出請求的引數 -->
<!-- 2- 攜帶的資料量get(較小) post(較大) -->
<form action="index.html" method= "">
<input type='text' name="code" value="11231” placeholder= "請輸入賬號”/>賬號
<input type="password" name='pass' value= '123123' placeholder="請輸入密碼"/>密碼
<input type=' checkbox' name= 'fruit' value='apple' />蘋果
<input type='checkbox'name= 'fruit 'value= 'banana' checked/>香蕉
<input type= ' checkbox' name= 'fruit' value= 'orange’checked='checked'/>橙子
<label>
<input type='radio' name='sex' value='1'/>男
</label>
<label>
<input type='radio' name= 'sex' value='2' checked id='sex2'/>
<label for="sex2">女</label>10.按鈕
<!-- 按鈕標籤 -->
<input type="submit" value="重置"/>
<input type="reset" value="提交"/>
<input type="button" value="普通按鈕"/>
<button>button</button>11.檔案域
<input type="hidden" name="hide1" value="val1" /> 隱藏域
<input type="file" name="file1"/> 檔案域12.下拉框
<select name="下拉框"> <!-- 下拉框-->
<optgroup label="水果"><!-- 分組標題 -->
<option value="蘋果">蘋果</option>
<option value="香蕉">香蕉</option>
<option value="橘子" selected="預設被選中的">橘子</option>
<option value="西瓜" disabled="失效的">西瓜</option>
<option value="用到的">顯示的</option>
</optgroup>
<optgroup label="數字">
<option>11</option>
<option>22</option>
</optgroup>
</select>13.塊級元素
塊級元素(block) -特徵
1-獨佔一行
<p></p>
<div></div>
<from></from>
<h1></h1>
<ol></ol>
<ul></ul>
2-寬度高度內邊距外邊距，都可以控制
3-即使設定了寬度，仍然是獨佔一行14.內聯元素
內聯元素(inline) -特徵
1-和相鄰的內聯元素在同一行
<span></span>
2-寬度和高度不可控制，但可以改變內容（圖片大小）
3-水平方向邊距padding, margin-left, margin-right是有效果，豎直方向的邊距margin-top,margin-bottom不產生效果
15.欄位集
<!-- 欄位集-->
<fieldset>
<legend>表單</legend>
</fieldset>
三、總結
HTML 是一種在 Web 上使用的通用標記語言。HTML 允許你格式化文字，新增圖片，建立連結、輸入表單、框架和表格等等，並可將之存為文字檔案，瀏覽器即可讀取和顯示。
HTML 的關鍵是標籤，其作用是指示將出現的內容。
If not now, when? If not me, who? “此時此刻，非我莫屬” 時不我待，捨我其誰。