前端分享----html

三駕馬車

HTML 從語義的角度描述頁面的結(jié)構(gòu)（骨架）
CSS 從審美的角度美化頁面（衣服）
JavaScript 從行為和交互的角度提升用戶體驗（動作）

一.什么是html

介紹：Hypertext Markup Language（超文本標記語言）士聪。超文本就是指頁面內(nèi)可以包含圖片、鏈接震庭，甚至音樂就谜、程序等非文字元素崭闲。
HTML不是編程語言，不同于C語言、java或C#等編程語言肤无，而是一種標記語言(markup language)，標記語言是由一套標記標簽（markup tag）如<html></html>骇钦、<head></head>宛渐、<title></title>、<body></body>等組成眯搭。HTML就使用這些標記標簽來描述網(wǎng)頁窥翩。
html文件就是后綴名為html的文本, 可以在專業(yè)編輯器編輯，也可以在文本文檔(如word)編輯后修改后綴名鳞仙，如index.html寇蚊。

注1：文檔
W3CSchool ：http://www.w3school.com.cn/
菜鳥教程：https://www.runoob.com/html/html-tutorial.html

注2：萬維網(wǎng)/w3c
萬維網(wǎng)：通過超鏈接把眾多超文本(html)連接起來可以相互訪問的網(wǎng)絡(luò)。
W3C：萬維網(wǎng)聯(lián)盟棍好，又稱W3C理事會幔荒。最重要的工作是發(fā)展 Web 規(guī)范，1994年10月由萬維網(wǎng)的發(fā)明者建立梳玫。
https://baike.baidu.com/item/www/109924?fr=aladdin
結(jié)構(gòu)（h5）

<!DOCTYPE html>             文檔聲明標記
 <html>                     文檔的開頭和結(jié)尾
       <head>                   放一些輔助顯示的標簽
          <title></title>           網(wǎng)頁標題
       </head>          
        <body></body>           放我們能看見的標簽
</html>

二.html發(fā)展

簡述：
語言作為網(wǎng)絡(luò)語言標準規(guī)范爹梁，在計算機的發(fā)展史中有著不可或缺的地位。在HTML上的成就也決定著一個時代的發(fā)展提澎。
發(fā)展史：
- HTML1.0：實際上應該沒有HTML1,所謂的HTML1是1993年IETF(互聯(lián)網(wǎng)工作任務組)團隊的一個工作草案姚垃，并不是成型的標準。
- HTML2.0：1995年11月作為RFC1866發(fā)布盼忌，于2000年6月RFC2854發(fā)布之后宣布過時积糯。
  http://www.rfc-editor.org/rfc/rfc1866.txt.
- HTML3.2：1996年W3C撰寫新規(guī)范，并于1997年1月推出HTML3.2谦纱。
- HML4.0與HTML4.0.1：
  在1997年和1999年看成，作為升級版本的4.0和4.01也相繼成為W3C的推薦標準。
  在2000年基于HTML4.01的ISO HTML成為了國際標準化組織和國際電工委員會的標準跨嘉。于是被沿用至今川慌，這期間雖然有點小的改動但大方向上終歸沒有什么變化。
  從1993-2000之間短短的7年時間祠乃，HTML語言有著很大的發(fā)展梦重，基于諸多人的努力，終于產(chǎn)生了我們現(xiàn)在用的HTML語言亮瓷。
- XHTML1.0：
  2000年1月26日發(fā)布琴拧，是W3C的推薦標準，后于2002年8月1日重新發(fā)布嘱支。
  XHTML 指可擴展超文本標簽語言蚓胸。
  XHTML 是 HTML 與 XML（擴展標記語言）的結(jié)合物挣饥。
  XHTML 包含了所有與 XML 語法結(jié)合的 HTML 4.01 元素。
  XHTML1.1：2001年5月31日發(fā)布沛膳。XHTML1.0是XML風格的HTML4.01扔枫。XHTML1.1主要是初步進行了模塊化。
- XHTML2.0：XHTML 2是一種通用的標記語言于置。但不及HTML5的沖擊茧吊。XHTML 2的開發(fā)工作將于2009年底停止，而資源將用于推動HTML 5的進展八毯。
- HTML5：
  HTML5 是對 HTML 標準的第五次修訂搓侄，其主要的目標是將互聯(lián)網(wǎng)語義化，以便更好地被人類和機器閱讀话速，并同時提供更好地支持各種媒體的嵌入讶踪。
  而HTML5本身并非技術(shù)，而是標準泊交。它所使用的技術(shù)早已很成熟乳讥，國內(nèi)通常所說的html5實際上是html與css3及JavaScript和api等的一個組合，大概可以用以下公式說明：HTML5≈HTML+CSS3+JavaScript+API廓俭。
  注1：html5
  html5兼容html4云石，在h4的基礎(chǔ)上多出了新的標簽和規(guī)范。
  各大主流瀏覽器對 CSS3 和 HTML5 的支持越來越完善研乒，但是面對的用戶群體復雜汹忠，需要兼容的瀏覽器版本也比較多，所以h5的一些新標簽和規(guī)范沒有大范圍使用雹熬。
  w3c: http://www.w3school.com.cn/html5/html_5_intro.asp
  新特性：https://www.cnblogs.com/greatluoluo/p/5714221.html
  h5的兼容：https://www.cnblogs.com/liuna/p/5505016.html
  https://www.cnblogs.com/zhangyongl/p/6154981.html

三.h5新標簽和標簽的語義化

語義化標簽
nav 表示導航
header 表示頁眉
footer 表示頁腳
main 文檔主要內(nèi)容
article 文章
aside 主題內(nèi)容之外
footer 文檔或者頁的頁腳

h4.0.1

<body>
<!--頭部start-->
<div class="header">
    <!--導航start-->
    <ul class="nav">
        <li><a href="#">導航1</a></li>
        <li><a href="#">導航2</a></li>
        <li><a href="#">導航3</a></li>
    </ul>
    <!--導航end-->
</div>
<!--頭部end-->

<!--主體start-->
<div class="main">
    <!--文章start-->
    <div class="article"></div>
    <!--文章end-->

    <!--側(cè)邊欄start-->
    <div class="aside"></div>
    <!--側(cè)邊欄end-->

</div>
<!--主體end-->

<!--底部start-->
<div class="footer"></div>
<!--底部end-->
</body>

<body>
<!--頭部start-->
<header>
    <!--導航start-->
    <nav>
        <a href="#">導航1</a>
        <a href="#">導航2</a>
        <a href="#">導航3</a>
    </nav>
    <!--導航end-->
</header>
<!--頭部end-->

<!--主體start-->
<main>
    <!--文章start-->
    <article></article>
    <!--文章end-->

    <!--側(cè)邊欄start-->
    <aside></aside>
    <!--側(cè)邊欄end-->

</main>
<!--主體end-->

<!--底部start-->
<footer></footer>
<!--底部end-->
</body>

新標簽：http://www.runoob.com/html/html5-new-element.html
audio：
http://www.runoob.com/tags/tag-audio.html
<audio> 標簽定義聲音宽菜，比如音樂或其他音頻流
video：
http://www.runoob.com/tags/tag-video.html
<video> 標簽定義視頻，比如電影片段或其他視頻流竿报。
canvas：
http://www.runoob.com/html/html5-canvas.html
示例：https://cybermap.kaspersky.com/cn/
<canvas> 元素用于圖形的繪制铅乡，通過腳本 (通常是JavaScript)來完成.
<canvas> 標簽只是圖形容器，您必須使用腳本來繪制圖形烈菌。

四.不同版本IE瀏覽器的兼容性寫法

https://www.cnblogs.com/qiujianmei/p/7192481.html

<!--[if IE]>用于 IE <![endif]-->
<!--[if IE 6]>用于 IE6 <![endif]-->
<!--[if IE 7]>用于 IE7 <![endif]-->
<!--[if IE 8]>用于 IE8 <![endif]-->
<!--[if IE 9]>用于 IE9 <![endif]-->
<!--[if gt IE 6]> 用于 IE6 以上版本<![endif]-->
<!--[if lte IE 7]> 用于 IE7或更低版本 <![endif]-->
<!--[if gte IE 8]>用于 IE8 或更高版本 <![endif]-->
<!--[if lt IE 9]>用于 IE9 以下版本<![endif]-->
<!--[if !IE 8]> -->用于非 IE <!-- <![endif]-->

五.html文檔類型聲明阵幸！

描述
它是指示 web 瀏覽器關(guān)于頁面使用哪個 HTML 版本進行編寫的指令。這樣瀏覽器才能獲知文檔類型僧界。
http://www.w3school.com.cn/tags/tag_doctype.asp
HTML5
<!DOCTYPE html>
HTML4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

六.頭部標簽含義

哪些頭部標簽侨嘀？
meta / title / link / script
meta
1. 設(shè)置頁面的編碼格式
<meta charset=”編碼格式” />
注：通常設(shè)為UTF-8（8-bit Unicode Transformation Format）是一種針對Unicode的可變長度字符編碼，又稱萬國碼捂襟。
2. 設(shè)置頁面的關(guān)鍵詞
<meta name=”keywords” content=”” >
做搜索引擎優(yōu)化
3. 設(shè)置頁面的描述
<meta name=”description” content=”” >
做搜索引擎優(yōu)化
4. 刷新頁面/重定向
<meta http-equiv="Refresh" content="5;url=重定向頁面路徑" />
eq:http://www.w3school.com.cn/tiy/t.asp?f=html_redirect
title
頁面標題
link
<link> 標簽定義文檔與外部資源的關(guān)系。
<link> 標簽最常見的用途是鏈接樣式表（引入css）欢峰。

<link rel="shortcut icon" > //頁面的圖標
<link  rel="stylesheet">

script
插入js文件(兩種方式)

<script src="http://static2.51fanli.net/common/libs/jquery/jquery.min.js"></script>
<script>
      //寫js代碼
</script>

七.常用標簽

大致分為：行內(nèi)標簽和塊標簽
塊標簽獨占一行葬荷，寬度默認和父元素一致涨共，可以直接設(shè)置高度和寬度。
行內(nèi)標簽根據(jù)標簽包含內(nèi)容的寬高決定自己的寬高宠漩，無法設(shè)寬高举反。
塊標簽代表：div
行內(nèi)標簽代表: a

八.cookies和localStorage和sessionStorage的區(qū)別

https://www.cnblogs.com/jacobb/p/6824838.html

對比
1. cookie數(shù)據(jù)始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和服務器間來回傳遞扒吁；
  而sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)送給服務器火鼻，僅在本地保存。cookie數(shù)據(jù)還有路徑（path）的概念雕崩，可以限制cookie只屬于某個路徑下
2. 存儲大小限制也不同
  cookie數(shù)據(jù)不能超過4K魁索，同時因為每次http請求都會攜帶cookie、所以cookie只適合保存很小的數(shù)據(jù)盼铁；
  sessionStorage和localStorage雖然也有存儲大小的限制粗蔚，但比cookie大得多，可以達到5M或更大饶火。
3. 數(shù)據(jù)有效期不同
  sessionStorage：僅在當前瀏覽器窗口關(guān)閉之前有效鹏控；
  localStorage：始終有效，窗口或瀏覽器關(guān)閉也一直保存肤寝，因此用作持久數(shù)據(jù)当辐；
  cookie：只在設(shè)置的cookie過期時間之前有效，即使窗口關(guān)閉或瀏覽器關(guān)閉鲤看。
操作
cookie:
document.cookie="name=jiang"http://設(shè)置cookie
var name = document.cookie//取cookie
sessionStorage：
sessionStorage.setItem('name','jiang');//設(shè)置sessionStorage
sessionStorage.getItem('testKey');//取值
sessionStorage.removeItem("name")//刪除
localStorage：
localStorage.setItem("name","jiang")//設(shè)置
localStorage.getItem("name")//取值
localStorage.removeItem("name")//刪除

九.生成html結(jié)構(gòu)代碼快捷鍵

不同編輯器效果不同

缘揪！+ tab
*html: + tab / html:5 + tab!

下一節(jié)：css

http://www.reibang.com/p/97d18ec42a32