URL地址
1.瀏覽器想服務(wù)器發(fā)送請(qǐng)求(通過http協(xié)議)
2.http協(xié)議：超文本傳輸協(xié)議，也就是瀏覽器和服務(wù)器端的網(wǎng)頁(yè)傳輸數(shù)據(jù)的約束和規(guī)范
3.url協(xié)議：平時(shí)我們寫的網(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:定義端口號(hào)（網(wǎng)頁(yè)默認(rèn)端口：80）
path:網(wǎng)頁(yè)所在服務(wù)器的路徑
filename:文件名稱
單標(biāo)簽
注釋標(biāo)簽
<!-- ddd注釋 -->
在HTML中還有一種特殊的標(biāo)記——注釋標(biāo)記。如果需要在HTML文檔中添加一些便于閱讀和理解但又不需要顯示在頁(yè)面中的注釋文字，就需要使用注釋標(biāo)記。其基本語(yǔ)法格式如下：
注釋內(nèi)容不會(huì)顯示在瀏覽器窗口中，但是作為HTML文檔內(nèi)容的一部分，也會(huì)被下載到用戶的計(jì)算機(jī)上，查看源代碼時(shí)就可以看到。
換行標(biāo)簽 <br />
在HTML中，一個(gè)段落中的文字會(huì)從左到右依次排列，直到瀏覽器窗口的右端，然后自動(dòng)換行。如果希望某段文本強(qiáng)制換行顯示，就需要使用換行標(biāo)記<br />，這時(shí)如果還像在word中直接敲回車鍵換行就不起作用了。
水平線標(biāo)簽<hr />
在網(wǎng)頁(yè)中常?？吹揭恍┧骄€將段落與段落之間隔開，使得文檔結(jié)構(gòu)清晰，層次分明。這些水平線可以通過插入圖片實(shí)現(xiàn)，也可以簡(jiǎn)單地通過標(biāo)記來(lái)完成，<hr />就是創(chuàng)建橫跨網(wǎng)頁(yè)水平線的標(biāo)記。其基本語(yǔ)法格式如下：
<hr />是單標(biāo)記，在網(wǎng)頁(yè)中輸入一個(gè)<hr />，就添加了一條默認(rèn)樣式的水平線。
雙標(biāo)簽
<p>文本內(nèi)容</p> 段落標(biāo)記
在網(wǎng)頁(yè)中要把文字有條理地顯示出來(lái)，離不開段落標(biāo)記，就如同我們平常寫文章一樣，整個(gè)網(wǎng)頁(yè)也可以分為若干個(gè)段落，而段落的標(biāo)記就是<p>。
<p>是HTML文檔中最常見的標(biāo)記，默認(rèn)情況下，文本在一個(gè)段落中會(huì)根據(jù)瀏覽器窗口的大小自動(dòng)換行。
特點(diǎn)：上下自動(dòng)生成空白行。
換行不會(huì)生成空白行。
標(biāo)題標(biāo)簽
h1-h6 取值到h6
h1 在一個(gè)頁(yè)面里只能出現(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(yǔ)義化。
圖片標(biāo)簽
Src 圖片的來(lái)源 必寫屬性
Alt 替換文本 圖片不顯示的時(shí)候顯示的文字
Title 提示文本 鼠標(biāo)放到圖片上顯示的文字
Width 圖片寬度
Height 圖片高度
相對(duì)路徑
相對(duì)于文件自身出發(fā)，就是相對(duì)路徑。
文件和圖片（html文檔）在同一個(gè)目錄(文件夾) ，直接寫文件名。
<img src="lzl.jpg" alt="林志玲" title="我的女神" />
圖片（html文檔）在文件在下一級(jí)目錄里。文件夾名稱+/+圖片（html）名稱
<img src="志玲/lzl.jpg" alt="" />
圖片（html）在文件的上一級(jí)目錄里，..+/+圖片（html）名稱
<img src="../lzl.jpg" alt="" />
圖片在文件的上一級(jí)的其他目錄里，../文件夾名稱/圖片名稱
<img src="../01-ppt/llj.jpg" alt="" />
總結(jié)：找到下一級(jí)目錄（文件夾）的圖片（文件）用 / 跳出當(dāng)前目錄使用../
絕對(duì)路徑
<!-- 電腦上絕對(duì)路徑 -->
<img src="F:\前端與移動(dòng)開發(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)的頁(yè)面） 必寫屬性
title 提示文本 鼠標(biāo)放到鏈接上顯示的文字
target=”_self” 默認(rèn)值 在自身頁(yè)面打開（關(guān)閉自身頁(yè)面，打開鏈接頁(yè)面）
Target=”_blank” 打開新頁(yè)面 （自身頁(yè)面不關(guān)閉，打開一個(gè)新的鏈接頁(yè)面）
<base /> 可以設(shè)置整體鏈接的打開狀態(tài)
錨鏈接
1.先定義一個(gè)錨點(diǎn)
<p id="sd">新浪娛樂訊 7月26日，
2.超鏈接到錨點(diǎn)
<a href="#sd">回到頂部</a>
空鏈 不知道鏈接到那個(gè)頁(yè)面的時(shí)候，用空鏈
<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ì)被掐斷 安倍欲哭無(wú)淚</li>
<li>大中華區(qū)繼續(xù)領(lǐng)跌蘋果新財(cái)報(bào)</li>
<li>大中華區(qū)繼續(xù)領(lǐng)跌蘋果新財(cái)報(bào)</li>
<li>大中華區(qū)繼續(xù)領(lǐng)跌蘋果新財(cái)報(bào)</li>
<li>大中華區(qū)繼續(xù)領(lǐng)跌蘋果新財(cái)報(bào)</li>
</ol>
type=”1,a,A,i,I” type的值可以為1,a,A,i,I
start=”3” 決定了開始的位置。
無(wú)序列表
<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>購(gòu)物指南</dd>
<dd>訂單操作</dd>
<dd>賬戶管理</dd>
</dl>
音樂標(biāo)簽
<!-- 音樂標(biāo)簽 -->
<embed src="1.mp3" hidden="true">
滾動(dòng)標(biāo)簽
meta 標(biāo)簽介紹
1.meta：元數(shù)據(jù)（metadate）是關(guān)于數(shù)據(jù)的信息。
<meta>標(biāo)簽是提供html文檔的元數(shù)據(jù)。元數(shù)據(jù)不會(huì)在網(wǎng)頁(yè)上顯示出來(lái)，是對(duì)機(jī)器可讀的。典型的就是通過meta標(biāo)簽可以設(shè)置網(wǎng)頁(yè)的關(guān)鍵字，網(wǎng)頁(yè)描述，文檔作者等。
2.meta 的屬性有兩種：name和http-equiv
name屬性
name屬性主要用于描述網(wǎng)頁(yè)，對(duì)應(yīng)于content（網(wǎng)頁(yè)內(nèi)容）
<meta name="Generator" contect="">用以說明生成工具（如Microsoft FrontPage 4.0）等；
<meta name="KEYWords" contect="">向搜索引擎說明你的網(wǎng)頁(yè)的關(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：文件將被檢索，且頁(yè)面上的鏈接可以被查詢；
設(shè)定為none：文件將不被檢索，且頁(yè)面上的鏈接不可以被查詢;
設(shè)定為index：文件將被檢索；
設(shè)定為follow：頁(yè)面上的鏈接可以被查詢；
設(shè)定為noindex：文件將不被檢索，但頁(yè)面上的鏈接可以被查詢;
設(shè)定為nofollow：文件將不被檢索，頁(yè)面上的鏈接可以被查詢?！ ?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)頁(yè)重定向
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 簡(jiǎn)單中文
- GBK包含全部中文字符 繁體
- BIG5 繁體中文
- UTF-8則包含全世界所有國(guó)家需要用到的字符
HTML表格
<table>
<table>...</table>標(biāo)簽用于在HTML文檔中創(chuàng)建表格。它包含表名和表格本身內(nèi)容的代碼。表格的基本單元是單元格，用<td>...</td>標(biāo)簽定義。
<tr>
表格行用<tr>標(biāo)簽定義，由單元格構(gòu)成。多個(gè)行結(jié)合在一起就構(gòu)成一個(gè)表格，這反映在用于創(chuàng)建表格的HTML語(yǔ)法中。表格的每一行都用<tr>標(biāo)簽表示，并用相應(yīng)的</tr> 結(jié)束
<td>
表格的每一行又有若干表格單元格，用<td>...</td>標(biāo)簽表示。TD是"表格數(shù)據(jù)( Table Data)”的英文縮寫。<td>標(biāo)簽定義一個(gè)列，嵌套于<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)簽之后。您只能對(duì)每個(gè)表格定義一個(gè)標(biāo)題。通常這個(gè)標(biāo)題會(huì)被居中于表格之上。
表格標(biāo)題、邊框顏色、內(nèi)容垂直對(duì)齊
表頭一般位于表格的第一行或第一列，其文本加粗居中，如下圖所示，即為設(shè)置了表頭的表格。設(shè)置表頭非常簡(jiǎn)單，只需用表頭標(biāo)記<th></th>替代相應(yīng)的單元格標(biāo)記<td></td>即可。
表格標(biāo)題 <th></th>用法和td一樣
標(biāo)題的文字自動(dòng)加粗水平居中對(duì)齊
<tr>
<th>張三</th>
<th>20</th>
<th>大前端</th>
</tr>
邊框顏色
bordercolor="red"
內(nèi)容垂直對(duì)齊方式
<td valign="bottom">張三</td>
Valign=”top | middle | bottom”
表單（form）
-常見的表單：銀行開戶，學(xué)籍錄入，網(wǎng)上注冊(cè)信息等等。。
表單的作用：主要負(fù)責(zé)數(shù)據(jù)采集功能。
對(duì)于表單構(gòu)成中的表單控件、提示信息和表單域，初學(xué)者可能比較難理解，對(duì)他們的具體解釋如下：
- 表單控件：包含了具體的表單功能項(xiàng)，如單行文本輸入框、密碼輸入框、復(fù)選框、提交按鈕、重置按鈕等。
- 提示信息：一個(gè)表單中通常還需要包含一些說明性的文字，提示用戶進(jìn)行填寫和操作。
- 表單域：他相當(dāng)于一個(gè)容器，用來(lái)容納所有的表單控件和提示信息，可以通過他定義處理表單數(shù)據(jù)所用程序的url地址，以及數(shù)據(jù)提交到服務(wù)器的方法。如果不定義表單域，表單中的數(shù)據(jù)就無(wú)法傳送到后臺(tái)服務(wù)器。
表單域
<form name="from_name" action="1.php" method="post">……</form>
屬性：action:處理信息
Method=”get | post”
Get通過地址欄提供（傳輸）信息，安全性差。
Post 通過1.php來(lái)處理信息，安全性高。
name:定義表單的名稱
Fieldset：把表單分組
Legend：分組名稱
文本輸入框
<!-- 文本輸入框 -->
用戶名:<input type="text" maxlength="6" name="username" value="大前端">
maxlength="6" 限制輸入字符長(zhǎng)度
readonly=”readonly” 將輸入框設(shè)置為只讀狀態(tài)（不能編輯）
disabled="disabled" 輸入框未激活狀態(tài)
name="username" 輸入框的名稱
value="大前端" 將輸入框的內(nèi)容傳給處理文件
密碼輸入框
<!-- 密碼輸入框 -->
密碼:<input type="password" name="pwd">
注意：文本輸入框的所有屬性對(duì)密碼輸入框都有效。
單選框
<!-- 單選框 -->
<input type="radio" name="gender" checked="checked">男
<input type="radio" name="gender">女
只有將name的值設(shè)置相同的時(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>朝陽(yáng)區(qū)</option>
<option>大興區(qū)</option>
</optgroup>
<optgroup label="廣州市">
<option>昌平區(qū)</option>
<option>海淀區(qū)</option>
<option>朝陽(yáng)區(qū)</option>
<option>大興區(qū)</option>
</optgroup>
</select>
<optgroup></optgroup> 對(duì)下拉列表進(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 控制輸入字符的長(zhǎng)度。
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)簽語(yǔ)義化
標(biāo)簽語(yǔ)義化概念：
根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語(yǔ)義化），選擇合適的標(biāo)簽（代碼語(yǔ)義化）
標(biāo)簽語(yǔ)義化意義：
1:網(wǎng)頁(yè)結(jié)構(gòu)合理
2:有利于seo:和搜索引擎建立良好溝通，有了良好的結(jié)構(gòu)和語(yǔ) 義你的網(wǎng)頁(yè)內(nèi)容自然容易被搜索引擎抓??；
3:方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動(dòng)設(shè)備）
4:便于團(tuán)隊(duì)開發(fā)和維護(hù)
標(biāo)簽語(yǔ)義化（注意事項(xiàng)）
- 盡可能少的使用無(wú)語(yǔ)義的標(biāo)簽div和span；
- 在語(yǔ)義不明顯時(shí)，既可以使用div或者p時(shí)，盡量用p, 因?yàn)閜在默認(rèn)情況下有上下間距，對(duì)兼容特殊終端有利；
- 不要使用純樣式標(biāo)簽，如：b、font、u等，改用css設(shè)置。
- 需要強(qiáng)調(diào)的文本，可以包含在strong或者em標(biāo)簽中strong默認(rèn)樣式是加粗（不要用b），em是斜體（不用i）；
