本文目錄
- 1.HTML初識
- 2.HTML標簽分類
- 3.字符集
- 4.HTML標簽的語義化
- 5.base標簽
- 6.表格與表單
- 7.表單提交的兩種方式
- 8.錨點定位
1.HTML初識
HTML（英文Hyper Text Markup Language的縮寫）中文譯為“超文本標簽語言”箭券。是用來描述網(wǎng)頁的一種語言细溅。所謂超文本厚掷，因為它可以加入圖片屋吨、聲音型雳、動畫绢涡、多媒體等內(nèi)容本谜，不僅如此痕寓，它還可以從一個文件跳轉到另一個文件蠢莺，與世界各地主機的文件連接寒匙。HTML 不是一種編程語言，而是一種標記語言 (markup language)躏将。
2.HTML標簽分類
按閉合特征分類：
1.雙標簽：<標簽名> 內(nèi)容 </標簽名>
2.單標簽：比如 <br /> <hr /> <img /> <base /> <input /> <link />
按是否換行特征分類
1.塊級標簽
| 標簽 | 描述 |
|---|---|
| div | 常用塊級容器锄弱，也是css和layout的主要標簽 |
| h1-h6 | 一-六級標題 |
| hr | 水平分隔線 |
| menu | 菜單列表 |
| ol、ul祸憋、li | 有序列表会宪、無序列表、列表項 |
| dl蚯窥、dt掸鹅、dd | 定義列表、定義術語拦赠、定義描述 |
| table | 表格 |
| p | 段落 |
| form | 交互表單 |
塊級元素的特點：
- 每個塊級元素獨占一行巍沙，每個塊級元素都會從新的一行開始，從上到下排列荷鼠。
- 塊級元素可以直接控制寬度句携、高度以及盒子模型的相關css屬性。
- 在不設置寬度的情況下允乐，塊級元素的寬度是他父級元素內(nèi)容的寬度务甥。
- 在不設置高度的情況下牡辽，塊級元素的高度是他本身內(nèi)容的高度。
2.行內(nèi)標簽（內(nèi)聯(lián)標簽）
| 標簽 | 描述 |
|---|---|
| a | 錨點 |
| b | 加粗 |
| span | 常用的內(nèi)聯(lián)容器敞临，定義文本內(nèi)區(qū)塊 |
| img | 引入圖片 |
| input | 輸入框 |
| select | 下拉列表 |
| strong | 加粗強調(diào) |
| label | Input元素定義標注（標記） |
內(nèi)聯(lián)元素的特點：
- 內(nèi)聯(lián)元素會和其他元素從左到右顯示在一行态辛。
- 內(nèi)聯(lián)元素不能直接控制寬度、高度以及盒子模型的相關css屬性挺尿，但是可以設置內(nèi)外邊距的水平方向的值奏黑。也就是說對于內(nèi)聯(lián)元素的margin和padding，只有margin-left/margin-right和padding-left/padding-right是有效的编矾，但是豎直方向的margin和padding無效果熟史。
- 內(nèi)聯(lián)元素的寬高是由內(nèi)容本身的大小決定的（文字、圖片等）窄俏。
- 內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素（不要在內(nèi)聯(lián)元素中嵌套塊級元素）蹂匹。
3.行內(nèi)塊標簽
常見的：<img>、<input>凹蜈、<td>
行內(nèi)塊狀元素的特點：
- 不自動換行
- 能夠識別寬高
- 默認排列方式為從左到右
3.字符集
<meta charset="UTF-8" />
utf-8是目前最常用的字符集編碼方式限寞，常用的字符集編碼方式還有gbk和gb2312。
gb2312 簡單中文 包括6763個漢字
BIG5 繁體中文 港澳臺等用
GBK包含全部中文字符 是GB2312的擴展仰坦，加入對繁體字的支持履植，兼容GB2312
UTF-8則包含全世界所有國家需要用到的字符
注意一點就行：
以后我們統(tǒng)統(tǒng)使用UTF-8 字符集, 這樣就避免出現(xiàn)字符集不統(tǒng)一而引起亂碼的情況了。
4.HTML標簽的語義化
為什么要有語義化標簽
- 方便代碼的閱讀和維護
- 同時讓瀏覽器或是網(wǎng)絡爬蟲可以很好地解析悄晃，從而更好分析其中的內(nèi)容
- 使用語義化標簽會具有更好地搜索引擎優(yōu)化
核心：合適的地方給一個最為合理的標簽玫霎。
語義是否良好： 當我們?nèi)サ鬋SS之后，網(wǎng)頁結構依然組織有序妈橄，并且有良好的可讀性庶近。
怎么判斷一個網(wǎng)頁的標簽結構夠不夠語義化？眷蚓，就是一眼看去鼻种，就知道哪個是重點，結構是什么溪椎，知道每塊的內(nèi)容是干啥的普舆。
遵循的原則：先確定語義的HTML 恬口，再選合適的CSS
5.base標簽
base 規(guī)定頁面上所有鏈接的默認 URL 和默認目標：
base 寫到 <head> </head> 之間
把所有的連接 都默認添加↓
base標簽有href屬性和target屬性
在一個文檔中校读，最多能使用一個 <base> 元素。<base> 標簽必須位于 <head> 元素內(nèi)部祖能。
所有的主流瀏覽器都支持base標簽
target="_blank"--->讓所有的鏈接都在新窗口打開歉秫。
target="_self" ----->在原窗口打開。
提示：請把 <base> 標簽排在 <head> 元素中第一個元素的位置养铸，這樣 head 區(qū)域中其他元素就可以使用 <base> 元素中的信息了雁芙。
比如當頁面中設置了以下的base標簽
<base >
那么頁面中出現(xiàn)下面的這個href屬性值為空的a標簽<a href="">CSDN</a>轧膘，頁面也會跳轉到csdn，而如果出現(xiàn)的是<a href="/nav/python">CSDN</a>兔甘，則頁面會跳轉到csdn的python模塊谎碍。
6.表格與表單
表格結構
- 在使用表格進行布局時，可以將表格劃分為頭部洞焙、主體和頁腳（頁腳因為有兼容性問題蟆淀，我們不再贅述），具體 如下所示：
- <thead></thead>：用于定義表格的頭部澡匪。
必須位于<table></table> 標簽中熔任，一般包含網(wǎng)頁的logo和導航等頭部信息。 - <tbody></tbody>：用于定義表格的主體唁情。
位于<table></table>標簽中疑苔，一般包含網(wǎng)頁中除頭部和底部之外的其他內(nèi)容。
表格標題
caption 元素定義表格標題甸鸟。
<table>
<caption>我是表格標題</caption>
</table>
caption 標簽必須緊隨 table 標簽之后惦费，且只存在表格里面。
合并單元格
跨行合并：rowspan 跨列合并：colspan
合并單元格的三步：
- 先確定是跨行還是跨列合并
- 根據(jù) 先上 后下 先左 后右的原則找到目標單元格
- 刪除單元格 刪除的個數(shù) = 合并的個數(shù) - 1
表單標簽
input 控件
label標簽
用于綁定一個元素, 當點擊label標簽的時候, 被綁定的表單元素就會獲得輸入焦點
如何綁定元素呢哀墓？
for 屬性規(guī)定 label 與哪個表單元素綁定趁餐。for=>id
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">
下拉菜單
<select>
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
...
</select>
注意：
- <select></select>中至少應包含一對<option></option>。
- 在option 中定義selected =" selected "時篮绰，當前項即為默認選中項后雷。
表單域
在HTML中，form標簽被用于定義表單域吠各，即創(chuàng)建一個表單臀突，以實現(xiàn)用戶信息的收集和傳遞，form中的所有內(nèi)容都會被提交給服務器贾漏。創(chuàng)建表單的基本語法格式如下：
<form action="url地址" method="提交方式" name="表單名稱">
<p><label>用戶名：<input type="text" /></label></p>
<p>
<label>密 碼：<input type="password" /></label>
</p>
<p><input type="submit" value="提交數(shù)據(jù)" /></p>
<p><input type="reset" value="重置數(shù)據(jù)" /></p>
</form>
常用屬性：
- Action
在表單收集到信息后候学，需要將信息傳遞給服務器進行處理，action屬性用于指定接收并處理表單數(shù)據(jù)的服務器程序的url地址纵散。 - method
用于設置表單數(shù)據(jù)的提交方式梳码，其取值為get(域名上有顯示）或post（匿名提交）。 - name
用于指定表單的名稱伍掀，以區(qū)分同一個頁面中的多個表單掰茶。
注意： 每個表單都應該有自己表單域。
7.表單提交的兩種方式
通常情況在發(fā)起表單請求的時候我們前端都會先進性驗證蜜笤，可以的話才會正式向后端發(fā)起請求濒蒋。
第一種方式：普通按鈕綁定點擊事件
<form action="deal.action" method="post" id="form1" >
用 戶 名:<input type="text" name="username" id="username">
密 碼:<input type="password" name="password" id="password">
確認密碼:<input type="password" name="pwd" id="pwd">
<input type="button" onclick="check()" value="提交">
</form>
點擊事件check()
function check() {
var password = document.getElementById("password").value;
var pwd = document.getElementById("pwd").value;
if (password == pwd) {
alert("驗證正確");
document.getElementById('form1').submit(); //驗證成功進行表單提交
} else {
alert("驗證錯誤，請重新輸入");
}
}
第二種方式：利用form表單的onsubmit方法進行調(diào)用，當進行表單提交時沪伙，會先執(zhí)行onsubmit( )方法瓮顽，然后再根據(jù)返回的false進行處理，注意這里在返回false的情況下不會進行提交围橡。
<form action="deal.action" method="post" id="form1" onsubmit="return check2();">
用 戶 名:<input type="text" name="username" id="username">
密 碼:<input type="password" name="password" id="password">
確認密碼:<input type="password" name="pwd" id="pwd">
<input type="submit" value="提交">
</form>
函數(shù)代碼check2：
function check2() {
var password = document.getElementById("password").value;
var pwd = document.getElementById("pwd").value;
if (password == pwd) {
alert("驗證正確");
return true;
} else {
alert("驗證錯誤暖混，請重新輸入");
return false;
}
}
8.錨點定位
1，使用id定位翁授，這樣的定位可以針對任何標簽來定位儒恋，比如以下代碼：
<a href="#1F" >錨點1</a>
......
<div id="1F"> <p> 11111111111 </p> </div>
2，使用name定位黔漂，使用name屬性只能針對a標簽來定位诫尽，而對div等其他標簽就不能起到定位作用，比如以下代碼炬守。
<a href="#5F">錨點5</a>
.......
<a name="5F">1111111</a>
3牧嫉，使用js定位，比如以下代碼
<li onclick="javascript:document.getElementById('here').scrollIntoView()"></li>
.......
<div id="here"> <p> 11111111111 </p> </div>
