html5常用基本標簽

、Html的基本結構：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

網頁的文本、圖片等信息；

</body>

</html>

二、Head部分：用于表示網頁的元數據即描述網頁的基本信息

其常用標簽及屬性有：

1、title標簽：瀏覽器標簽頁顯示的標題

2、meta標簽：其常用屬性

①charset:設置文檔的字符集編碼格式。HTML5中設置字符集編碼：<meta charset="UTF-8">

常見的字符集編碼格式：

a.GB-2312:國標碼，簡體中文

b.GBK：擴展的國標碼

c.UTF-8：萬國碼 Unicode 常用

②http-equiv屬性:將我們的信息寫給瀏覽器看，讓瀏覽器按照這里面的要求執行，可選屬性值：Content-Type(文檔類型) refresh(網頁定時刷新) set-cookie(設置瀏覽器cookie緩存) 需要配合content屬性使用。（http-equiv屬性只是表明需要設置哪一部分，具體的設置內容，放到content屬性中）

③name屬性：使用方法同“http-equiv”。將我們的信息寫給搜索引擎看

常用且需要掌握的屬性值：author（作者） keywords（網頁關鍵字） description（網頁描述）這兩個屬性設置，網頁必不可少。

3、link標簽：鏈接網頁圖標（title前的小logo），其常用屬性有：

①rel屬性：聲明鏈接文件的類型，此處選icon

②type屬性：可以省略

③href屬性：表示圖片的路徑地址

三、body部分：網頁的文本、圖片等信息

標簽的分類：

塊級標簽：顯示為塊，前后隔一行（自動換行）

行級標簽：按行從左往右逐一顯示。

1、常見的塊級標簽：

①<h1></h1>......<h6><h6>：標題標簽，自動加粗，h1最大，h6最小。

②<hr/>：水平線標簽，添加一條水平線。

③<p></p>:段落標簽，

④<br/>:換行標簽，

⑤<blockquote/></blockquote>:引用標簽，cite屬性，表明引用的來源，一般引用網址

瀏覽器默認首行縮進。

⑥<pre></pre>:預格式標簽，用于重載代碼。瀏覽器默認顯示樣式：1、顯示為等寬字體。 2、代碼中的換行、

空格等元素能在瀏覽器中顯示。

【補充】html 文件中空格的表示：

2、基于布局的塊級標簽

列表：無序列表、有序列表、定義列表

①有序列表：<ol></ol> 列表項：<li></li>

②無序列表：<ul></ul> 列表項：<li></li>

③定義列表（實現圖文混排）:<dl></dl>

列表標題：<dt>一般只有一項</dt>

列表描述項：<dd>可以有很多項</dd>

3、組合標簽：<figure></figure>用于顯示圖片及圖片標題

他有兩個子標簽：<img />圖片

<figcaption></figcaption>圖片的標題

例如：<figure>

<figcaption>探險家伊澤瑞爾</figcaption>

</figure>

4、分區標簽：<div></div>

5、常見的行級標簽

<1>span（文本）:無實際意義，用于包裹某部分文字，修改特定樣式，例如：

這是<span style="color: red;font-size: 36px;">span</span>中的文字

img（圖片）：其常用屬性：①src:表示引用圖片的地址。

路徑地址的寫法：相對路徑：以當前文件為最準，去尋找圖片地址

a、與文件處于同一層的圖片，直接寫圖片名

b、圖片在當前文件下一層：文件名/圖片名

c、圖片在當前文件上一層：../圖片名

絕對路徑:file:///盤符：/文件夾/圖片名，但是嚴禁使用

圖片網址：網絡上的圖片鏈接，但是一般不用

②height和width：圖片的高度和寬度?？梢杂肅SS樣式代替

③title：圖片標。當鼠標指上之后顯示的文字

④alt:當圖片無法顯示的時候，顯示的文字

<2>em（傾斜強調）

<3>strong（加粗強調）

<4>b（加粗）

<5>i（傾斜）

Strong、em、b、i的區別

1、Strong、em都表示強調，Strong為粗體，em為斜體，而Strong的強調程度逗比em高

2、Strong和b都能加粗，em和i都能傾斜，，但是Strong和em多了一層強調的語義。H5要求標簽盡可能實現語義化。

<6>q（短引用）

<7>small/big（縮小/放大字體）：small和big分別是縮小和擴大字體，都可以多層嵌套直至上限或下限

<8>a（超鏈接）

1、href:超鏈接的路徑，可以是網絡鏈接，也可以是本地文件。

2、target:跳轉頁面打開的位置。_self自身頁面，_blank新頁面。

3、title:鼠標指在超鏈接上顯示的名稱。

4、Rel（被鏈接是當前的前/后一篇）:指定被鏈接文檔與當前文檔的關系,搜索引擎會利用該屬性獲取更多的有關鏈接的信息：

rel="prev"被鏈接文檔是當前文檔的前一篇文檔，

rel="next"被鏈接文檔是當前文檔的后一篇文檔,

rel="icon"被鏈接文檔是當前文檔的圖標

rel="stylesheet"被鏈接文檔是當前文檔的樣式表

5、Rev（當前是被鏈接的前/后一篇）

錨鏈接：

①本頁面錨鏈接:a、設置錨點：<a name="top"></a>

b、跳轉錨點：#name名

①頁面間錨鏈接:a、在即將跳轉頁面的指定位置設置錨點

b、跳轉錨點：頁面地址.html#name名

<a href="02_常見的塊級標簽.html#Hbuilder">頁面間錨鏈接</a><br/>

功能性鏈接： mailto用于給指定郵箱發送郵件

file：///e:/aaa.png打開本地文件

tencent://message/?uin=1315618220 給指定QQ發送息

<9>s標簽，有誤文本：刪除線

<s>這是S標簽中的文字</s><br />

<10>cite標簽：瀏覽器顯示為傾斜，常用于書、畫作、作品的引用

<cite>這是cite中的文本</cite><br />

<11>code:計算機代碼，不保留代碼格式

<pre>

</pre>

<12>bdo:表示文本方向，屬性：dir="ltr"表示從左往右，dir="rtl"表示從右往左

kbd:表示需要用戶用鍵盤輸入的內容，瀏覽器顯示為等寬字體

請輸入“<kbd>Esc</kbd>”推遲系統<br />

<13>sup:上標文本，sub:下標文本

x<sub>6</sub><br />

? ? 空格

? ? 空格 <br />

<14>u:下劃線

<u>這是下劃線</u><br />

mark:高亮或標記文本，瀏覽器顯示為黃色背景

6、表格：表格的行：tr，每行中的列：td，表格的表頭：th

表格的常用屬性：

表格行列屬性：[tr和td的屬性]：

1、width/heigh：單元格的寬高

2、bgcolor:單元格的背景顏色

3、align:left center right 單元格中的文字水平對齊方式

4、valign:top center bottom 單元格中的文字垂直對其方式

5、nowrap:單元格中文字不換行

【注意】當表格屬性與行列屬性沖突時，行列屬性優先級高

7、表單（form）

【兩個重要屬性】：action-表單提交的服務器地址 method-表單提交數據的方法（get/post）

get/post區別:

1>get使用URL傳參：http://服務器地址?name1=value1&name2=value2

（?表示傳遞參數，?后面采用name=value的形式傳遞，多個參數之間用&連接） ① URL傳參不安全，所有信息可在地址欄看到，并且別人可以很容易url注入，來攻擊自己的數據庫。

② URL傳參數據量有限，只能傳遞少量數據。

2>post:使用http請求傳遞數據。URL地址看不到數據信息，安全且傳遞信息量沒有限制

綜上所述：大部分使用post傳參，但是get傳參比Post快

【input標簽及屬性】

①type：input輸入框的類型，可選值有：

②name：input輸入框的別名，必填，因為傳參的時候采用name=value的形式傳遞。

③value：input輸入框的默認值

④placeholder:提示內容，當輸入框有value時，提示內容消失。

【input特殊屬性值】

① checked="checked"默認選中

② disabled="disabled"設置控制不能使用，按鈕上不能點擊，輸入框上不能修改，而且如果

輸入框時disabled，則輸入框信息不傳遞到后臺

③hidden=“hidden”隱藏。等同于<input type="hidden" name="username"value="1234" />

等同于配合disabled或根據其他需要，使用隱藏域傳遞信息.

【input-type屬性詳解】

①text：文本輸入框

②password：密碼輸入框，內容不對外顯示

③radio：單選按鈕

checkbox:復選按鈕

a、單選按鈕，name和value屬性需同時存在，提交時，提交的是value中的屬性值

例如：<input type="radio" name="sex" value="男"/>提交顯示為"sex=男"

b、radio憑借name屬性區分是否為同一組，name相同為同組，且只能選擇一個

c、checked="checked"默認選中，（radio只可以選一個，checkbox可以選多個）

④submit：提交按鈕，提交表單數據

⑤reset：重置按鈕，重置為默認狀態

⑥file：文件上傳按鈕

⑦image：圖片提交按鈕，功能同submit，可以提交數據

⑧button：普通按鈕，沒什么軟用

⑨其他常用屬性值：見下圖

【select標簽】下拉選擇標簽

寫法：

</select>

常用屬性

①name屬性：寫在select里，所有選項只有一個name

②multiple屬性：multiple="multiple"設置select為多選，一般不用

③option常用屬性：value=""屬性，當option沒有value屬性時，往后臺傳遞的是<option></option>中間的文字，

當有value屬性時，傳遞的是value的屬性值。

title=""屬性,鼠標之上后現實的文字

select="select"默認屬性值

④optgroup屬性：用于option屬性分組，用lable屬性表示分組名。

</optgroup>

【textarea】:文本域，其常用屬性：

①設置寬度高度 style="width: 150px;height: 200px;

②readonly="readonly"：只讀模式，不允許修改編輯

③style="resize: none;"設置為寬度高度不允許修改

④style="overflow:;"設置文字超出區域時，如何處置，常用屬性值有：

hidden 超出區域的文字，隱藏無法顯示

scroll 無論文字多少，均顯示滾動

auto 自動，根據文字多少自動決定是否會顯示為滾動條

【fieldset 、legend】表單的邊框與標題

<fieldset> //邊框

<legend> //標題

</legend>

</fieldset>

如果想讓標題嵌入到邊框中，需將標題標簽寫到邊框標簽里面

一個表單可以有多組標題加邊框組合

【h5智能表單】

1、H5新增input的form屬性，用于指定特form表單的id，實現input無需放在form標簽之中，即可通過表單進行提交

……

</form>

2、 input元素的新增屬性：

Autocomplete：自動完成功能，記錄用戶之前輸入的內容，并在用戶下次輸入時提示用戶輸入

》》》屬性值：on/off

》》》可以再form表單使用，對整個表單的所有控件進行自動完成的開關也可以在input上使用，

對特定輸入框進行修改

》》》絕大部分瀏覽器默認開啟

Autofocus：自動獲得焦點，autofocus="autofocus"只能獲得一個焦點

Form：所屬表單，通過id確認屬于哪個表單

Required：必填,required="required",設置必填，否則停止提交

Pattern：使用正則表達式驗證input的模式

Placeholder：提示，當有value時取消提示。

.1 HTML簡介

1.1.1 HTML：Hyper Text Markup Language（超文本標記語言）

在學習使用HTML之前，大家經常會問，什么是HTML？HTML是用來描述頁面的一種語言，它是一種超文本標記語言，也就是說，HTML不是一種編程語言，僅是一種標記語言。 HTML由一套標記標簽組成，在制作網頁時，HTML使用標記標簽來描述網頁。

1.1.2 發展史

1.1.3 HTML5的優勢

HTML5自正式推出以來，就以一種驚人的速度被迅速推廣著，各主流瀏覽器對于HTML5表現出來的熱烈歡迎、積極支持。

1、世界知名瀏覽器廠商對HTML5的支持

通過對Internet、Explorer、Google、Firefox、Safari、Opera等主要的web瀏覽器發展策略調查，發現它們都在支持HTML5上采取了措施

- 微軟：2010年3月16日，微軟與拉斯維加斯市舉行的MIX10技術大會上宣布已推出InternetExplorer(IE)9瀏覽器開發者預覽版。

- Google：2010年2月19日，GoogleGears項目經理伊安~費特通過博客宣布，谷歌將放棄對Gears瀏覽器插件項目支持、重點開發HTML5項目

- 蘋果：2010年6月7日，蘋果開發者大會的會后發布了Safari5。這款瀏覽器支持10個以上HTML5的新技術，包括全屏播放、HTML5地理位置、HTML5的形式驗證等功能

- Opera：2010年5月5日，Opera軟件公司首席技術官Hakon Wium Lie先生在訪華之際，接受了中國軟件資訊網等少數幾家媒體采訪，他認為HTML5和CSS3將是全球互聯網發展的未來趨勢

- Mozilla：2010年7月，Mozilla基金會發布了Firefox4瀏覽器的第一個測試版，從官方文檔看，它對HTML5是完全級別的支持

2、市場的需求

現在的市場已經迫不及待地要求有一個統一的互聯網通用標準。HTML5之前的情況是，由于各瀏覽器之間不統一，僅修改web瀏覽器之間的由于兼容性而引起的bug就浪費了大量的時間。而HTML5的目標就是將web帶入一個成熟的應用平臺，在HTML5平臺上，視頻，音頻，圖像，動畫及同計算器的交互都被標準化。

3、跨平臺

HTML5可以做到跨平臺開發，用戶只用打開瀏覽器即可訪問應用，PC網站、各種移動設備，插件等核心代碼就可以不需要重復編寫，極大地減少了開發人員的工作量。

1.1.4 W3C標準

發明HTML的初衷是實現信息資料的網絡傳播和共享，希望HTML文檔具有平臺無關性，即同一個HTML文件，在不同的瀏覽器上看到同樣的頁面內容和效果。但是遺憾的是，隨著瀏覽器市場的激烈競爭，各大瀏覽器廠商為了吸引用戶，都在早期HTML版本的基礎上擴展各類標簽，各瀏覽器之間互不兼容，導致HTML編碼規則混亂，違背了HTML發明的初衷，因此需要一個組織來指定和維護統一的國際化web開發標準，確保多個瀏覽器都兼容，HTML內容結構都是語義化的。

W3C標準不是某一個標準，而是一系列的標準集合，一個網頁主要有三部分組成，即結構、表現、行為。

對應的標準也分三方面：結構化標準語言主要包括XHTML和XML，表現標準語言主要包括CSS，行為標準主要包括對象模型（如W3CDOM）、ECMAScript等。這些標準大部分由W3C起草和發布，也有一些是其他標準組織制訂的標準，比如ECMA（European Computer Manufacturers Association）的ECMAScript標準。

1.1.5 網頁編輯工具

1、開發工具：

記事本、Dreamweaver、UltraEdit、Sublime、WebStorm等
你可以從以上軟件的官網中下載對應的軟件，按步驟安裝即可。
接下來我們將為大家演示如何使用 WebStorm來創建 HTML 文件。

2、使用WebStorm編輯HTML文檔如下：

打開WebStorm編輯器后，選擇File->New->HTML File命令，打開“HTML File”對話框;
在“Name”文本框中輸入HTML的文件名為“my_firstPage”在“Kind”下拉列表框中選擇HTML5 file選項后OK按鈕即可創建一個HTML5頁面的模板;
在body元素和title元素中添加網頁內容;
網頁內容添加完成后，鼠標移動到編輯器的右上方，會出現幾個常見的瀏覽器圖標，單擊Chrome瀏覽器附表即可打開頁面;
在Chrome瀏覽器中可以顯示出結果。

2.1 HTML基礎

2.1.1 HTML5的基本結構

<html>
    <head>
             <title>我的第一個網頁</title>
    </head>
    <body>
             我的第一個網頁
    </body>
</html>

標簽都是成對出現的。有一個開頭標記就應該有一個對應的結束標記記，“<>”開始，以“</>”結束，要求成對出現，標簽之間有縮進，提現層次感，方便閱讀。

HTML5的基本結構分為兩部分。整個HTML包括頭部｛head｝和主體｛body｝兩部分，頭部包括網頁標題｛title｝等基本信息，主體包括頁面的內容信息，如圖片、文字等。

2.1.2 網頁的基本信息

1、DOCTYPE 聲明在這個HTML5文件最上面有一行關于DOCTYPE文檔類型的聲明，約束HTML文檔結構。檢查是否符合相關WEB標準，同時告訴瀏覽器使用那中規范來解釋這個文檔中的代碼。DOCTYPE聲明必須位于HTML文檔的第一行。

HTML5:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>

HTML4：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://wwww.w3.org/TR/xhtml1-transitional.dtd">

2、<title>標簽 使用<title>標簽描述頁面的標簽，類似一個文檔的標題，為一個簡介的主題，并能使讀者有興趣。

<title>搜狐-中國最大的門戶網站</title>

3、<meta>標簽 使用<meta>標簽描述網頁的摘要信息，包括文檔內容類型、字符編碼信息，搜索關鍵字、網站提供的功能和服務的詳細描述等。<meta>標簽的內容并不顯示，其目的是方便瀏覽器解析或利于搜索引擎搜索，它采用“名稱/值”對的方式描述摘要信息。

meta標簽可分為兩大部分：http-equiv和name變量。

http-equiv相當于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助瀏覽器正確地顯示網頁內容。

name屬性主要用于描述網頁，與之對應的屬性值為content，content中的內容主要是便于搜索引擎機器人查找信息和分類信息用的。

1.文檔內容類型，字符編碼信息書寫如下：

HTML5:

<meta charset="UTF-8">

HTML4:

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

屬性：charset表示字符集編碼，常用的編碼有以下幾種。

1.gb2312：簡體中文，一般用于包含中文和英文的頁面；

2.ISO-885901：純英文，一般用于只包含英文的頁面；

3.big5：繁體，用于帶有繁體字的頁面；

4.UTF-8：國際性通用的編碼，同樣適用于中文和英文的頁面。和gb2312編碼相比，國際通用性更好。

2.搜索關鍵字和內容描述信息書寫如下：

<meta name="keywords" content="云圖智聯">
<meta name="description"content="云圖智聯是國內的IT教育集團，致力于為中國培養優秀的IT技術人才">

網站示例：

<!--京東-->
 <meta name="description"
          content="京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，為您提供愉悅的網上購物體驗!"/>
    <meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手表,存儲卡,京東"/>

<!--淘寶-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="renderer" content="webkit" />
  <title>淘寶網 - 淘！我喜歡</title>
  <meta name="spm-id" content="a21bo" />
  <meta name="description" content="淘寶網 - 亞洲較大的網上交易平臺，提供各類服飾、美容、家居、數碼、話費/點卡充值… 數億優質商品，同時提供擔保交易(先收貨后付款)等安全交易保障服務，并由商家提供退貨承諾、破損補寄等消費者保障服務，讓你安心享受網上購物樂趣！" />
  <meta name="aplus-xplug" content="NONE">
  <meta name="keyword" content="淘寶,掏寶,網上購物,C2C,在線交易,交易市場,網上交易,交易市場,網上買,網上賣,購物網站,團購,網上貿易,安全購物,電子商務,放心買,供應,買賣信息,網店,一口價,拍賣,網上開店,網絡購物,打折,免費開店,網購,頻道,店鋪" />

2.1.3 HTML5的基本標簽

1、標題標簽

<h1>…</h1>
<h2>…</h2>
<h3>…</h3>
<h4>…</h4>
<h5>…</h5>
<h6>…</h6>

標題標簽表示一段文字和標題或主題，并且支持多層的內容結構。例如，一級標題采用h1，二級標題采用h2，其他級別標題以此類推。HTML共提供了六級標題h1~h6，并賦予了標題一定的外觀，所有標題字體加粗，h1字號最大，h6字號最小。

2、段落標簽、換行標簽和水平線標簽

<p>段落標簽</p>
<br/><!--換行標簽-->
<hr><!--水平線標簽-->

3、字體樣式標簽

<!--加粗-->
<strong></strong>
<b></b>
<!--傾斜-->
<em></em>
<i></i>
<!--字體縮小-->
<small></small>
<!--刪除線-->
<s></s>
<!--下劃線-->
<u></u>

4、圖像標簽

（1）常見的圖像格式

1.JPG格式

JPG格式圖像是在Internet上被廣泛支持的圖像格式，它是聯合圖像專家組格式的英文縮寫。JPG格式采用的是有損壓縮，會造成圖像畫面的失真，不過壓縮之后的體積很小，而且比較清晰，所以比較適合在網頁中應用此格式最適合用于排和或連續取色調圖像的高級格式，這事因為JPG文件可以包含數百萬種顏色。隨著JPG格式文件品格式質的提高，文件的大小和下載時間也會隨著增加。通?？梢酝ㄟ^壓縮JPG格式文件在圖像品質和文件大小之間達到良好的平衡。

2.GIF格式

GIF格式圖像是網頁中使用最廣泛，最普通的一種圖像格式，它是圖像交換格式的英文縮寫。GIF格式文件支持透明色，使得GIF格式在網頁的背景和一些多層特效的顯示上用得非常多；還支持動畫，這是它最突出的一個特點，因此GIF格式圖像在網頁中應用非常廣泛。

3.BMP格式

BMP格式圖像在Windows操作系統中使用得比較多，它是位圖的英文縮寫。BMP格式圖像格式與其他Microsoft Windows程序兼容。它不支持文件壓縮，也不是用于Web頁。

4.PNG格式

PNG格式是20世紀90年代中期開始開發的圖像文件儲存格式，它兼有GIF和JPG格式的優勢，同時具備GIF格式不具備的特性。

（2）圖像標簽

<img src="path" alt="text" title="text"  width="x"  height="y" />

src屬性表示圖片路徑，alt屬性指定圖像的代替文本，表示圖像無法顯示時（如圖片路徑錯誤或網速太慢等）替代先是文本，這樣，即使當圖像無法顯示時，用戶還可以看到網頁丟失的信息內容。

title屬性可以提供額外的提示或幫助信息，當鼠標移至圖片上時顯示提示信息，方便用戶使用。

width和height兩個屬性分別表示圖片的寬度和高度，如果不設置，那么圖片默認顯示原始大小。

5、超鏈接標簽

（1）超鏈接包含兩部分內容，一是鏈接地址，即鏈接的目標，可以是某個網站或文件路徑，對應a標簽的href屬性；二是鏈接文本或圖像，點擊該文本或圖像，將跳轉到href屬性指定的鏈接地址。

<a href="path" target="目標窗口位置">鏈接文本或圖像</a>

href：鏈接地址的路徑;

target：指定鏈接在哪個窗口打開，常用的取值有_self（自身窗口）、_blank（新建窗口）。超鏈接即可以是文本超鏈接，也可以使圖片超鏈接

（2）常用的超鏈接

1>頁面間鏈接

從一個頁面鏈接到另一個頁面

2>錨鏈接

錨鏈接也稱錨點鏈接，命名錨點鏈接（也叫書簽鏈接）常常用于那些內容龐大繁瑣的網頁，通過點擊命名錨點，自動跳轉到我們設置錨點的位置，類似于我們閱讀書籍時的目錄頁碼或章回提示。

錨點鏈接可以跳轉到頁面的任何位置。一般用于在頁面下面的時候，點擊回到最上面。錨點鏈接的名稱可以隨意取，只起到標記作用。

1.從A頁面的甲位置跳轉到本頁中的乙位置

示例：

    <a href="#a1">a1</a>
    <a href="#a2">a2</a>
    <a href="#a3">a3</a>
    <a href="#a4">a4</a>

    <div id="a1">a1</div>
    <div id="a2">a2</div>
    <div id="a3">a3</div>
    <div id="a4">a4</div>

2.從A頁面的甲位置跳轉到B頁面中的乙位置

示例：

<!--A頁面-->
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
<title>錨鏈接</title>
</head>
<body>
<p>
    [<a href="help.html#register">A位置</a>] 
    [<a href="help.html#login">B位置</a>]
</p>
</body>
</html>

<!--B頁面-->
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>錨鏈接</title>
    <style>
        div{
            width: 100%;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<h4><a name="register">A位置</a></h4>
<div>
    <h2>A位置</h2>
</div>
<h4><a name="login">B位置</a></h4>
<div>
    <h2>B位置</h2>
</div>
</body>
</html>

3>功能性鏈接

<!--下載圖片-->
<a href="img/qq.jpg">點擊下載圖片</a>

<!--發送郵件-->
<a href="mailto:Webmaster@ytzl.cn">聯系我們</a>

<!--引用腳本語言-->
<a href="javascript：alert('哈哈哈哈')"></a>

6、注釋和特殊符號

<!--注釋符號-->

當頁面的HTML結構復雜或內容較多時，需要添加必要的注釋方便代碼閱讀和維護。同時，有時為了調試，需要暫時注釋掉一些不必要的HTML代碼。特殊符號一般以"&"符號開頭，";"結尾。

3.1 練習

3.1.1 制作《悟空》歌詞

需求：

1、標題使用標題標簽，文字使用p標簽標題與正文之間的分隔線使用水平線標簽；歌詞詞結束后使用換行標簽換行

2、人名加粗顯示，時間斜體顯示

3、制作頁面版權部分

<html>
    <head>
             <title>我的第一個網頁</title>
    </head>
    <body>
             我的第一個網頁
    </body>
</html>

3.1.2 制作圖書簡介頁面

使用學過的圖像標簽、標題標簽、水平線標簽、斜體標簽、加粗標簽、段落標簽等制作京東讀書新聞資訊頁面，主標題使用一級標題標簽，副標題使用二級標題標簽，二級標題與圖片之間使用水平線分隔。

<h1>HTML5+CSS3從入門到精通（標準版）</h1>
<h2>作者：未來科技</h2>
<hr/>
<p><img src="images/book.jpg" alt="圖書" width="200"/></p>
<p><em>HTML 5 CSS 3 JavaScript從入門到精通（標準版）</em></p>
<p><em>  以基礎知識、示例、實戰案例相結合的方式詳盡講述了HTML  CSS  JavaScript及目前*的前端技術html5移動開發 html5實戰 html5 canvas html5 app html5入門 html5 動畫  html5揭秘 html 游戲 html5權威指南 的基本知識都有涉及。</em></p>
<p><strong>全書分兩大部分，共12章</strong></p>
<p>介紹了HTML5入門和CSS3實戰入門內容：使用HTML標簽標識網頁內容，使用CSS設計網頁基本樣式，如使用并美化文本、圖像、超鏈接、列表、表單和表格等</p>
<p>第二部分為CSS3布局部分，主要講解使用CSS3設計完整網頁的方法和技巧，以及CSS3中的各種新技術應用；</p>
<p>? 2015-2025 云圖智聯</p>

3.1.3 錨鏈接的應用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        a{
            display: block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            font-size: 18px;
        }
        div{
            width: 400px;
            height: 400px;
            margin-top: 20px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<a href="#a1">a1</a><a href="#a2">a2</a><a href="#a3">a3</a><a href="#a4">a4</a>
<div id="a1">a1</div>
<div id="a2">a2</div>
<div id="a3">a3</div>
<div id="a4">a4</div>
</body>
</html>

免費學習視頻歡迎關注云圖智聯：https://e.yuntuzhilian.com/

單

1 ：表單標簽

<form></form>
屬性：
action = '接口地址'
method = 'get / post'
name = '表單名稱'

2 ：表單控件

<input>
屬性：
type = '控件類型'
name：屬性標識表單域的名稱；
Value：屬性定義表單域的默認值，其他屬性根據type的不同而有所變化。
maxlength：控制最多輸入的字符數，
Size：控制框的寬度（以字符為單位）
1）文本框
<input type="text" value="默認值"/>
2)密碼框
<input type="password" />
3)提交按鈕
<input type="submit" value="按鈕內容" />
4)重置按鈕
<input type="reset" value="按鈕內容" />
5)空按鈕
<input type="button" value="按鈕內容" />

3：表單補充

1）單選按鈕組
<input type=“radio” name=“ral” />男
<input type=“radio” name=“ral”
checked=“checked”/>(默認選中)女
2）復選框組
<input type="checkbox" name="" />
<input type="checkbox" name="" disabled="disabled" />
* disabled="disabled" (禁用)
* checked="checked" (默認選中)
3）下拉列表（菜單）：
<select >
<option>下拉選項1</option>
<option>下拉選項2</option>
…………
</select>
表示下拉列表，name屬性不是必須的
默認選擇項用selected屬性；
4）表單域多行文本定義：
語法: <textarea name="" cols="" rows="" ></textarea>
多行文本。rows屬性和cols屬性用來設置文本輸入窗口的高度和寬度，單位是字符。
阻止瀏覽器對窗口的拖動設置:{resize:none;}（css屬性）
5)上傳文件：
語法：<input type="file">

4：表單標簽補充

1）表單字段集
語法：<fieldset></fieldset>

說明：相當于一個方框，在字段集中可以包含文本和其他元素。該元素用于對表單中的元素進行分組并在文檔中區別標出文本。fieldset元素可以嵌套，在其內部可以在設置多個fieldset對象。disabled定義空間禁制可用；
?
2）字段級標題：
語法：<legend align="left/center/right/justify"></legend>
說明：legend元素可以在fieldset對象繪制的方框內插入一個標題。legend元素必須是fieldset內的唯一個元素。
3)提示信息標簽：
語法：<label for="綁定控件id名"></label>
?
說明：label元素用來定義標簽，為頁面上的其他元素指定提示信息。要將label元素綁定到其他的控件上，可以將label元素的for屬性設置為與該控件的id屬性值相同。

拓展：post/get

(1). 從功能上講，GET一般用來從服務器上獲取資源，POST一般用來更新服務器上的資源；
(2). 從REST服務角度上說，GET是冪等的，即讀取同一個資源，總是得到相同的數據，而POST不是冪等的，因為每次請求對資源的改變并不是相同的；進一步地，GET不會改變服務器上的資源，而POST會對服務器資源進行改變；
(3). 從請求參數形式上看，GET請求的數據會附在URL之后，即將請求數據放置在HTTP報文的請求頭中，以?分割URL和傳輸數據，參數之間以&相連。特別地，如果數據是英文字母/數字，原樣發送；否則，會將其編碼為 application/x-www-form-urlencoded MIME 字符串(如果是空格，轉換為+，如果是中文/其他字符，則直接把字符串用BASE64加密，得出如：%E4%BD%A0%E5%A5%BD，其中％XX中的XX為該符號以16進制表示的ASCII)；而POST請求會把提交的數據則放置在是HTTP請求報文的請求體中。
(4). 就安全性而言，POST的安全性要比GET的安全性高，因為GET請求提交的數據將明文出現在URL上，而且POST請求參數則被包裝到請求體中，相對更安全。
(5). 從請求的大小看，GET請求的長度受限于瀏覽器或服務器對URL長度的限制，允許發送的數據量比較小，而POST請求則是沒有大小限制的。

轉自：知乎Eric

在線咨詢

上一篇：詳解網絡請求Axios
下一篇：關于Css的所有講解內容

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商