開頭的話：自我反思断国，發(fā)現(xiàn)當(dāng)初學(xué)前端時覺得它超級簡單贤姆，所以粗心大意，基礎(chǔ)薄弱稳衬，現(xiàn)馬上就要秋招了霞捡，重新鞏固前端內(nèi)容，祝自己秋招順利薄疚。

前端工程師：做軟件的碧信。
無論前端，還是后端输涕，或是Android開發(fā)，ios開發(fā)慨畸，都是做軟件的莱坎。那先了解一下軟件的系統(tǒng)架構(gòu)唄！

我們主要是做B/S里面的網(wǎng)頁部分

我們主要學(xué)什么寸士？

遠(yuǎn)沒有這么簡單

什么是結(jié)構(gòu)骡澈，表現(xiàn)眨业，行為

html用于描述頁面的結(jié)構(gòu)
css用于控制頁面中元素的樣式
JavaScript用于響應(yīng)用戶操作

W3C 萬維網(wǎng)聯(lián)盟（World Wid Web Consortium）

W3C專門為了定義網(wǎng)頁相關(guān)的標(biāo)準(zhǔn)而成立鄙陡。
W3C定義了網(wǎng)頁中的HTML，CSS住册，DOM，HTTP瓮具，XML等標(biāo)準(zhǔn)

WHATWG（網(wǎng)絡(luò)超文本應(yīng)用技術(shù)工作小組）

是一個以推動網(wǎng)絡(luò)HTML5標(biāo)準(zhǔn)為目的而成立的組織荧飞。在2004年，由Opera名党，Mozilla基金會和蘋果這些瀏覽廠商組成叹阔。

HTML&CSS，那些被我遺忘或者忽略的知識點（怪自己以前不寫博客）

學(xué)習(xí)文檔传睹，里面非常詳細(xì)

寫一個網(wǎng)頁的代碼結(jié)構(gòu)：

<!DOCTYPE html>
<html lang="em">
  <head>
    <meta charset="utf-8">
    <title>網(wǎng)頁的代碼結(jié)構(gòu)</title>
    <style type="text/css">
      #box1{
        background: blue;
        width:300px;
        height: 350px;
      }
      .cla1{ 
        width: 200px; 
        height: 100px;  
        background: yellow;
      }
    </style>
  </head>
  <body>
    <div class="cla1">
      <p class="cla1" id="box1" style="width: 500px;background: pink">我是p1</p>
    </div>
    <p class="cla1">我是p2</p>
  </body>
</html>
<!-- 注釋 -->

我們一層一層耳幢，從外到內(nèi)，從上到下剖析這個結(jié)構(gòu)
<!DOCTYPE html>：html5的文檔聲明
幫助瀏覽器識別文檔版本欧啤。編寫網(wǎng)頁時一定要在最前頭寫檔聲明睛藻，如果不寫的話會導(dǎo)致有些瀏覽器進入怪異模式，無法正常顯示頁面邢隧。
<html></html>：網(wǎng)頁的根標(biāo)簽店印，是雙標(biāo)簽，非自結(jié)束標(biāo)簽府框。
<head></head>：頭部吱窝。這個標(biāo)簽里面的內(nèi)容不會顯示在網(wǎng)頁的內(nèi)容上。它告訴瀏覽器相關(guān)信息迫靖，瀏覽器根據(jù)這些信息確定如何解析這個網(wǎng)頁
<body></body>：身體院峡。我們要編寫的網(wǎng)內(nèi)內(nèi)容就寫在這個標(biāo)簽里面。
<meta charset="utf-8">：設(shè)置網(wǎng)頁的字符集系宜，防止出現(xiàn)亂碼
<title></title>：默認(rèn)顯示在網(wǎng)頁的標(biāo)題欄照激，搜索引擎在檢索頁面時，會首先檢索title標(biāo)簽的內(nèi)容盹牧。它是網(wǎng)頁中對于搜索引擎來說最重要的內(nèi)容俩垃，會影響到網(wǎng)頁在搜索引擎中的排名。
<style></style>：里面寫樣式汰寓。通過選擇器選擇相應(yīng)的標(biāo)簽口柳，再設(shè)置樣式
``:當(dāng)我們的內(nèi)容，是給開發(fā)者看的有滑，不需要讓用戶看到跃闹，就可以用注釋

亂碼問題

亂碼出現(xiàn)的原因：計算機是一個非常笨的東西，它的底層只認(rèn)識0和1這兩個東西。在計算機里保存的任何內(nèi)容最終都需要轉(zhuǎn)換為0和1的二進制編碼來保存(包括我們的網(wǎng)頁)望艺。在讀取的時候苛秕，需要將二進制編碼轉(zhuǎn)換為正確的內(nèi)容。我們可以把這個過程分為兩步：

編碼：依據(jù)一定的規(guī)則找默，將我們的字符轉(zhuǎn)換為二進制字符艇劫。
解碼：依據(jù)一定的規(guī)則，將二進制編碼轉(zhuǎn)換為字符的過程惩激。
編碼和解碼所采用的規(guī)則叫做字符集店煞。

當(dāng)我們編碼和解碼時的字符集不一樣的時候，就會出現(xiàn)亂碼問題（產(chǎn)生亂碼的根本原因）咧欣。
在中文系統(tǒng)的瀏覽器中浅缸，默認(rèn)都是使用GB2312進行解碼的。

常見的字符集：

ASCII魄咕，ISO-8859-1衩椒，GBK，GB2312哮兰，UTF-8

為什么會有這么多的字符集毛萌，為什么不統(tǒng)一用一個呢？
我們最早的字符集是ASCII喝滞，是美國人發(fā)明的阁将，它使用7位來保存一個字，一共能保存128個字（英文字母大小寫右遭，阿拉伯?dāng)?shù)字做盅，各種標(biāo)點符號都算上，正合適）窘哈。
后來吹榴，計算機傳到了歐洲，歐洲在原有的基礎(chǔ)上進行了擴充——ISO-8859-1滚婉，用8位保存一個字图筹，可以保存256個字。
再后來让腹，計算機傳到了阿拉伯國家远剩，亞洲等地，由于各國使用的語言不同骇窍，字符集都會被擴充瓜晤。

中國的字符集：
GBK：國標(biāo)
GB2312：國標(biāo)，是中文系統(tǒng)的默認(rèn)編碼

但是腹纳，這樣并不好痢掠，我們希望有一個編碼能將所有字符統(tǒng)一起來哈恰。于是出現(xiàn)了UTF-8

UTF-8：萬國碼，支持地球上所有的文字志群。

我使用的軟件開發(fā)工具默認(rèn)編碼字符集為utf-8，瀏覽器默認(rèn)使用GB2312解碼——產(chǎn)生亂碼蛔钙。
解決辦法有：

告訴瀏覽器網(wǎng)頁所采用的編碼字符集

  <meta charset="UTF-8">

指定開發(fā)工具的編碼格式為GB2312

HTML

超文本標(biāo)記語言(Hyper Text Markup Language)锌云，HTML 不是一種編程語言，而是一種標(biāo)記語言 (markup language)吁脱。
“文本”就是我們用記事本等純文本編輯器（記事本桑涎，Sublime）中寫的內(nèi)容，網(wǎng)頁就是用純文本編寫的兼贡。純文本里不能插入圖片攻冷，視頻，不能更改字體的大斜橄！（注意我們記事本通過格式讓字體變大只是讓字體顯示得大了等曼，沒有改變字本身大小）凿蒜。即是格式化的內(nèi)容都不能設(shè)置禁谦。
“超文本”指超鏈接。
“標(biāo)記”：HTML用標(biāo)簽的形式來標(biāo)識網(wǎng)頁中不同組成部分废封。

CSS

層疊樣式表（Cascading Style Sheets）：css可以用來為網(wǎng)頁創(chuàng)建樣式表州泊，通過樣式表可以對網(wǎng)頁進行修飾。所謂層疊漂洋，可以將整個網(wǎng)頁想象是一層一層的結(jié)構(gòu)遥皂，層次高的將會覆蓋層次低的。而css就可以分別為網(wǎng)頁各個層次設(shè)置樣式刽漂。

css的語法：

選擇器聲明塊;

p {
    color:red;
}

選擇器：通過選擇器可以選中頁面中指定的元素演训，并且可以將我們的聲明塊中的樣式應(yīng)用到選擇器對應(yīng)的元素上。
聲明塊：緊跟在選擇器的后邊爽冕，使用一對大括號括起來仇祭，聲明塊中是一組一組的名值對結(jié)構(gòu)。（屬性名：屬性值）颈畸。這一組一組的名值對我們成為聲明乌奇。在一個聲明塊中，可以寫多個聲明眯娱，多個聲明之間使用礁苗；隔開。

要學(xué)的是有哪些樣式和選擇器

css的引用方式：

1·行間樣式的引入
寫法：在開始標(biāo)簽中徙缴，寫一個style的屬性比如: style="......" 在""中間寫css的樣式试伙。
優(yōu)先級最高嘁信，但不利于代碼的維護與重用。
2·內(nèi)部樣式表的引入
寫法：在<head>標(biāo)簽里疏叨，寫一個style的標(biāo)簽潘靖，在標(biāo)簽中，通過選擇器(div{...css的樣式})來控制樣式
它的加載速度快蚤蔓，不需要請求服務(wù)器卦溢，但不利于代碼的重用。
- 2-1. id選擇器
  寫法：首先在相應(yīng)標(biāo)簽中設(shè)置一個ID的屬性秀又。如： id="" (""里面是自己設(shè)置的ID名)
  在樣式表中单寂，通過 “#id名{...css的樣式} ”
  id名以英文字母開頭，名字唯一
- 2-2.class選擇器
  寫法：首先在相應(yīng)標(biāo)簽中設(shè)置一個class的屬性吐辙。如： class="" (""里面是自己設(shè)置的class名)
  在樣式表中宣决，通過“.class名{...css的樣式}”
  class名以英文字母開頭，可以重復(fù)昏苏。
- 2-3.標(biāo)簽名選擇器
  寫法：標(biāo)簽名{……}
  作用：通過元素選擇器可以選擇頁面中的所有指定元素
3.外部樣式表的引入
寫法：在head標(biāo)簽里尊沸，寫一個link標(biāo)簽，用來關(guān)聯(lián)一個css的文件贤惯，在css文件中椒丧，通過選擇器（div{...css的樣式}）來控制樣式。
利于代碼的重用救巷，但需要加載服務(wù)器壶熏。

<link rel="stylesheet" type="text/css" href="css文件的路徑">

優(yōu)先級：標(biāo)簽名選擇器 < class 選擇器 < id選擇器 < 行間樣式

選擇器

標(biāo)簽名選擇器：div{……}
class 選擇器：.wrap{……}
id選擇器：#wrap{……}
通配選擇器*{……}選擇所有的元素
div.class1{... } 選擇所有class屬性為class1的div標(biāo)簽
復(fù)合選擇器（交集選擇器），選中同時滿足多個選擇器的元素浦译。針對類選擇器的用法棒假，對于id選擇器則是多此一舉
div, p{... } 設(shè)置所有div和p的樣式。
選擇器分組（并集選擇器）精盅，通過選擇器分組可以同時選中多個選擇器對應(yīng)的元素
+ ??相鄰兄弟選擇器：div + p
作用范圍：可以選擇相鄰的兩個元素帽哑，元素一定要有同一個父級， + 后面的元素享受樣式
div+p{...} 設(shè)置所有div之后的段落標(biāo)簽的樣式
后代選擇器div span{... } 叹俏，設(shè)置所有div內(nèi)部的span標(biāo)簽的樣式妻枕，包括div里的p里的span ;原因:p里的span是后代

div > span{
      border: 1px solid red;
      background:yellow;
}
.......
<div>
    <p>
      <span>我是p里的span</span>
    </p>
    <span>我是div里span</span>
    <span>我是div里span</span>
  </div>

> ??子選擇器：div > span
作用范圍： div下的span會享受樣式 ,div里的p里的span不享受 ;原因:p里的span是孫子

div > span{
      border: 1px solid red;
      background:yellow;
}
.......
<div>
    <p>
      <span>我是p里的span</span>
    </p>
    <span>我是div里span</span>
    <span>我是div里span</span>
  </div>

~ ??同級元素通用選擇器:p ~ span
作用范圍：所有相同父級中，位于 p 標(biāo)簽之后的同級的 span 標(biāo)簽享受樣式

屬性選擇器 (非常好用)：標(biāo)簽名[屬性名]={......}
- 1. 選擇帶有某種屬性的所有元素：a[屬性名]={.....}
    a[href]{……}：設(shè)置帶有href的a標(biāo)簽
- 1. 選擇帶有某種屬性粘驰，并且規(guī)定屬性值的元素： input[屬性名=“屬性值”]{......}屡谐，

input[屬性名^="屬性值"]：選取以指定內(nèi)容開頭的元素
input[屬性名$="屬性值"]：以指定內(nèi)容結(jié)尾
input[屬性名*="屬性值"]：包含了指定內(nèi)容

input[type="password"]{
        border: 1px solid red;
        background:yellow;
}

匹配class屬性以my開頭的Input標(biāo)簽

input[class^="my"]{
        border: 1px solid red;
        background:yellow;
}

偽類選擇器
偽類可以理解為一個狀態(tài)：標(biāo)簽名：A{...}
偽類：就是一些元素身上的特殊狀態(tài) 。如：點擊 / 停留 / 獲取焦點的文本框
- input:focus{...} 當(dāng)控制得到焦點時設(shè)置....
- p::selection{……} 文字內(nèi)容選中的狀態(tài)蝌数。這個偽類在火狐中需要兼容——p::-moz-selection{……}
- a:link {color:red;} 鏈接時是什么格式
- a:visited{color:yellow;}訪問后是什么格式
  由于涉及到了用戶的隱私問題愕掏，visited偽類只能設(shè)置顏色。
- a:hover{color:blue;} 鼠標(biāo)移到那兒之后是什么格式
- a:active{color:black;} 點擊的一剎那是什么格式
  根據(jù)相關(guān)鏈接操作設(shè)置超鏈接樣式（四種狀態(tài) 順序不可以改）
子元素的偽類
- p:nth-child(n){...}或p:nth-child(2n){background:red;}
  選擇屬于父級下的第1~n個元素顶伞，從第一個元素開始計數(shù)饵撑，遇到p標(biāo)簽則生效
  n可以用來計算
- p:first-child{...}
  選擇屬于父級下的第1個元素剑梳，并且必須是p標(biāo)簽否則不生效
- p:last-child{...}
  選擇屬于父級下的第后1個元素，并且必須是p標(biāo)簽否則不生效
- p:nth-of-type(n){...}或p:nth-of-type(2n-1){background:yellow;}
  選擇屬于父級下p標(biāo)簽的第1~n個元素滑潘，從第一個P標(biāo)簽元素開始計數(shù)并生效
  n可以用來計算
- p:first-of-type{...}
  選擇屬于父級下的第1個p標(biāo)簽
- p:last-of-type{...}
  選擇屬于父級下的第后1個p標(biāo)簽
偽元素
- 首字母：:first-letter
- 首行：:first-line
- ：before指定元素前 p:before
  在p開始標(biāo)簽之后和內(nèi)容之前垢乙，默認(rèn)這里什么也沒有。一般before都要結(jié)合content這個樣式一起使用语卤，通過content可以向before或after的位置添加一些內(nèi)容

    p:before{
      content: "我會出現(xiàn)在整個段落的最前邊";
    }
......
      <p>
        這是一個p標(biāo)簽
      </p>

p里的內(nèi)容可以選中侨赡，但是通過before添加進來的文字不能被鼠標(biāo)選中

：after 在元素內(nèi)容之后和結(jié)束標(biāo)簽之前插入一些內(nèi)容
如 div:after{
content:"我是偽類";background:red;
}
否定偽類
- p:not(.hello){……}表示選擇除了class為hello的所有p標(biāo)簽。

區(qū)別 ~ 和 + ： ~ (同級元素)的作用范圍比 + （相鄰元素）廣
區(qū)別空格和 > ：空格 (后代元素)的作用范圍比 > （子代元素）廣

選擇器越短越好粱侣，因為涉及到性能問題

標(biāo)簽

所有的html標(biāo)簽都是語義化標(biāo)簽，使用html標(biāo)簽時要關(guān)心標(biāo)簽的語義
語義：你說的話是什么意思蓖宦。由標(biāo)簽表示
權(quán)重：搜索引擎優(yōu)先搜索的關(guān)鍵詞優(yōu)先先考慮誰

標(biāo)簽屬性：

寫在開始標(biāo)簽中齐婴，是一個名值對的結(jié)構(gòu)。屬性名="屬性值"稠茂。注意有些屬性是所有標(biāo)簽都有柠偶，有些屬性是某些標(biāo)簽特有的。

共有的屬性

id
class
style
title：當(dāng)鼠標(biāo)移入元素時睬关，title中的屬性值將作為提示內(nèi)容顯示

標(biāo)簽的類型：

塊標(biāo)簽block 诱担，如div,p,h標(biāo)簽……
特性：
1 默認(rèn)是父級100%的寬
2 支持所有的css樣式
3 無論多寬或多窄，獨占1行 (內(nèi)容不占整行电爹，但那些地方也不能放其他的內(nèi)容了蔫仙。)
內(nèi)聯(lián)元素（行內(nèi)元素）inline，如span丐箩，a摇邦，iframe
特性：
1 同屬性的標(biāo)簽排在同一行
2 內(nèi)容決定寬度
3 不支持寬高的設(shè)置 padding-top / padding-bottom / margin-top /
margin-bottom
4 代碼換行被解析間距的大小取決于父級的font-size的大小。
內(nèi)聯(lián)塊塊標(biāo)簽inline-block
屬性
1 同屬性的標(biāo)簽排在同一行
2 內(nèi)容決定寬度
3 支持所有的css的樣式
4 代碼換行被解析屎勘，間距大小取決于父級的font-size的大小

塊元素主要用于布局施籍，行內(nèi)元素主要用于文本設(shè)置；一般用塊元素嵌套行內(nèi)元素概漱。
a元素內(nèi)可以嵌套任何元素（塊丑慎，內(nèi)聯(lián)，內(nèi)聯(lián)塊）瓤摧，但是竿裂，不可以嵌套本身。
p元素（塊元素）內(nèi)不可以嵌套任何塊元素照弥，如div铛绰，p

常見標(biāo)簽講解

meta標(biāo)簽

1.設(shè)置網(wǎng)頁的一些元數(shù)據(jù)，比如網(wǎng)頁的字符集产喉、關(guān)鍵字捂掰、描述等等敢会。
關(guān)鍵詞是一個一個的詞語，而網(wǎng)頁描述則是一句話这嚣。
搜索引擎在檢索頁面時鸥昏，會同時檢索頁面中的關(guān)鍵字和描述，但是姐帚，這兩個值不會影響頁面在搜索引擎中的排名吏垮。
2.請求的重定向

  <meta charset="UTF-8">
  <meta name="keywords" content="HTML5,博客，前端">
  <meta name="description" content="發(fā)布h5罐旗、js等前端相關(guān)的信息">
  <meta http-equiv="refresh" content="5;url=http://www.baidu.com">
  <meta http-equiv="refresh" content="秒數(shù);url=目標(biāo)路徑">

title標(biāo)簽

雙標(biāo)簽
語義：網(wǎng)頁標(biāo)簽膳汪。
權(quán)重最大

div標(biāo)簽

雙標(biāo)簽
語義：無意義。
默認(rèn)樣式：無九秀。
主要用來對我們的頁面進行布局

標(biāo)題標(biāo)簽h1~h6

雙標(biāo)簽
語義：標(biāo)題
默認(rèn)樣式：font-size font-weight margin

去除默認(rèn)樣式

樣式初始化文件
reset.css 和 <link rel="stylesheet" type="text/css" href="../css/reset.css">
群組選擇器遗嗽，例
h1,h2,h3,h4,h5,h6{margin:0px；}

權(quán)重：h1 > h2 > h3 ......

<h1></h1>標(biāo)簽：標(biāo)識里面的內(nèi)容是網(wǎng)頁的一級標(biāo)題鼓蜒，對于搜索引擎來說痹换，它的重要性僅次于title標(biāo)簽，搜索引擎檢索完title會立即查看h1的內(nèi)容都弹。所以h1標(biāo)簽會影響到頁面在搜索引擎中的排名娇豫。注意，頁面中一般只寫一個h1畅厢，如果h1標(biāo)簽過多的話冯痢，搜索引擎會認(rèn)為該網(wǎng)站為垃圾網(wǎng)站，不予收錄框杜。在網(wǎng)站頁面中最好不要超過1個系羞。否則會有惡意提高網(wǎng)站權(quán)重的嫌疑。
<h2></h2>標(biāo)簽：最好不要超過12個
<h3></h3>標(biāo)簽
<h4></h4>標(biāo)簽：基本不使用
<h5></h5>標(biāo)簽：基本不使用
<h6></h6>標(biāo)簽：基本不使用

段落標(biāo)簽p

雙
語義：段落用于大篇幅的文字霸琴。
默認(rèn)樣式：margin
p標(biāo)簽在嵌套時不要包含塊元素的標(biāo)簽椒振，如p標(biāo)簽。
內(nèi)容默認(rèn)獨占一行

  <p>
    鋤禾日當(dāng)午梧乘，
    汗滴禾下土;
    誰知盤中餐澎迎，
    粒粒皆辛苦!
  </p>

發(fā)現(xiàn)它并沒有換行顯示

注意，在html中选调，字符之間不論有多少個空格夹供，都會當(dāng)作一個空格解析；換行也會被當(dāng)成一個空格解析仁堪，那么如何正確換行呢哮洽？

換行標(biāo)簽br

br標(biāo)簽是一個自結(jié)束標(biāo)簽，單標(biāo)簽弦聂。注意區(qū)分br與hr

  <p>
    鋤禾日當(dāng)午<br/>
    汗滴禾下土;<br />
    誰知盤中餐<br>
    粒粒皆辛苦!<br/>
  </p>

換行成功鸟辅，也可以一句一個p標(biāo)簽哈

水平線標(biāo)簽hr

在頁面中生成一條水平線氛什。

ul標(biāo)簽

雙
語義：無序列表
默認(rèn)樣式：margin padding-left list-style-type

li標(biāo)簽

雙
語義：列表項
默認(rèn)樣式：list-style-type

ol標(biāo)簽

雙
語義：有序列表
默認(rèn)樣式：margin padding-left list-style-type

ul ol li 組合標(biāo)簽用于新聞鏈接 / 列表格 / 排版布局（無序用的多）

ul / ol 與li 是一對組合標(biāo)簽： ul /ol的第一層子級一定是li li的父級一定是 ul/ol

dl dt dd 標(biāo)簽

自定義列表字典標(biāo)簽

<dl></dl>

雙標(biāo)簽
語義：自定義列表
默認(rèn)樣式：margin

<dt></dt>

雙
語義：列表標(biāo)題
默認(rèn)樣式：無

<dd></dd>

雙
語義：列表說明
默認(rèn)樣式：margin-left
用于解釋說明一些視頻，出現(xiàn)在視頻下方匪凉。

span標(biāo)簽

內(nèi)聯(lián)標(biāo)簽
語義：無意義
默認(rèn)樣式：無
用于專門選中文字枪眉，然后為文字設(shè)置樣式

strang標(biāo)簽

內(nèi)聯(lián)標(biāo)簽
雙
語義：強調(diào)
默認(rèn)樣式：font-weight: bold
權(quán)重：有一定的權(quán)重比span高

em標(biāo)簽

內(nèi)聯(lián)標(biāo)簽
雙
語義：強調(diào)
默認(rèn)樣式：font-style:italic
有一定的權(quán)重

a標(biāo)簽

內(nèi)聯(lián)標(biāo)簽
寫法
<a name="" herf="需要鏈接的網(wǎng)頁地址" target="打開網(wǎng)頁的方式">文字 / 圖片</a>
語義：超鏈接
默認(rèn)樣式：color
屬性：

herf屬性中，

鏈接網(wǎng)址再层，加http://
#代表連接到當(dāng)前頁面
3.目標(biāo)地址贸铜，可以是絕對地址，也可以是相對地址聂受；可以跳轉(zhuǎn)到外部網(wǎng)站蒿秦，也可以跳轉(zhuǎn)到項目里的其他頁面。

target屬性：指定打開鏈接的位置
??_self：代表在當(dāng)前窗口中打開（默認(rèn)值）
??_blank：代表新開一個窗口打開鏈接
??_parent
??_top
??還可以設(shè)置為一個內(nèi)聯(lián)框架的name屬性值蛋济，鏈接將會在指定的內(nèi)聯(lián)框架中打開棍鳖。

<a  target="_self">點擊跳轉(zhuǎn)</a>
<a href="url" target="tom">點擊跳轉(zhuǎn)</a>
<iframe src="url" frameborder="0" name="tom"></iframe>

圖片標(biāo)簽img

內(nèi)聯(lián)塊塊標(biāo)簽
單標(biāo)簽
寫法： <img src="圖片的路徑地址" alt="圖片說明">
語義：圖片
默認(rèn)樣式：在低版本的瀏覽器中有默認(rèn)的邊框
地址寫對， alt一定要寫
使用img標(biāo)簽來向網(wǎng)頁中引入一個外部圖片瘫俊。
屬性：

src：設(shè)置一個外部圖片的路徑
alt：描述圖片的內(nèi)容，注意悴灵，只有圖片沒有的時候扛芽，才會出現(xiàn)這個描述。搜索引擎可以通過這個屬性來識別不同的圖片积瞒，如果不寫alt屬性川尖，則搜索引擎不會對img中的圖片進行收錄
width：修改圖片的寬度
height：修改圖片的高度
寬度和高度如果只設(shè)置一個屬性，則另一個屬性也會按照比例調(diào)整大小
一般開發(fā)中茫孔，除了自適應(yīng)頁面叮喳，不建議設(shè)置width和height

    <img src="https://upload.jianshu.io/users/upload_avatars/13211941/993e19be-e3a0-4d9e-9c0e-23976c954ef9?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240" alt="我的頭像">
    <img width="" src="./images/myimages.jpg" alt="我的頭像">
    <img width="" src="../images/myimages.jpg" alt="我的頭像">
    <img width="" src="F:/Projects/VisualStudioProjects/learn/images/myimages.jpg" alt="我的頭像">

image.png

目錄結(jié)構(gòu)圖

圖片的路徑問題url

絕對路徑：
相對路徑：指的是相對于當(dāng)前資源所在的目錄位置

./   當(dāng)前路徑
../  上層路徑

圖片的格式：

.gif：支持的顏色少，支持少量的透明（直線透明缰贝，那么橫馍悟，要么豎，不能是圓形）剩晴，可以用于動態(tài)圖但是也只是簡單動圖锣咒。
圖片顏色單一或者是動態(tài)圖是可以使用gif
.png：支持的顏色多，支持復(fù)雜透明赞弥，可以用來顯示復(fù)雜透明的圖片
.jpg：支持的圖顏色比較多毅整，圖片可以壓縮，不支持透明绽左。一般用于保存顏色豐富的照片

圖片的使用原則：
效果不一致時使用效果好的
效果一致時使用小的悼嫉。

內(nèi)聯(lián)框架iframe標(biāo)簽

雙標(biāo)簽
使用內(nèi)聯(lián)框架可以引入一個外部的頁面，使用iframe標(biāo)簽拼窥。
并不推薦使用戏蔑，因為內(nèi)聯(lián)框架中的內(nèi)容不會被搜索引擎所檢索蹋凝。

<iframe src="url" frameborder="0" width="100px" height="300px" name="tom"></iframe>

表單元素

多用于網(wǎng)站與用戶進行交互（注冊 / 登陸所要求填的）

form

屬性：

action="需要傳送的目標(biāo)地址"
method="傳送的方式"：get / post。get用于select辛臊，post用于select insert updata delete
target：_self 在當(dāng)前窗口打開默認(rèn)方式仙粱，_blank 在新窗口打開

select和option

textarea

input

屬性：

type類型：
text 文本
password 密碼
radio 單選
checkbox 多選
file 文件上傳
button 按鈕
hidden 隱藏
reset 重置
submit 提交
color
date
datetime-local
email
time
url
range
telephone
number
search
value屬性：input標(biāo)簽的值都體現(xiàn)在value中，
name屬性：一定要設(shè)置彻舰，否則無法上傳伐割。

選擇時若想點文字即可勾選:

label標(biāo)簽：lable一次只能用于一個供選擇項目

設(shè)置id值：label標(biāo)簽與input標(biāo)簽須配套使用不可以先寫完label再寫input

表格元素

組合標(biāo)簽（組合標(biāo)簽：ul與li ol與li ）
多用于呈現(xiàn)內(nèi)容數(shù)據(jù)

<table></table> 表格

<tr></tr> 表格的行數(shù)

<th></th> 表格的標(biāo)題

<td></td> 表格的單元格

特性：
1. 單元格會默認(rèn)平分整個table的寬度
2. th的內(nèi)容默認(rèn)加粗水平垂直居中
3. td的內(nèi)容默認(rèn)垂直居中
4. table的寬度決定整個表格的寬度
5. 表格的同一列繼承最大的寬度（所以 th, td最好都設(shè)置上寬度）
6. 表格的同一行繼承最大的高度（所以 th, td最好都設(shè)置上高度）
表格的應(yīng)用：
布局排版 / 段落居中顯示 / 合并單元格 / 存放數(shù)據(jù)
單元格的合并：
colspan="數(shù)值"
rowspan="數(shù)值"
數(shù)值對應(yīng)需要合并的單元格個數(shù)，被合并的單元格要刪除刃唤，否則會多出單元格

標(biāo)簽類型的轉(zhuǎn)換

用display

塊屬性 display:block
內(nèi)聯(lián)屬性
- 內(nèi)聯(lián) display:inline
- 內(nèi)聯(lián)塊display：inline-block
display:none 頁面中不顯示隔心。位置可以為另一內(nèi)容占用。

一個題外的問題：當(dāng)我們的內(nèi)容剛好構(gòu)成一個html標(biāo)簽的時候尚胞，會發(fā)生什么硬霍？

  <div>
    a<b>c
  </div>

我們想要顯示a<b>c的內(nèi)容，顯然結(jié)果不對

在我們的html中笼裳，像一些如< >這種特殊字符是不能直接使用唯卖，我們需要使用特殊的符號來表示這些特殊字符，這些特殊字符我們稱之為實體（轉(zhuǎn)義字符）躬柬。
實體的語法：&實體的名字;

<   &lt;
>   &gt;
空格   &nbsp;
版權(quán)符號 &copy;

  <div>
    a<b>c  <br/>
    a&lt;b&lt;c
  </div>

瀏覽器解析到實體時拜轨，會自動將實體轉(zhuǎn)換為對應(yīng)的字符

xHtml語法規(guī)范

規(guī)范，不一定必須遵守允青，盡量遵守橄碾。
1.html中不區(qū)分大小寫,但是一般使用小寫
2.HTML中的注釋不能嵌套
3.HTML標(biāo)簽必須結(jié)構(gòu)完整，要么成對出現(xiàn)颠锉，要么自結(jié)束標(biāo)簽法牲。
瀏覽器會以最大的努力正確解析頁面，你所有的不符合語法規(guī)范的內(nèi)容琼掠，瀏覽器都會為你自動修正拒垃。（可通過瀏覽器查看頁面在內(nèi)容中的狀態(tài)）

 <p>這是一個p標(biāo)簽

自動修正

但是，有些情況瓷蛙，它修正的是錯誤的恶复。
為什么瀏覽器要自動修正這些錯誤呢？為什么要慣著那些開發(fā)者速挑？
為了搶占市場谤牡，水至清則無魚嘛！用戶不管你代碼寫得規(guī)范不規(guī)范姥宝，只管能不能顯示出來翅萤。
4.自結(jié)束標(biāo)簽一般都是在開始標(biāo)簽?zāi)┪布右粋€/，或者不寫也成。
5.html標(biāo)簽?zāi)芮短滋酌矗遣荒芙徊媲短?br> 6.HTML中的標(biāo)簽特殊屬性必須有值培己，且值必須加引號

2019-06-24選擇器與html標(biāo)簽