3.HTML主要標簽部分

1.HTML基本文檔格式—<!DOCTYPE> 標記

? <!DOCTYPE> 標記位于文檔的最前面，用于向瀏覽器說明當前文檔使用哪種HTML 或 XHTML 標準規(guī)范需忿。
  主要用于瀏覽器解析文檔標簽的依據(jù)聋溜。
? <!DOCTYPE>標記和瀏覽器的兼容性相關，刪除<!DOCTYPE>，就是把如何展示HTML頁面的權利交給
  瀏覽器扇苞。
? HTML5標準中层亿，DOCTYPE 省略版本

2.HTML基本文檔格式—<html> 標記

? <html>標記位于<!DOCTYPE> 標記之后，也稱為根標記拔莱，用于告知瀏覽器其自身是一個 HTML 文檔碗降，
  <html>標記標志著HTML文檔的開始，</html>標記標志著HTML文檔的結束塘秦，在他們之間的是文檔的
  頭部和主體內容讼渊。

 <html>
     所有的標簽必須寫在 兩個閉合標簽之間。
 </html>

? 可以通過lang屬性設置當前文檔的主要語言是什么尊剔，幫助搜索引擎解析文檔
? <html lang="zh-CN"></html>
? <html lang="en"></html>
  lang='en'/‘zh’ 標簽:告訴搜索引擎爬蟲爪幻，網(wǎng)站是關于什么內容的
  （SEO的一個技術，還有一些须误，meta標簽中的笔咽，content,name）

3.HTML基本文檔格式—<head> 標記

? <head>標記用于定義HTML文檔的頭部信息，也稱為頭部標記霹期，緊跟在<html>標記之后叶组。
? head標簽定義的內容只是提供給瀏覽器使用，不用于用戶的呈現(xiàn)历造。
? 主要用來封裝其他位于文檔頭部的標記甩十，例如<title>、<meta>吭产、<link>及<style>等侣监，用來描述文檔
  的標題、作者以及和其他文檔的關系等臣淤。
? 一個HTML文檔只能含有一對<head>標記橄霉，絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內容顯示在
  頁面中。

4.HTML基本文檔格式—<meta> 標記

? <meta charset="UTF-8">
? unicode:萬國碼
? utf-8 是目前最常用的字符集編碼方式邑蒋，所有語言字符集姓蜂，unicode升級版按厘。常用的字符集編碼方式
  還有gbk和gb2312。
? gb2312 簡單中文
? GBK 包含全部中文字符 繁體
? BIG5 繁體中文
? UTF-8 則包含全世界大部分國家需要用到的字符
? 從二進制說起钱慢，符號表示文字逮京，表示的模式就是編碼：聯(lián)想電報

5.HTML文檔頭部相關標記—<title>

<title>標記用于定義HTML頁面的標題，即給網(wǎng)頁取一個名字束莫，必須位于
<head>標記之內懒棉。一個HTML文檔只能含有一對<title></title>標記，
<title></title>之間的內容將顯示在瀏覽器窗口的標題欄中览绿。其基本語法格式如下：

     <title>網(wǎng)頁標題名稱</title>

title 標簽對于網(wǎng)站SEO至關重要策严，標題的好壞直接影響網(wǎng)站的SEO
SEO（Search Engine Optimization）：網(wǎng)站搜索引擎優(yōu)化

6.HTML基本文檔格式—<body> 標記

? <body>標記用于定義HTML文檔所要顯示的內容，也稱為主體標記饿敲。瀏覽器中顯示的所有文本享钞、圖像、
  音頻和視頻等信息都必須位于<body>標記內诀蓉，<body>標記中的信息才是最終展示給用戶看的栗竖。
? 一個HTML文檔只能含有一對<body>標記，且<body>標記必須在<html>標記內渠啤，位于<head>頭部標記
  之后狐肢，與<head>標記是并列關系。

7. Link標簽

– 屬于頭部標簽沥曹，需要放到head標簽中份名。
– 引入DNS預先解析
– dns預解析(了解)后續(xù)分頁或許會用到許多域名,提前解析這些域名,后續(xù)訪問的時候就快了,網(wǎng)站優(yōu)化的
   一個點。比如淘寶上的一坨
? <link rel="dns-prefetch" >
– 引入網(wǎng)站icon圖標：
? <link rel="shortcut icon"  />
– 引入css樣式妓美，【后面講】
– 放在head標簽中僵腺。
? <link rel="stylesheet" href="css/bg.css">

8. meta標簽補充

? 頁面關鍵詞
?  每個網(wǎng)頁應具有描述該網(wǎng)頁內容的一組唯一的關鍵字。使用人們可能會搜索壶栋，并準確描述網(wǎng)頁上所提供
   信息的描述性和代表性關鍵字及短語辰如。標記內容太短，則搜索引擎可能不會認為這些內容相關贵试。另外標
   記不應超過 874 個字符琉兜。
<meta name="keywords" content="SegmentFault,黑客馬拉松,IT技術社區(qū),編程社區(qū),技術問答,技術
文章,技術筆記,技術活動,程序員招聘,開發(fā)者,程序員,極客,編程,代碼,開源,hackathon"/>
? 頁面描述
? 每個網(wǎng)頁都應有一個不超過 150 個字符且能準確反映網(wǎng)頁內容的描述標簽。
<meta name="description" content="SegmentFault ( www.sf.gg ) 是中國領先的開發(fā)者技術社區(qū)
我們希望為編程愛好者提供一個純粹毙玻、高質的技術交流的平臺豌蟋， 與開發(fā)者一起學習、交流與成長桑滩，創(chuàng)造屬
于開發(fā)者的時代梧疲！"/>
? 搜索引擎索引方式，robotterms是一組使用逗號(,)分割的值，通常有如下幾種取值：none幌氮，noindex缭受，
  nofollow，all浩销，index和follow確保正確使用nofollow和noindex屬性值。
<meta name="robots" content="index,follow" />  
all：文件將被檢索听哭，且頁面上的鏈接可以被查詢慢洋；none：文件將不被檢索，且頁面上的鏈接不可以被查詢
    陆盘；index：文件將被檢索普筹；
follow：頁面上的鏈接可以被查詢；
noindex：文件將不被檢索隘马；
nofollow：頁面上的鏈接不可以被查詢太防。
1、頁面重定向和刷新：content內的數(shù)字代表時間（秒）酸员，既多少時間后刷新蜒车。如果加url,則會重定向到
  指定網(wǎng)頁（搜索引擎能夠自動檢測，也很容易被引擎視作誤導而受到懲罰）幔嗦。
  <meta http-equiv="refresh" content="1;url=" />
2酿愧、優(yōu)先使用edge和chrome瀏覽器
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->
3、禁用本地緩存
  <meta http-equiv="Pragma" content="no-cache">

9. a標簽

1.鏈接 
  – [超級鏈接內容](http://www.chuanke.com) – href屬性邀泉，指向跳轉的地址
  – target屬性：_blank _self
  href：用于指定鏈接目標的url地址嬉挡，當為標記應用href屬性時，它就具有了超鏈接的 功能汇恤。 
  target：用于指定鏈接頁面的打開方式庞钢，其取值有_self和_blank兩種，其中_self為默認值因谎， 
         _blank為在新窗口中打開方式基括。
2.錨點  
  – #頁面定位 
  通過創(chuàng)建錨點鏈接，用戶能夠快速定位到目標內容财岔。 創(chuàng)建錨點鏈接分為兩步： l 使用
  “[鏈接文本](”#id名“)”創(chuàng)建鏈接文本阱穗。 l 使用相應的id名標注跳轉目標的位置。
3.打電話<a href="tel:15942892352">給他打電話</a>場景多 
4.發(fā)郵件<a href="mailto:417916744.com"></a>
5.協(xié)議限定符<a href="javascript:while(1){alert('1');}">點我試試</a>(這里可以直接執(zhí)行js
  代碼)

10.表單

– 在HTML中使鹅，一個完整的表單通常由表單控件（也稱為表單元素）揪阶、提示信息和表單域3個部分構成，如
  下圖所示患朱，即為一個簡單的HTML表單界面及其構成鲁僚。

表單.png

 – 在HTML中，<form></form>標記被用于定義表單域，即創(chuàng)建一個表單冰沙，以實現(xiàn)用戶信息的收集和傳遞侨艾，
  <form> </form>中的所有內容都會被提交給服務器。創(chuàng)建表單的基本語法格式如下：
      <form action="url地址" method="提交方式" name="表單名稱">
          各種表單控件
      </form>
– 在上面的語法中拓挥，<form>與</form>之間的表單控件是由用戶自定義的唠梨，action、method和name為表單
  標記<form>的常用屬性侥啤。
Action：
  在表單收集到信息后当叭，需要將信息傳遞給服務器進行處理，action屬性用于指定接收并處理表單數(shù)據(jù)的
  服務器程序的url地址盖灸。
method
   method屬性用于設置表單數(shù)據(jù)的提交方式蚁鳖，其取值為get或post。
name
   name屬性用于指定表單的名稱赁炎，以區(qū)分同一個頁面中的多個表單醉箕。
注意:
    <form>標記的屬性并不會直接影響表單的顯示效果。要想讓一個表單有意義徙垫，就必須在<form>與
    </form>之間添加相應的表單控件讥裤。

11. input控件

– input控件的基本語法格式如下：
– 在上面的語法中，<input />標記為單標記姻报，type屬性為其最基本的屬性坞琴，其取值有多種，用于指定不
  同的控件類型逗抑。除了type屬性之外剧辐，<input />標記還可以定義很多其他的屬性，其常用屬性
  如下表所示邮府。

input控件.png

12. textarea控件

– 如果需要輸入大量的信息荧关，就需要用到<textarea></textarea>標記。通過textarea控件可以輕松地
  創(chuàng)建多行文本輸入框褂傀，其基本語法格式如下：
    <textarea cols="每行中的字符數(shù)" rows="顯示的行數(shù)">
            文本內容
    </textarea>

13.select控件

– 下圖為一個下拉菜單忍啤，當點擊下拉符號“ ”時，會出現(xiàn)一個選擇列表仙辟。在HTML中同波，要想制作如下圖所示的
  下拉菜單，就需要使用select控件叠国。

select.png

– 使用select控件定義下拉菜單的基本語法格式如下：
  <select>
    <option>選項1</option>
    <option>選項2</option>
    <option>選項3</option>
  </select>
– 在上面的語法中未檩，<select></select>標記用于在表單中添加一個下拉菜單，<option></option>用于
  定義下拉菜單中的具體選項粟焊，每對<select></select>中至少應包含一對<option></option>冤狡。
– 值得一提的是孙蒙，在HTML中，可以為<select>和<option>標記定義屬性悲雳，以改變下拉菜單的外觀顯示
  效果挎峦，具體如下表所示。

select常用屬性.png

14.組合表單

<fieldset> 將表單內容的一部分打包合瓢，生成一組相關表單的字段坦胶。
<legend> 標簽為 fieldset 元素定義標題。

15.字符編碼

查文檔

16.HTML語義化

? Web語義化是指使用語義恰當?shù)臉撕炃缧ǎ鬼撁嬗辛己玫慕Y構顿苇，頁面元素有含義，能夠讓人和搜索引擎都容
  易理解滥崩。
? 標簽與語義相結合岖圈，盡量不要使用沒有語義的標簽比如：div讹语、span钙皮，盡量使用p、ul顽决、ol短条、table
  等標簽。
? 充分利用標簽默認的含義
? 標題標簽的選擇
? h1-h6, th,td,ul,ol,dl,dd,dt,p,em,strong
? HTML5的標簽語義化更徹底（后面）
? 圖片和超級鏈接：title

17. HTML5新增標簽

1才菠、結構語義化標簽
2茸时、智能表單標簽
3、多媒體標簽

18.HTML5新增語義化的結構標簽

新增語義化的結構標簽.png

? Div標簽沒有真實的語義赋访，所以很難從結構標簽上區(qū)分可都，不利于搜索引擎優(yōu)化和特殊閱讀。
? 兼容問題處理：
? 新標簽只兼容IE9及以上瀏覽器蚓耽。
? Html5shiv.js 兼容IE8
  標簽 語義
<nav>              導航
<header>           頁眉
<footer>           頁腳
<section>          區(qū)塊
<article>          文章
<aside>           側邊欄

19. HTML5新增智能表單標簽

新增智能表單標簽.png

datalist     數(shù)據(jù)列表
<input type="text" autocomplete="on" name="demoAutoComplete" list="autoNames" />
  <datalist id="autoNames">
        <option value="飛龍?zhí)祗@" ></option>
        <option value="厚德IT" ></option>
        <option value="Flydragon" ></option>
  </datalist>
屬性                 用法                                           含義
placeholder     <input type="text" placeholder="請輸入用戶名">     占位符
autofocus       <input type="text" autofocus>                     自動獲得焦點
multiple        <input type="file" multiple>                      多文件上傳
autocomplete    <input type="text" autocomplete="off">            自動完成
form            <input type="text" form="某表單ID">
novalidate      <form novalidate></form>                          關閉驗證
required        <input type="text" required>                      必填項
pattern         <input type="text" pattern="\d">                  自定義驗證

20. HTML5新增多媒體標簽

? HTML5通過<audio>標簽來解決音頻播放的問題
? 并且可以通過附加屬性可以更友好控制音頻的播放
? autoplay 自動播放
? controls 是否顯不默認播放控件
? loop 循環(huán)播放

3種音頻格式.png

? HTML5通過<video>標簽來解決音頻播放的問題
? 通過附加屬性可以更友好的控制視頻的播放
? autoplay 自動播放
? controls 是否顯示默認播放控件
? loop 循環(huán)播放
? width 設置播放窗口寬度
? height 設置播放窗口的高度

3種視頻格式.png

視頻轉碼方式:可以用QQ影音工具軟件轉碼,例如:
              兼容格式mp4渠牲，參數(shù)設置編碼方式H264，音頻編碼AAC,轉換完之后就可以用了

21. 通用屬性

? Id：唯一標識元素步悠，在一個頁面中不能重復签杈。
? name：可以用于定義一組標簽，可以重復鼎兽。
? style：定義標簽的樣式答姥。
? class：定義標簽的樣式類
? id、class都是css選擇器和js的dom開發(fā)必備的基礎谚咬。
? Img標簽和a標簽一般都會設置title屬性鹦付。
? 標簽的類型(顯示模式) :
  行內元素 行內元素不占有獨立的區(qū)域，僅僅靠自身的字體大小和圖像尺寸來支撐 結構择卦，一般不可以
  設置寬度睁壁、高度背苦、對齊等屬性，常用于控制頁面中 文本的樣式潘明。 常見的行內元素有**行剂、**、*钳降、*厚宰、~~、
  ~~遂填、<ins>铲觉、 <u>、吓坚、等撵幽，其中標記最典型的行內元素。</u></ins>~~~~******
? 標簽的類型(顯示模式) :
  – HTML標記一般分為塊標記和行內標記兩種類型礁击，它們也稱塊元素和行內元素盐杂。具體如下：
   塊元素:每個塊元素通常都會獨自占據(jù)一整行或多整行，可以對其設置寬度哆窿、高度链烈、對齊等屬性，常用
   于網(wǎng)頁布局和網(wǎng)頁結構的搭建挚躯。常見的塊元素有<h1>~<h6>强衡、<p>、<div>码荔、<ul>漩勤、<ol>、<li>等缩搅，
   其中<div>標記是最典型的塊元素越败。