千鋒前端浠浠呀老師HTML+CSS教程，零基礎(chǔ)web前端開(kāi)發(fā)入門(mén)必看視頻
1.雙標(biāo)簽和單標(biāo)簽：
<></> </>
<h1>:開(kāi)標(biāo)簽
</h1>:閉合標(biāo)簽
<h1></h1>:完整標(biāo)簽對(duì)
<br>:可換行
單標(biāo)簽： 一般情況下單標(biāo)簽不修飾任何內(nèi)容又稱(chēng)為空標(biāo)簽。
2.標(biāo)簽屬性：
~1：書(shū)寫(xiě)在標(biāo)簽自己本身。
~2;可以為標(biāo)簽提供一些額外信息或者對(duì)標(biāo)簽進(jìn)行修飾。
3.標(biāo)簽屬性書(shū)寫(xiě)方法：
雙：<h1屬性名="屬性值"></h1>
單：<img屬性名="屬性值">
<img>讀取圖片
4.標(biāo)簽大?。?/p>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
5.段落標(biāo)簽：
<p>正文段落</p>（專(zhuān)于定義段落地）
:空格
  自然段空格
對(duì)齊方式：
左側(cè)對(duì)其: aligh="lef"
居中對(duì)其：align="center"
右側(cè)對(duì)其：align="right"
6.圖片插入：
情況一：<img src="圖片路徑">
情況二：<img src="文件夾名稱(chēng)/圖片路徑">
情況三：<img src="../(返回上級(jí))/圖片路徑">
7.路徑：
相對(duì)路徑：根據(jù)文件和文件夾之間的關(guān)系，來(lái)確定文件查找途徑的
1.頁(yè)面和圖片在同一文件夾，不需要定義路徑
2.頁(yè)面引用子文件里的圖片，查找路徑使用img1/img2/img3...
3.頁(yè)面應(yīng)用外層文件夾里的圖片，路徑查找使用../../../
絕對(duì)路徑：從根目錄開(kāi)始通過(guò)完整的路徑定義來(lái)查找資源的。
根：可能是網(wǎng)站域名，也可能是本地磁盤(pán)名
情況一：引用互聯(lián)網(wǎng)資源（方法：直接使用互聯(lián)網(wǎng)圖片地址。）
情況二：引用本地磁盤(pán)中某一個(gè)文件夾的圖片
4.圖片進(jìn)階：“標(biāo)簽名和屬性名并不沖突”
提示文本：
1.alt=“”（在破損和加載不出來(lái)時(shí)顯示）（占用空間）
2.titile=“”（顯示鼠標(biāo)后面的文本提示）（1.title屬性定義的內(nèi)容不占空間的。
2.默認(rèn)是隱藏的，只有鼠標(biāo)劃入時(shí)候才會(huì)顯示）
網(wǎng)頁(yè)可用圖片格式：
gif jpg jpeg png bmp webp
有損壓縮：有損壓縮可以減少圖像在內(nèi)存和磁盤(pán)中占用的空間。
無(wú)損壓縮：無(wú)損壓縮不能減少圖像在內(nèi)存和磁盤(pán)中占用的空間。
gif：無(wú)損壓縮
jpg：有損壓縮
PNG：無(wú)顯示質(zhì)量損耗（有利于網(wǎng)絡(luò)傳輸）
bmp：通常不壓縮的
webp：包括有損壓縮與無(wú)損壓縮
超鏈接：（指將各種不同空間的文字性息組織在一起的網(wǎng)狀文）
HyperText:超文本
超鏈接實(shí)現(xiàn)：<a></a>
跳轉(zhuǎn)屬性href：超文本應(yīng)用
實(shí)操：<a href="目標(biāo)頁(yè)面的地址">顯示在頁(yè)面中的文本</a>
target：定義超鏈接的打開(kāi)方式
—self 代表在當(dāng)前頁(yè)面打開(kāi)
—blank 代表在空白頁(yè)面打開(kāi)
target="_..."
錨點(diǎn)鏈接（命名描記）：是頁(yè)面內(nèi)的超級(jí)鏈接，用來(lái)實(shí)行同一頁(yè)面不同區(qū)域的跳轉(zhuǎn)。
1.跳轉(zhuǎn)目標(biāo)的定義：
id屬性=“錨點(diǎn)的名字”（錨點(diǎn)名字不能重復(fù)）
2.錨點(diǎn)的定義：
添加，href屬性（屬性值不再是地址了）=“通過(guò)#后面攜帶錨點(diǎn)的名字”
文本加粗：
<b>加粗的文本</b>
<strong>加粗的文本</strong>
b標(biāo)簽：b標(biāo)簽僅僅是為了加粗顯示文本
strong標(biāo)簽：strong標(biāo)簽語(yǔ)義化更強(qiáng)，表示該文本比較重要。
文本傾斜：
<i>傾斜的文本</i>
<em>傾斜的文本</em>
i標(biāo)簽：i標(biāo)簽僅僅為了讓字體顯示傾斜，沒(méi)有顯示語(yǔ)義。
em標(biāo)簽：em標(biāo)簽不僅能讓字體顯示傾斜，還能加強(qiáng)語(yǔ)氣。
刪除線(xiàn)效果：
<s>刪除線(xiàn)文本</s>
<del>刪除線(xiàn)文本</del>
s標(biāo)簽：Html5，不支持
del標(biāo)簽：支持
給文本加入下劃線(xiàn)：
<u>下劃線(xiàn)文本</u>
角標(biāo)標(biāo)簽：
<sup>上角標(biāo)文本</sup>
<sub>下角標(biāo)文本</sub>
注釋方法：
<!-- 注釋的內(nèi)容 -->
有序列表: 指有序列表清單稱(chēng)之為有序列表
元素ol,元素li （ol和li是父子關(guān)系）
寫(xiě)法：<ol><li> </li></ol>(li必須要嵌套在ol里，ol 只能嵌套li)
<ol>
<li> 列表項(xiàng)內(nèi)容 </li>
</ol>
設(shè)置項(xiàng)目符號(hào)：
<ol type="_"></ol>
要熟記的符號(hào)：
英文字母順序：A,a
羅馬數(shù)字順序：l , i
阿拉伯?dāng)?shù)字順序：1
設(shè)置啟始序號(hào)：
<ol start="數(shù)字"></ol>
無(wú)序列表：指列表項(xiàng)中的內(nèi)容，是沒(méi)有時(shí)間、空間或者邏輯等順序要求的。
語(yǔ)法：
<ul>
</li>...</li> (ul只能嵌套li)
</ul>
修改項(xiàng)目符號(hào)：
type="dise/circle/none/square"
實(shí)心園：dise 空心園：circle 隱藏項(xiàng)目符號(hào)：none 實(shí)心方塊：square
自定義列表：
語(yǔ)法:
定義列表：<dl>
列表標(biāo)題：<dt>
列表內(nèi)容：<dd>
(dt標(biāo)簽和dd標(biāo)簽只能在dl里使用，dd和dt是dl的子標(biāo)簽，dd和dt是兄弟標(biāo)簽。dd和dt標(biāo)簽不可以單獨(dú)使用。)
快速創(chuàng)建標(biāo)簽方法：
單個(gè)快速創(chuàng)建標(biāo)簽：
<標(biāo)簽名>{文本內(nèi)容}
<標(biāo)簽名>{文本內(nèi)容}*重復(fù)次數(shù)
標(biāo)簽${文本$內(nèi)容}*重復(fù)次數(shù)
嵌套標(biāo)簽的快速書(shū)寫(xiě)：
父標(biāo)簽名>子標(biāo)簽名{子標(biāo)簽文本}*重復(fù)次數(shù)
父標(biāo)簽>子標(biāo)簽*復(fù)制次數(shù)>子標(biāo)簽[標(biāo)簽屬性]
父標(biāo)簽>子標(biāo)簽+兄弟標(biāo)簽*重復(fù)次數(shù)
表格標(biāo)簽快捷鍵：
父標(biāo)簽>子標(biāo)簽*重復(fù)次數(shù)>子標(biāo)簽*重復(fù)次數(shù)
表格基礎(chǔ)：
橫排可以理解為：行
縱排可以理解為：列
每一個(gè)人可以看作：小的單元格
表格標(biāo)簽：
<table>
<tr> (一個(gè)tr代表一行)
<td> （一個(gè)td代表一個(gè)單元個(gè)）
.......
</td>
</tr>
</table>
（一個(gè)普通的表格每個(gè)tr里的td個(gè)數(shù)是相等的）
table標(biāo)簽修飾：
table文字加粗
<tr>
<th>加粗并居中</th>(把td改成th)
</tr>
table繪制表格線(xiàn)并且增加寬度與高度：
<table border="數(shù)值" width="總寬數(shù)值" height="總高度數(shù)值">
table改變單元格之間距離和單元格與文本的距離:
單元格之間距離: cellspacing="_"
單元格與文本的距離: cellpadding="_"
table改變顏色：
修飾表格背景顏色：bgcolor="_"
修飾表格的邊框顏色：bordercolor="_"
table表格居中對(duì)齊：
<table align="left/center/right">
表格行tr屬性：
tr寬度：<tr height="設(shè)置高度">
tr顏色：<tr bgcolor="顏色單詞">
tr水平對(duì)齊方式：<tr align="left/center/right">
tr垂直對(duì)齊方式：<tr valign="top/middle/bottom">
左側(cè)對(duì)齊：left 頂部對(duì)齊：top
居中對(duì)齊：center 居中對(duì)齊：midddle
右側(cè)對(duì)齊：right 底部對(duì)齊：bottom
合并單元格：
rowspan="縱向合并行的總數(shù)"
colspan="橫向合并列的總數(shù)"
（水平合并，橫向跨列:colspan，垂直合并,縱向跨行:rowspan）
（只能橫向或縱向相鄰的單元格合并）
表格分類(lèi)：
<caption>標(biāo)題</caption>
caption:
<table>
<caption>標(biāo)題</caption>
<tr>___</tr>
</table>
行分組
表格頭：<thead></thead>
表格體：<tbody></tbody>
表格腳：<tfoot></tfoot>
（thead和tbody與tfoot 為同級(jí)，一個(gè)表格只允許使用一個(gè)thead和一個(gè)tfoot,但是允許使用多個(gè)tbody。）
列分組：
<colgroup span="數(shù)值"></colgroup>
colgroup:把一列或者連續(xù)的幾列分成一組。
顏色值和長(zhǎng)度表現(xiàn)方法：
顏色值：
顏色名稱(chēng)：1.必須使用這140個(gè)標(biāo)準(zhǔn)的英文名稱(chēng) 2.中文漢字不能作為顏色值
十六進(jìn)制值：指使用 #RRGGBB 的形式來(lái)定義顏色值。
十六進(jìn)制顏色值：
RR GG BB （00~FF）
紅色 綠色 藍(lán)色 （色彩強(qiáng)度）
# 00 00 FF
RGB值：指使用RGB(red,green,blue)的形式來(lái)定義顏色。
RGB顏色值：
RGB(red,green,blue) 0-255中的整數(shù)。（1.不區(qū)分大小寫(xiě)。2.括號(hào)里的數(shù)字和逗號(hào)前后可以有空格。3.所有瀏覽器都支持。）
長(zhǎng)度單位：
絕對(duì)長(zhǎng)度單位：固定的，用這些單位表示的長(zhǎng)度會(huì)顯示為設(shè)置的尺寸。
如：厘米（cm） 毫米（mm） 英（in）
px(像素)
相對(duì)長(zhǎng)度單位：指相對(duì)于一個(gè)長(zhǎng)度計(jì)算出來(lái)的長(zhǎng)度，一般用來(lái)適配不同的設(shè)備。
如：百分比（%）
塊級(jí)元素和內(nèi)聯(lián)元素：
Html中的兩種元素：
1.block-level 塊級(jí)（塊元素）
2.inline 內(nèi)聯(lián)（行內(nèi)元素）
div和span標(biāo)簽：
div標(biāo)簽：用于定義HTML文檔中的一個(gè)分塊或一個(gè)部分。
div語(yǔ)法：<div>內(nèi)容</div>
span標(biāo)簽：用于標(biāo)記文本的一部分或文檔的一部分。
span語(yǔ)法：<span>內(nèi)容</span>
塊元素：
1.總是從新行開(kāi)始。
2.瀏覽器會(huì)自動(dòng)在元素的前后添加一些邊距。
3.總是占據(jù)可用的全部寬度，盡可能的向左和向右伸展。
學(xué)習(xí)過(guò)的塊元素：
標(biāo)題元素：<h1>-<h6>
段落元素：<p>
列表元素：<ol>，<ul>，<li>，<dl>，<dt>，<dd>
表格元素：<table>，<tr>，<td>，<th>，<thead>，<tfoot>，<caption>
分塊元素：<div>
內(nèi)聯(lián)元素：（不會(huì)獨(dú)占一行，只占用必要的寬度），（內(nèi)聯(lián)元素里面不能嵌套塊級(jí)元素。）
鏈接元素：<a>
文本修飾元素：<b>，<em>，<i>，<strong>，<sub>，<sup>
折行元素：<br>
圖片元素：<img>
范圍元素：<span>
初始表單：
表單控件：所有控件都要定義在<form>里面。
表單控件語(yǔ)法：<form></form>
文本框和密碼框：
文本框：是讓用戶(hù)輸入文本的一個(gè)控件區(qū)域。
input語(yǔ)法：
<form>
<imput type="text/password">
</form>
單行文本框：type值為text
密碼文本框：type值為password
type:輸入控件的類(lèi)型
多行文本框：
語(yǔ)法：<form><textarea><textaea><form>
指定文本寬度：<taxtarea cols="數(shù)字"></~~>
指文本可見(jiàn)行數(shù)：<textarea rows="數(shù)字"></~~>
單選和多選：
單選：<form>
<input type="radio" name="gender">
</form>
1.單選框控件必須成組使用才有意義，每組至少需要兩個(gè)單選框
2.“組”是通過(guò)name屬性來(lái)建立的，凡是name值相同的就是一組。
3.同組的單選框，只有一個(gè)會(huì)處于選中狀態(tài)，其他的會(huì)自動(dòng)呈現(xiàn)為未選中狀態(tài)
多選：<form>
<input type="checkbox">
</form>
單選框和多選框默認(rèn)選中效果：
<input checked="checked"或直接checked>
下拉菜單：
語(yǔ)法：
<select>
<option></option> (select標(biāo)簽里面只能放置option標(biāo)簽)
</select>
更改下拉菜單默認(rèn)選擇：
<option selected></~~>
下拉菜單多選：
<select multiple></~~>
修改下拉菜單默認(rèn)可見(jiàn)行數(shù)：
<select size=“數(shù)字”></~~>
選擇文件:
<input type="file">
label標(biāo)簽和只讀禁用屬性
form
<label for="username"></label>
<input type=“text” id="username">
form
一個(gè)頁(yè)面不能出現(xiàn)兩個(gè)相同id屬性值。
只讀屬性：
<input type="text" readonly value="">
value(值，作用給輸入框一個(gè)默認(rèn)值)
readonly（已讀的意思）
點(diǎn)擊不可選中:
<input type=""radio disabled>
disabled(禁用的意思，可以給任何組件)
禁用表單控件值是不會(huì)被收集和發(fā)送給后端的。
表單分組控件：
<fieldset>\
<legend>標(biāo)題</legend>
</fieldset>
表單按鈕:
按鈕分類(lèi):（提交，重置，普通，圖像，雙標(biāo)簽button按鈕）
提交按鈕:具有確定提交信息同時(shí)發(fā)送標(biāo)點(diǎn)數(shù)據(jù)給后臺(tái)的功能。
<input type=“submit”>
submit：提交
<form action="服務(wù)器地址" target="_blank" method="post"> _slef
get
get:是默認(rèn)值，瀏覽器會(huì)把收好的表單數(shù)據(jù)，加到服務(wù)器地址后面，提交給服務(wù)器
post值不但能收集表單的數(shù)據(jù)，而且不會(huì)在地址欄里暴露隱私數(shù)據(jù)
action:行動(dòng)，用戶(hù)點(diǎn)擊提交按鈕后做什么動(dòng)作
重置按鈕：
<input type="reset">
reset:重置，復(fù)位
普通按鈕:
<input type="button" value="普通按鈕">
button:按鈕 value:按鈕名字
圖像按鈕：
<input type="image" src="圖片路徑">
image:圖像
雙標(biāo)簽button按鈕:
<button>名字</button>
button:默認(rèn)具備點(diǎn)擊提交表單功能
<button type="button">名字</button>
加上type="button"變?yōu)槠胀ò粹o
表單的數(shù)據(jù)采集和提交：
<input type="text" name="值">
password
name:使值儲(chǔ)存用戶(hù)內(nèi)容
實(shí)用性標(biāo)簽：
<hr width="" siae="" noshade="" color="" align="">
horiaontal：簡(jiǎn)寫(xiě)hr，表示“水平線(xiàn)”
width/size(控制水平線(xiàn)的寬度和高度)
noshade:用于去掉水平線(xiàn)陰影
color:用于定義水品線(xiàn)的顏色
align:用來(lái)調(diào)整水平線(xiàn)水平對(duì)其方式
<pre> </pre>
preformatted:簡(jiǎn)寫(xiě)，預(yù)格式化的文本，保留了空格和換行
<map name="">
<area herf=" " shape="" coords="">
</map>
map：圖像映射
coords:用來(lái)定義可點(diǎn)擊區(qū)域的坐標(biāo);與shape配合使用
herf:用來(lái)定義熱點(diǎn)區(qū)域鏈接的目標(biāo)地址
shape:用來(lái)定義區(qū)域的形狀
shape="default/rect/circle/poly"
default:所有區(qū)域
rect:矩形
circle:圓形
poly:多邊形
map name=""(img標(biāo)簽的usemap屬性相關(guān)聯(lián))
使用方法：
<area shape="ciecle" coords="x,y,r">
原點(diǎn)為圖上左上角，與數(shù)學(xué)坐標(biāo)軸相反
SVG:XML語(yǔ)法的圖像格式，全稱(chēng):Scalable Vector Graphics（可縮放矢量圖）
SVG:形狀描述，本質(zhì)比文本文件，體積較小、放大多少倍都不會(huì)失幀
使用方法：<svg></svg>
<iframe src="網(wǎng)頁(yè)路徑" width="數(shù)字" height="數(shù)字" frameborder="0" scrolling="auto"></ifame>
yes
no
ifame作用:用來(lái)在一個(gè)網(wǎng)頁(yè)中顯示另一個(gè)網(wǎng)頁(yè)。
src：資源的意思，用以引入其他頁(yè)面
width：寬
height：高
frameborder:框架邊框，默認(rèn)有邊框、通常值為0
scrolling:滾動(dòng)，用來(lái)控制是否顯示框架的滾動(dòng)條。(auto:在需要的情況下出現(xiàn)滾動(dòng)條，yes:一直顯示滾動(dòng)條，no:從不顯示滾動(dòng)條)
