黑馬程序員pink老師前端入門教程，零基礎(chǔ)必看的h5(html5)+css3+移
網(wǎng)頁組成部分：HTML結(jié)構(gòu)，CSS表現(xiàn)，JS行為
lang為語言類型，en為英語，zh-CN為中文，fr法語
charset 意為字符集 UTF-8意為萬國碼
標(biāo)題標(biāo)簽(雙標(biāo)簽)：<h1>-<h6> 重要性/字號：h1>h2>h3>h4>h5>h6
段落標(biāo)簽(雙標(biāo)簽)：<p>
換行標(biāo)簽(單標(biāo)簽)：<br/>
文本格式化標(biāo)簽(雙標(biāo)簽)：加粗：<strong>(更加推薦)，<b>?傾斜：<em>(更加推薦),<i> 下劃線：<ins>(更加推薦),<u>,刪除線：<del>(更加推薦),<s>
<div>(雙標(biāo)簽)(獨(dú)占一行)<span>(雙標(biāo)簽)(一行可以放多個(gè)<span>)沒有語義，是一個(gè)盒子，修飾內(nèi)容；
圖像標(biāo)簽單標(biāo)簽：<img src=""/>src是<img>的必須屬性，用于指定圖像文字的路徑和文件名，alt:圖像不能顯示，顯示文字，title：鼠標(biāo)放到圖像上，顯示文字，width：設(shè)置圖像的寬，height：設(shè)置圖像的高，border:設(shè)置圖像的邊框粗細(xì)
上一級路徑:../ 下一級：/（上下級為相對位置）
超鏈接標(biāo)簽：
<a>(雙標(biāo)簽)語法格式：<a href="跳轉(zhuǎn)目標(biāo)" target="目標(biāo)窗口的彈出方式">文本或圖像</a>（_self意為默認(rèn)值，_blank為在新窗口打開方式，兩個(gè)都為打開方式）
內(nèi)部鏈接只需href=”文件名“，空連接：<a href="#">
下載鏈接：地址為文件或壓縮包
錨點(diǎn)鏈接（快速跳到本頁面的某一個(gè)位置）：1.href值為#名字的形式；2.找到目標(biāo)位置標(biāo)簽，里面添加一個(gè)id屬性=剛才的名字。樣例：<a href="#two">第二集</a>?<h3 id="two">第二集介紹</h3>
注釋標(biāo)簽：?<!-- 添加注釋 -->（vscode快捷鍵：CTRL+/？）
特殊字符：空格：  大于號：> 小于號：< 和號（&）：& 人民幣（￥）：¥ 版權(quán)（?）：© 注冊商標(biāo)（?）：® 攝氏度：° 正負(fù)號：± 乘號：× 除號：÷ 平方二：²平方三：³
表格基本語法：
<table>
???<tr>//tr表示行
??????<td>單元格內(nèi)的文字</td>//td為單元格
??????...
???</tr>
??????...
</table>
表頭標(biāo)簽(雙標(biāo)簽)：<th>(文字加粗，居中)
表格屬性：
屬性名????????????屬性值??????????????????描述
align?????????left,center,right??規(guī)定表格相對周圍元素的對齊方式??????????
border????????????1或“”??????????規(guī)定表格單元是否擁有邊框，默認(rèn)為“”，表示沒有邊框
cellpadding???????像素值?????????規(guī)定單元邊沿與其內(nèi)容之間的空白，默認(rèn)為1像素
cellspacing???????像素值?????????規(guī)定單元格之間的空白，默認(rèn)為2像素
width?????????像素值或百分比?????規(guī)定表格的寬度
表結(jié)構(gòu)標(biāo)簽：thead表頭部區(qū)域，tbody表主體部分（兩個(gè)都為雙標(biāo)簽）
合并單元格：
方式：跨行合并：rowspan=“合并單元格的個(gè)數(shù)” ，跨列合并：colspan=“合并單元格的個(gè)數(shù)”
目標(biāo)單元格：跨行，最上側(cè)單元格為目標(biāo)單元格，寫合并代碼；跨列，最左側(cè)單元格為目標(biāo)單元格，寫合并代碼
列表(用來布局)標(biāo)簽：
1.無序列表：<ul>(雙標(biāo)簽) <li>(雙標(biāo)簽)?例子：<ul> <li>列名</li>...</ul>
2.有序列表：<ol>(雙標(biāo)簽) <li>(雙標(biāo)簽)?例子：<ol> <li>列名</li>...</ol>
3.自定義列表：<dl>(雙標(biāo)簽) <dt>(雙標(biāo)簽) <dd>(雙標(biāo)簽) 例子：<dl><dt>名詞1</dt><dd>名詞解釋1</dd><dd>名詞解釋2</dd>...</dl>
表單標(biāo)簽：
1.表單域(用于定義表單域，以實(shí)現(xiàn)用戶信息的收集和傳遞)：<form>(雙標(biāo)簽)(form會將他范圍內(nèi)的表單元素信息提供交給服務(wù)器)?例子：<form action="url地址" method=“提交方式” name=“表單域名稱”>各種表單元素控件</form>
屬性??????屬性值???????????????????????作用
action????url地址???用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址
method????get/post??用于設(shè)置表單數(shù)據(jù)提交方式，其取值為get或post
name???????名稱?????用于指定表單的名稱，以區(qū)分同一個(gè)頁面中的多個(gè)表單域???????
2.表單元素（表單控件）：
1）<input>（輸入元素）（單標(biāo)簽） 例子<input type="屬性值" />
type屬性值???????????????????????????????描述
button?????????????????????????????定義可點(diǎn)擊按鈕
checkbox???????????????????????????定義復(fù)選框
file???????????????????????????????定義輸入字段和“瀏覽”按鈕，供文件上傳
hidden?????????????????????????????定義隱藏的輸入字段
image??????????????????????????????定義圖像形式的提交按鈕
password???????????????????????????定義密碼字段，該字段中的字符被掩碼
radio??????????????????????????????定義單選按鈕
reset??????????????????????????????定義重復(fù)按鈕，重置按鈕會清除表單中的所有數(shù)據(jù)
submit?????????????????????????????定義提交按鈕，提交按鈕會將表單數(shù)據(jù)發(fā)送給服務(wù)器
text???????????????????????????????定義單行的輸入字段，用戶可以在其中輸入文本，默認(rèn)寬度為20個(gè)字符
除了type意外，<input>還有其他屬性：
屬性?????????????屬性值????????????????描述
name????????????由用戶自己定義??????定義input元素的名稱
value???????????由用戶自己定義??????規(guī)定input元素的值
checked?????????checked?????????????規(guī)定此input元素首次加載時(shí)應(yīng)被選中
maxlength???????正整數(shù)??????????????規(guī)定輸入字段中的字符的最大長度
2）<label>(雙標(biāo)簽)(用戶界面中某個(gè)元素的說明)?????例子：<label for="sex">男</label><input type="radio" name="sex" id="sex" />
3)下拉表單<select><option>(雙標(biāo)簽)?例子：<select> <option>選項(xiàng)1</option>...</select>（在<option>中定義selected=“selected”是，當(dāng)前項(xiàng)為默認(rèn)項(xiàng)）
3.文本域標(biāo)簽<textarea>(雙標(biāo)簽) 例子：<textarea rows="n" cols="m"></textarea>
CSS
CSS規(guī)則由兩個(gè)主要部分構(gòu)成，選擇器以及一條或多條聲明
?h1{color：red； font-size：25px；}
?|????|???|??????|???????|
選擇器 屬性?值????屬性????值
css寫在<head>中
<style>(雙標(biāo)簽)（放在）<head>中
例子:<head><style>p{color:red;}</style></head>
CSS基礎(chǔ)選擇器包括標(biāo)簽選擇器，類選擇器，id選擇器，通配符選擇器
標(biāo)簽選擇器：語法：標(biāo)簽名 {屬性1：屬性值；屬性2：屬性值...}
類選擇器：語法 ：<標(biāo)簽 class=“屬性值”></標(biāo)簽>例：:<head><style>.red {color:red;}</style></head><div class="red"> 變紅色</div>
類選擇器口訣：樣式點(diǎn)定義，結(jié)構(gòu)類（class）調(diào)用，一個(gè)或多個(gè)，開發(fā)最常用
id選擇器：id選擇器以“#”來定義?語法：#id名 { 屬性1：屬性值1；屬性2：屬性值2；...}例： <head><style>#red {color:red;}</style></head><div id="red"> 變紅色</div>
id選擇器注意：id屬性只能在每個(gè)HTML文檔中出現(xiàn)一次；口訣：樣式#定義，結(jié)構(gòu)id調(diào)用，只能調(diào)用一次，別人切勿使用
通配符選擇器：通配符選擇器用“*”定義?語法： *{屬性1：屬性值1；屬性2：屬性值2；...}
CSS字體屬性：
1.字體系列：
字體類型：font-family 例：<head><style>h2 {font-family: "微軟雅黑";}</style></head><h2> 變紅色</h2>
字體大?。篺ont-size??例：<head><style>h2 {font-size: "20px";}</style></head><h2> 變紅色</h2>
字體粗細(xì)：font-weight?使用方法與類選擇器一樣?屬性值：normal不加粗，blod加粗，100-900，400等于normal，700等于blod
字體體樣式：font-style??使用方法與字體類型一樣?屬性值：normal瀏覽器表示標(biāo)準(zhǔn)字體樣式，italic瀏覽器顯示斜體字體樣式
字體符合屬性： font: font-style?font-weight font-size/line-height font-family?例：div{font: italic 700 "微軟雅黑"}（不需要設(shè)置的屬性可以省略，但必須保留font-size和font-family屬性）
字體顏色：例：div{color：red；} 表示 預(yù)定義的顏色值，十六進(jìn)制，如#FF0000，#FF6600；rgb代碼如rgb（255，0，0），rgb（100%，0%，0%）
對齊文本：text-align（使用方法與類選擇器一樣），
裝飾文本：text-decoration（使用方法與類選擇器一樣）
屬性??????????描述
none??????默認(rèn)，沒有修飾線
underline????下劃線
overline?????上劃線
line-through?刪除線
文本縮進(jìn)：text-indent（使用方法與類選擇器一樣）???em：當(dāng)前元素1個(gè)文字的大小
文本行距：text-height（使用方法與類選擇器一樣）???屬性值單位為px
CSS引入方式：
行內(nèi)樣式表（行內(nèi)式）<style>(雙標(biāo)簽)
內(nèi)部樣式表（嵌入式）：先創(chuàng)建.css文件，后用<link>關(guān)聯(lián)（<link>格式：<link rel="stylesheet"href="外部樣式表文件名.css" type="text/css">）
外部樣式表（鏈接式）：直接在標(biāo)簽內(nèi)部寫
CSS復(fù)合選擇器：
1.常用選擇器：后代選擇器，子選擇器，并集選擇器，偽類選擇器
1）后代選擇器：語法：元素1 元素2{樣式聲明}
