URL地址
1.瀏覽器想服務(wù)器發(fā)送請求(通過http協(xié)議)
2.http協(xié)議：超文本傳輸協(xié)議幌陕，也就是瀏覽器和服務(wù)器端的網(wǎng)頁傳輸數(shù)據(jù)的約束和規(guī)范
3.url協(xié)議：平時我們寫的網(wǎng)址就是url地址
url協(xié)議：規(guī)范url地址的格式
協(xié)議規(guī)定格式：scheme://host.domain:port/path/filename
scheme:定義因特網(wǎng)服務(wù)的類型，常見的就是http楣责。
host:定義域主機(jī)（http的默認(rèn)主機(jī)是www）
domain:定義因特網(wǎng)域名，比如w3cschool.com.cn
:port:定義端口號（網(wǎng)頁默認(rèn)端口：80）
path:網(wǎng)頁所在服務(wù)器的路徑
filename:文件名稱
單標(biāo)簽
注釋標(biāo)簽
<!-- ddd注釋 -->
在HTML中還有一種特殊的標(biāo)記——注釋標(biāo)記慨削。如果需要在HTML文檔中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字友驮，就需要使用注釋標(biāo)記。其基本語法格式如下：
注釋內(nèi)容不會顯示在瀏覽器窗口中蹬屹，但是作為HTML文檔內(nèi)容的一部分侣背，也會被下載到用戶的計算機(jī)上，查看源代碼時就可以看到慨默。
換行標(biāo)簽 <br />
在HTML中贩耐，一個段落中的文字會從左到右依次排列，直到瀏覽器窗口的右端厦取，然后自動換行潮太。如果希望某段文本強(qiáng)制換行顯示，就需要使用換行標(biāo)記<br />，這時如果還像在word中直接敲回車鍵換行就不起作用了铡买。
水平線標(biāo)簽<hr />
在網(wǎng)頁中常掣常看到一些水平線將段落與段落之間隔開，使得文檔結(jié)構(gòu)清晰奇钞，層次分明岁经。這些水平線可以通過插入圖片實(shí)現(xiàn)，也可以簡單地通過標(biāo)記來完成蛇券，<hr />就是創(chuàng)建橫跨網(wǎng)頁水平線的標(biāo)記缀壤。其基本語法格式如下：
<hr />是單標(biāo)記，在網(wǎng)頁中輸入一個<hr />纠亚，就添加了一條默認(rèn)樣式的水平線塘慕。
雙標(biāo)簽
<p>文本內(nèi)容</p> 段落標(biāo)記
在網(wǎng)頁中要把文字有條理地顯示出來，離不開段落標(biāo)記蒂胞，就如同我們平常寫文章一樣图呢，整個網(wǎng)頁也可以分為若干個段落，而段落的標(biāo)記就是<p>骗随。
<p>是HTML文檔中最常見的標(biāo)記蛤织，默認(rèn)情況下，文本在一個段落中會根據(jù)瀏覽器窗口的大小自動換行鸿染。
特點(diǎn)：上下自動生成空白行指蚜。
換行不會生成空白行。
標(biāo)題標(biāo)簽
h1-h6 取值到h6
h1 在一個頁面里只能出現(xiàn)一次涨椒。
文本標(biāo)簽
<font>文本內(nèi)容</font>
文本格式化標(biāo)簽
文本加粗標(biāo)簽 <strong></strong> <b></b> 工作里盡量使用strong
文本傾斜標(biāo)簽
<em></em> <i></i> 工作里盡量使用em
刪除線標(biāo)簽
<del></del> <s></s> 工作里盡量使用del
下劃線標(biāo)簽
<ins></ins> <u></u> 工作里盡量ins
注意：之所以工作里使用<strong></strong> <em></em> <del></del>
<ins></ins> 是因?yàn)楦姓Z義化摊鸡。
圖片標(biāo)簽
Src 圖片的來源 必寫屬性
Alt 替換文本 圖片不顯示的時候顯示的文字
Title 提示文本 鼠標(biāo)放到圖片上顯示的文字
Width 圖片寬度
Height 圖片高度
相對路徑
相對于文件自身出發(fā)，就是相對路徑蚕冬。
文件和圖片（html文檔）在同一個目錄(文件夾) 免猾，直接寫文件名。
<img src="lzl.jpg" alt="林志玲" title="我的女神" />
圖片（html文檔）在文件在下一級目錄里囤热。文件夾名稱+/+圖片（html）名稱
<img src="志玲/lzl.jpg" alt="" />
圖片（html）在文件的上一級目錄里猎提，..+/+圖片（html）名稱
<img src="../lzl.jpg" alt="" />
圖片在文件的上一級的其他目錄里，../文件夾名稱/圖片名稱
<img src="../01-ppt/llj.jpg" alt="" />
總結(jié)：找到下一級目錄（文件夾）的圖片（文件）用 / 跳出當(dāng)前目錄使用../
絕對路徑
<!-- 電腦上絕對路徑 -->
<img src="F:\前端與移動開發(fā)學(xué)院\14期\html基礎(chǔ)一上課資料\03-練習(xí)\1.gif" alt="" />
超鏈接
<a href="03圖片標(biāo)簽.html" title="圖片標(biāo)簽" target="_self">超鏈接</a>
<a href="03圖片標(biāo)簽.html" title="圖片標(biāo)簽" target="_blank">超鏈接</a>
href 去往的路徑（跳轉(zhuǎn)的頁面） 必寫屬性
title 提示文本 鼠標(biāo)放到鏈接上顯示的文字
target=”_self” 默認(rèn)值 在自身頁面打開（關(guān)閉自身頁面旁蔼，打開鏈接頁面）
Target=”_blank” 打開新頁面 （自身頁面不關(guān)閉锨苏，打開一個新的鏈接頁面）
<base /> 可以設(shè)置整體鏈接的打開狀態(tài)
錨鏈接
1.先定義一個錨點(diǎn)
<p id="sd">新浪娛樂訊 7月26日，
2.超鏈接到錨點(diǎn)
<a href="#sd">回到頂部</a>
空鏈 不知道鏈接到那個頁面的時候牌芋，用空鏈
<a href="#">空鏈</a>
壓縮文件下載 不推薦使用
<a href="../../1-1ppt.rar">壓縮包</a>
超鏈接優(yōu)化寫法
<base target="_blank"> 讓所有的超鏈接都在新窗口打開
有序列表
<ol>
<li></li> 列表項(xiàng)
<li></li>
<li></li>
</ol>
<!-- 有序列表 -->
<ol start="3">
<li>日本經(jīng)濟(jì)被掐斷 安倍欲哭無淚</li>
<li>大中華區(qū)繼續(xù)領(lǐng)跌蘋果新財報</li>
<li>大中華區(qū)繼續(xù)領(lǐng)跌蘋果新財報</li>
<li>大中華區(qū)繼續(xù)領(lǐng)跌蘋果新財報</li>
<li>大中華區(qū)繼續(xù)領(lǐng)跌蘋果新財報</li>
</ol>
type=”1,a,A,i,I” type的值可以為1,a,A,i,I
start=”3” 決定了開始的位置蚓炬。
無序列表
<ul>
<li></li> 列表項(xiàng)
<li></li>
<li></li>
</ul>
<ul type="disc">
<li>習(xí)近平就阿富汗恐襲致慰問電</li>
<li>習(xí)近平就阿富汗恐襲致慰問電</li>
<li>習(xí)近平就阿富汗恐襲致慰問電</li>
<li>習(xí)近平就阿富汗恐襲致慰問電</li>
</ul>
type=”square” 小方塊
Type=”disc” 實(shí)心小圓圈
Type=”circle” 空心小圓圈
自定義列表
<!-- 自定義列表 -->
<dl>
<dt>幫助中心</dt>
<dd>購物指南</dd>
<dd>訂單操作</dd>
<dd>賬戶管理</dd>
</dl>
音樂標(biāo)簽
<!-- 音樂標(biāo)簽 -->
<embed src="1.mp3" hidden="true">
滾動標(biāo)簽
meta 標(biāo)簽介紹
1.meta：元數(shù)據(jù)（metadate）是關(guān)于數(shù)據(jù)的信息松逊。
<meta>標(biāo)簽是提供html文檔的元數(shù)據(jù)躺屁。元數(shù)據(jù)不會在網(wǎng)頁上顯示出來，是對機(jī)器可讀的经宏。典型的就是通過meta標(biāo)簽可以設(shè)置網(wǎng)頁的關(guān)鍵字犀暑，網(wǎng)頁描述驯击，文檔作者等。
2.meta 的屬性有兩種：name和http-equiv
name屬性
name屬性主要用于描述網(wǎng)頁耐亏，對應(yīng)于content（網(wǎng)頁內(nèi)容）
<meta name="Generator" contect="">用以說明生成工具（如Microsoft FrontPage 4.0）等徊都；
<meta name="KEYWords" contect="">向搜索引擎說明你的網(wǎng)頁的關(guān)鍵詞；
<meta name="DEscription" contect="">告訴搜索引擎你的站點(diǎn)的主要內(nèi)容广辰；
<meta name="Author" contect="你的姓名">告訴搜索引擎你的站點(diǎn)的制作的作者暇矫；
<meta name="Robots"contect="all|none|index|noindex|follow|nofollow">
其中的屬性說明如下：
設(shè)定為all：文件將被檢索，且頁面上的鏈接可以被查詢择吊；
設(shè)定為none：文件將不被檢索李根，且頁面上的鏈接不可以被查詢;
設(shè)定為index：文件將被檢索；
設(shè)定為follow：頁面上的鏈接可以被查詢几睛；
設(shè)定為noindex：文件將不被檢索房轿，但頁面上的鏈接可以被查詢;
設(shè)定為nofollow：文件將不被檢索，頁面上的鏈接可以被查詢所森〈殉郑
http-equiv屬性
<meta http-equiv="Content-Type" contect="text/html"; charset=gb_2312">
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />
網(wǎng)頁重定向
Link標(biāo)簽
1：引用外部css
2: 引用title圖片 （icon) 例如： <link rel="icon" href="1.icon">
<!-- 鏈接外部樣式表文件 -->
<link rel="stylesheet" href="1.css">
<!-- icon圖標(biāo) -->
<link rel="icon" href="favicon.ico">
字符集（charset）
- utf-8是目前最常用的字符集編碼方式，常用的字符集編碼方式還有>* gbk和gb2312
- gb2312 簡單中文
- GBK包含全部中文字符 繁體
- BIG5 繁體中文
- UTF-8則包含全世界所有國家需要用到的字符
HTML表格
<table>
<table>...</table>標(biāo)簽用于在HTML文檔中創(chuàng)建表格焕济。它包含表名和表格本身內(nèi)容的代碼纷妆。表格的基本單元是單元格，用<td>...</td>標(biāo)簽定義晴弃。
<tr>
表格行用<tr>標(biāo)簽定義凭需，由單元格構(gòu)成。多個行結(jié)合在一起就構(gòu)成一個表格肝匆，這反映在用于創(chuàng)建表格的HTML語法中粒蜈。表格的每一行都用<tr>標(biāo)簽表示，并用相應(yīng)的</tr> 結(jié)束
<td>
表格的每一行又有若干表格單元格旗国，用<td>...</td>標(biāo)簽表示枯怖。TD是"表格數(shù)據(jù)( Table Data)”的英文縮寫。<td>標(biāo)簽定義一個列能曾，嵌套于<tr>標(biāo)簽內(nèi)度硝。
border屬性是最常用的屬性，可用于定義表格的單元格和結(jié)構(gòu)寿冕。該屬性指定邊框的厚度蕊程，如果其值設(shè)置為零(0)，則不顯示邊框驼唱。
代碼：
<table border="4" width="500" height="300" cellspacing="12" cellpadding="10" align="center" bgcolor="yellow">
<tr align="center">
<td>張三</td>
<td>18</td>
<td>挖掘機(jī)</td>
</tr>
<tr>
<td>馬六</td>
<td>20</td>
<td>大前端</td>
</tr>
</table>
表格的屬性
表格的標(biāo)準(zhǔn)結(jié)構(gòu)
<table>
<thead>
<tr>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
表頭和單元格合并
1.表頭<caption></caption>
caption 元素定義表格標(biāo)題
colspan=”2” 合并同一行上的單元格
rowspan=”2” 合并同一列上的單元格
caption 標(biāo)簽必須緊隨 table 標(biāo)簽之后藻茂。您只能對每個表格定義一個標(biāo)題。通常這個標(biāo)題會被居中于表格之上。
表格標(biāo)題辨赐、邊框顏色优俘、內(nèi)容垂直對齊
表頭一般位于表格的第一行或第一列，其文本加粗居中掀序，如下圖所示帆焕，即為設(shè)置了表頭的表格。設(shè)置表頭非常簡單不恭，只需用表頭標(biāo)記<th></th>替代相應(yīng)的單元格標(biāo)記<td></td>即可叶雹。
表格標(biāo)題 <th></th>用法和td一樣
標(biāo)題的文字自動加粗水平居中對齊
<tr>
<th>張三</th>
<th>20</th>
<th>大前端</th>
</tr>
邊框顏色
bordercolor="red"
內(nèi)容垂直對齊方式
<td valign="bottom">張三</td>
Valign=”top | middle | bottom”
表單（form）
-常見的表單：銀行開戶，學(xué)籍錄入换吧，網(wǎng)上注冊信息等等浑娜。。
表單的作用：主要負(fù)責(zé)數(shù)據(jù)采集功能式散。
對于表單構(gòu)成中的表單控件筋遭、提示信息和表單域，初學(xué)者可能比較難理解暴拄，對他們的具體解釋如下：
- 表單控件：包含了具體的表單功能項(xiàng)漓滔，如單行文本輸入框、密碼輸入框乖篷、復(fù)選框响驴、提交按鈕、重置按鈕等撕蔼。
- 提示信息：一個表單中通常還需要包含一些說明性的文字豁鲤，提示用戶進(jìn)行填寫和操作。
- 表單域：他相當(dāng)于一個容器鲸沮，用來容納所有的表單控件和提示信息琳骡，可以通過他定義處理表單數(shù)據(jù)所用程序的url地址，以及數(shù)據(jù)提交到服務(wù)器的方法讼溺。如果不定義表單域楣号，表單中的數(shù)據(jù)就無法傳送到后臺服務(wù)器。
表單域
<form name="from_name" action="1.php" method="post">……</form>
屬性：action:處理信息
Method=”get | post”
Get通過地址欄提供（傳輸）信息怒坯，安全性差炫狱。
Post 通過1.php來處理信息，安全性高剔猿。
name:定義表單的名稱
Fieldset：把表單分組
Legend：分組名稱
文本輸入框
<!-- 文本輸入框 -->
用戶名:<input type="text" maxlength="6" name="username" value="大前端">
maxlength="6" 限制輸入字符長度
readonly=”readonly” 將輸入框設(shè)置為只讀狀態(tài)（不能編輯）
disabled="disabled" 輸入框未激活狀態(tài)
name="username" 輸入框的名稱
value="大前端" 將輸入框的內(nèi)容傳給處理文件
密碼輸入框
<!-- 密碼輸入框 -->
密碼:<input type="password" name="pwd">
注意：文本輸入框的所有屬性對密碼輸入框都有效视译。
單選框
<!-- 單選框 -->
<input type="radio" name="gender" checked="checked">男
<input type="radio" name="gender">女
只有將name的值設(shè)置相同的時候，才能實(shí)現(xiàn)單選效果归敬。
checked=”checked” 設(shè)置默認(rèn)選擇項(xiàng)酷含。
下拉列表
<select>
<option>下拉列表選項(xiàng)</option>
<option>下拉列表選項(xiàng)</option>
</select>
省(市)： <select>
<option>河北</option>
<option>山西</option>
<option>山東</option>
<option selected="selected">北京</option>
</select>
<!-- 下拉列表多選 -->
<select multiple="multiple">
<option>河北</option>
<option>山西</option>
<option>山東</option>
<option selected="selected">北京</option>
</select>
屬性：
Multiple=”multiple” 將下拉列表設(shè)置為多選項(xiàng)
Selected=”selected” 設(shè)置默認(rèn)選中項(xiàng)目
市(區(qū)):<select>
<!-- 下拉列表信息分組 -->
<optgroup label="北京市">
<option>昌平區(qū)</option>
<option>海淀區(qū)</option>
<option>朝陽區(qū)</option>
<option>大興區(qū)</option>
</optgroup>
<optgroup label="廣州市">
<option>昌平區(qū)</option>
<option>海淀區(qū)</option>
<option>朝陽區(qū)</option>
<option>大興區(qū)</option>
</optgroup>
</select>
<optgroup></optgroup> 對下拉列表進(jìn)行分組鄙早。
Label=”” 分組名稱。
多選框
<!-- 多選框 -->
<input type="checkbox" checked="checked">喝酒
<input type="checkbox" checked="checked">抽煙
<input type="checkbox" checked="checked">燙頭
Checked=”checked” 設(shè)置默認(rèn)選中項(xiàng)
多行文本框
<!-- 多行文本框 -->
<textarea cols="130" rows="10"></textarea>
Cols 控制輸入字符的長度第美。
Rows 控制輸入的行數(shù)
文件上傳控件
<!-- 文件上傳控件 -->
<input type="file">
文件提交按鈕
文件提交按鈕
<input type="submit">
可以實(shí)現(xiàn)信息提交功能
普通按鈕
普通按鈕
<input type="button" value="普通按鈕">
不能提交信息蝶锋，配合JS使用
圖片按鈕
<!-- 圖片按鈕 -->
<input type="image" src="按鈕.jpg">
圖片按鈕可實(shí)現(xiàn)信息提交功能
重置按鈕
<!-- 重置按鈕 -->
<input type="reset">
將信息重置到默認(rèn)狀態(tài)
表單信息分組
<form action="1.php" method="post">
<fieldset>
<legend>分組信息</legend>
</fieldset>
</form>
Html5表單補(bǔ)充
標(biāo)簽語義化
標(biāo)簽語義化概念：
根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化）陆爽，選擇合適的標(biāo)簽（代碼語義化）
標(biāo)簽語義化意義：
1:網(wǎng)頁結(jié)構(gòu)合理
2:有利于seo:和搜索引擎建立良好溝通什往，有了良好的結(jié)構(gòu)和語 義你的網(wǎng)頁內(nèi)容自然容易被搜索引擎抓取慌闭；
3:方便其他設(shè)備解析（如屏幕閱讀器别威、盲人閱讀器、移動設(shè)備）
4:便于團(tuán)隊開發(fā)和維護(hù)
標(biāo)簽語義化（注意事項(xiàng)）
- 盡可能少的使用無語義的標(biāo)簽div和span驴剔；
- 在語義不明顯時省古，既可以使用div或者p時，盡量用p, 因?yàn)閜在默認(rèn)情況下有上下間距丧失，對兼容特殊終端有利豺妓；
- 不要使用純樣式標(biāo)簽，如：b布讹、font琳拭、u等，改用css設(shè)置描验。
- 需要強(qiáng)調(diào)的文本白嘁，可以包含在strong或者em標(biāo)簽中strong默認(rèn)樣式是加粗（不要用b），em是斜體（不用i）膘流；
