HTML5基本骨架
html標(biāo)簽
定義HTML文檔，瀏覽器看到后就明白這個是HTML文檔，所以其他元素要包裹在它里面，標(biāo)簽限定了文檔的開始點(diǎn)和結(jié)束點(diǎn)。
<!DOCTYPE html>
<html>
</html>head標(biāo)簽
head標(biāo)簽用于定義文檔的頭部，描述了文檔的各種屬性和信息，包括文檔的標(biāo)題、在Web的位置以及和其他文檔的關(guān)系等，絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內(nèi)容顯示給讀者。
<!DOCTYPE html>
<html>
<head>
</head>
</html>body標(biāo)簽
body元素定義文檔的主體。body和head同級
body元素包含文檔的所有內(nèi)容，比如文本、超鏈接、圖像、表格和列表等。
它會直接在頁面中顯示出來，也就是用戶可以直觀看到的內(nèi)容。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
我會顯示在瀏覽器中
</body>
</html>title標(biāo)簽
- 可定義文檔的標(biāo)題
- 它顯示在瀏覽器的標(biāo)題欄或狀態(tài)欄上
- <title>標(biāo)簽是<head>標(biāo)簽中唯一必須要包含的東西，就是說head一定要寫title
- <title>的增加有利于SEO優(yōu)化
SEO是搜索引擎優(yōu)化的英文縮寫，通過對網(wǎng)站內(nèi)容調(diào)整，滿足搜索引擎的排名需求
<!DOCTYPE html>
<html>
<head>
<title>第一個頁面</title>
</head>
<body>
我會顯示在瀏覽器中
</body>
</html>meta標(biāo)簽
meta標(biāo)簽用來描述一個HTML網(wǎng)頁文檔的屬性，關(guān)鍵詞等，例如：charset="utf-8"是說當(dāng)前使用的是utf-8編碼格式，在開發(fā)中會看到utf-8或是gbk。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第一個頁面</title>
</head>
<body>
我會顯示在瀏覽器中
</body>
</html>內(nèi)容
標(biāo)題
是通過<h1>~<h6>標(biāo)簽進(jìn)行定義的
<h1>定義最大的標(biāo)簽，<h6>定義最小的標(biāo)簽
生成h1~h6快捷鍵：
h$*6
在標(biāo)題標(biāo)簽位置擺放（在標(biāo)簽中添加屬性）
align="left|center|right"默認(rèn)居左
段落
段落是通過<p>標(biāo)簽定義的
<p>段落一</p>
<p>段落二</p>換行?
換行是在不產(chǎn)生新段落的情況下進(jìn)行換行，使用<br>
<br/>元素是一個空的HTML元素
<p>段落<br>換行</p>
<p>段落<br />換行</p>水平線?
<hr/>標(biāo)簽是在HTML頁面中創(chuàng)建水平線
<hr/>?屬性：
- color：設(shè)置水平線的顏色
- width：設(shè)置水平線的長度
- size：設(shè)置水平線的高度
- align：設(shè)置水平線的對齊方式（默認(rèn)居中），可取值left|right
<hr clolr="" width="" size="" align=""/>圖片
<img>標(biāo)簽定義HTML頁面中的圖像，單標(biāo)簽
<img src="" alt="" title="" width="" height="">屬性：
- src：路徑（圖片地址與名字）
- alt：規(guī)定圖像的替代文本
- width：規(guī)定圖像的寬度
- height：規(guī)定圖像的寬度
- title：鼠標(biāo)懸停在圖片上給予提示
圖片路徑：
1.絕對路徑
2.相對路徑：
- 子級關(guān)系：/
- 父級關(guān)系：../
- 同級關(guān)系：./（可?。?/li>
3.網(wǎng)絡(luò)路徑
超文本鏈接
HTML使用標(biāo)簽<a>來設(shè)置超文本鏈接
超鏈接可以是一個字、詞、句子、圖像等，可以點(diǎn)擊這些內(nèi)容跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔中的某部分
<a href="url">鏈接文本</a>屬性：
- 在標(biāo)簽<a>中獲得了href屬性來描述鏈接的地址
- 默認(rèn)情況下，鏈接將以一下形式出現(xiàn)在瀏覽器中：（可以通過CSS樣式修改這些效果）
- 一個為訪問過的鏈接顯示未藍(lán)色字體并帶有下劃線
- 訪問過的鏈接顯示未紫色并帶有下劃線
- 點(diǎn)鏈接時，鏈接顯示為紅色并帶有下劃線
- 把鼠標(biāo)指針移動到網(wǎng)頁中的某個鏈接上時，箭頭會變成一只小手
文本
常用文本標(biāo)簽和段落是不同的，段落代表一段文本，而文本標(biāo)簽一般表示文本詞匯
常用文本標(biāo)簽：
?有序列表
有序列表是一列項(xiàng)目，列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記。
有序列表始于<ol>標(biāo)簽，每個列表項(xiàng)始于<li>標(biāo)簽。
有序列表可以嵌套。
<ol>
<li>列表一</li>
<li>列表二</li>
</ol>屬性：
<ol>的屬性type擁有的選項(xiàng)
- 1? ? ? ? 表示列表項(xiàng)目用數(shù)組標(biāo)號（1,2,3,4）
- a? ? ? ? 表示列表項(xiàng)目用小寫字母標(biāo)號（a,b,c,d）
- A? ? ? ? 表示列表項(xiàng)目用大寫字母標(biāo)號（A,B,C,D）
- i? ? ? ? 表示列表項(xiàng)目用小寫羅馬數(shù)字標(biāo)號（i,ii,iii）
- I? ? ? ? 表示列表項(xiàng)目用大寫羅馬數(shù)字標(biāo)號（I,II,III）
無序列表
無序列表是一個項(xiàng)目的列表，此列項(xiàng)目使用粗體圓點(diǎn)（典型的小黑圓點(diǎn)）進(jìn)行標(biāo)記
無序列表始于<ul>標(biāo)簽，每個列表項(xiàng)始于<li>標(biāo)簽。
無序列表可以嵌套。
<ul>
<li>列表一</li>
<li>列表二</li>
</ul>屬性type擁有的選項(xiàng)：
- disc? ? ? ? 默認(rèn)實(shí)心圓
- circle? ? ? ? 空心圓
- square? ? ? ?小方塊
- none? ? ? ?不顯示
常見引用場景：
- 無序的列表效果
- 導(dǎo)航效果
快捷鍵：
快速生成ul+li布局：ul>li*3（數(shù)字根據(jù)自己的需要的li的數(shù)量修改）
表格
表格在數(shù)據(jù)展示方面非常簡單。
表格組成與特點(diǎn)：行、列、單元格（同行等高，同列等寬）
表格標(biāo)簽：
表格??????????????????? ? <table>
行? ? ????????????????? ? ?<tr>
單元格（列）? ? ? ? <td>
快捷鍵：
快速生成表格結(jié)構(gòu)：table>tr*2>td{單元格}
表格屬性：
- border：設(shè)置表格邊框
- width：設(shè)置表格的寬度
- height：設(shè)置表格的高度
單元格合并
水平合并：colspan（保留左邊，刪除右邊）
垂直合并：rowspan（保留上邊，刪除下邊）
<td colspan="2">單元格</td>表單
表單在Web網(wǎng)頁中用來個用戶填寫信息，從而能采集用戶信息，使網(wǎng)頁具有交互的功能
所有的用戶輸入內(nèi)容的地方都用表單來寫，如登錄注冊搜索框。
表單是由容器和控件組成，一個表單一般應(yīng)該包括用戶填寫信息的輸入框和按鈕（控件）等，表單就是容器，它能夠容納各種各樣的控件。
<form action="url" method="get|post" name="myform"></form>屬性：
action? ? ? ? 服務(wù)器地址
name? ? ? ? 表單名稱
method中Get和Post的區(qū)別:
- 數(shù)據(jù)提交方式，get把提交的數(shù)據(jù)url可以看到，post看不到
- get一般用于提交少量數(shù)據(jù)，post用來提交大量數(shù)據(jù)
表單元素——三個基本組成部分：表單標(biāo)簽、表單域、表單按鈕
<form>
<input type="text">
<input type="submit">
<button>按鈕</button>
</form>文本框
文本域通過<input type="text">標(biāo)簽來設(shè)定。
當(dāng)用戶要在表單中鍵入字母、數(shù)字等內(nèi)容時，要用到文本域。
<form>
First name:<input type="text" name="firstName">
<br>
Last name:<input type="text" name="lastName">
</form>密碼框
密碼字段通過標(biāo)簽<input type="password">來定義
密碼字段不會明文顯示，而是以星號或圓點(diǎn)替代。
<form>
Password:<input type="password" name="pwd">
</form>提交按鈕
當(dāng)用戶單擊確認(rèn)按鈕時，表單的內(nèi)容會被傳送到另一個文件，表單的動作屬于定義了目的文件的文件名，由動作屬性定義的這個文件通常會接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。
<form name="input" action="url" method="get">
Username:<input type="text" name="Submit">
<input type="submit" value="Submit">
</form>塊元素與行內(nèi)元素
HTML5出現(xiàn)之前，把元素按照塊級元素和內(nèi)聯(lián)元素來區(qū)分，HRML中元素按照內(nèi)容模型來區(qū)分，分為元數(shù)據(jù)型，區(qū)塊型，標(biāo)題型，文檔流型，語句型，內(nèi)嵌型，交互型。元素不屬于任何一個類別，被稱為穿透的，元素可能屬于不止一個類別，稱為混合的。
內(nèi)聯(lián)元素和塊級元素的區(qū)別：
塊級元素
- 塊元素會在頁面中獨(dú)占一行（自上向下垂直排列）
- 可設(shè)置width，height屬性
- 一般會計元素可以包含行內(nèi)元素和其他塊級元素
內(nèi)聯(lián)元素
- 行內(nèi)元素不會獨(dú)占頁面中的一行，只占自身的大小
- 行內(nèi)元素設(shè)置width，height屬性無效
- 一般內(nèi)聯(lián)元素包含內(nèi)聯(lián)元素，不包含塊級元素
常見塊級元素：div、form、h1~h6、hr、p、table、ul等
常見內(nèi)聯(lián)元素：a、b、em、i、span、strong等
行內(nèi)塊級元素（特點(diǎn)：不換行、能夠識別寬高）：button、img、input等
新增標(biāo)簽
div容器元素，是頁面中見到的最多的元素文章來源：http://www.zghlxwxcb.cn/news/detail-478673.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-478673.html
- <header></header>頭部
- <nav></nav>導(dǎo)航
- <section></section>定義文檔中的節(jié)，麗麗如章節(jié)、頁眉、頁腳
- <aside></aside>側(cè)邊欄
- ?<footer></footer>腳部
- <article></article>代表一個獨(dú)立的、完整的相關(guān)內(nèi)容塊，例如一篇完整的論壇帖子，一篇博客文章，一個用戶評論等
到了這里，關(guān)于html5前端學(xué)習(xí)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
