簡介
什么是HTML
- HTML 是 HyperText Mark-up Language 的首字母簡寫嘉抓，意思是 超文本標(biāo)記語言。
超文本：文檔內(nèi)可鏈接其他文檔外的內(nèi)容夕吻，使得此文本可以寫入除文本外的例如圖片啡氢、視頻等內(nèi)容
標(biāo)記語言：用一個一個標(biāo)簽組成的，可以讓計算機讀懂的語言掰曾。
- 計算機讀取后會將 HTML 寫的內(nèi)容以另一種方式顯示在瀏覽器上。
HTML 基礎(chǔ)語法
HTML 基礎(chǔ)結(jié)構(gòu)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
- head 的內(nèi)容是對網(wǎng)頁文檔作輔助說明的停团。
- body 的內(nèi)容是對網(wǎng)頁內(nèi)容進行呈現(xiàn)的旷坦。
- HTML 都是由 標(biāo)簽 和 標(biāo)簽內(nèi)的內(nèi)容 組合而成的
標(biāo)簽 分為 單標(biāo)簽 和 雙標(biāo)簽 掏熬，單標(biāo)簽例如
<hr/> <br/>，雙標(biāo)簽例如<div></div> <p></p>
HTML 注釋
- 尖括號里面秒梅，感嘆號 ! 開頭旗芬，兩邊兩個斜杠結(jié)尾 -- --
<!-- 這里寫注釋 -->
HTML 中 head 頭部設(shè)置
- head 標(biāo)簽作用于網(wǎng)頁的頭部，它的內(nèi)容不會在正文中顯示出來捆蜀，主要完成對當(dāng)前頁面的各種設(shè)置疮丛。
- 在 head 中常包含如下子標(biāo)簽：
| 標(biāo)簽 | 描述 | 示例 |
|---|---|---|
<title> |
定義了文檔的標(biāo)題 | <title>本網(wǎng)頁標(biāo)題</title> |
<meta> |
定義了 HTML 文檔中的元數(shù)據(jù) | 元數(shù)據(jù)包括編碼 charset，關(guān)鍵字 keywords 辆它，描述 description |
<style> |
定義了 HTML 文檔的內(nèi)聯(lián)樣式 | |
<script> |
定義了客戶端的腳本文件 | |
<link> |
定義了一個文檔和外部資源之間的關(guān)系 | 通常用來引入外部樣式表 |
<base> |
定義了頁面鏈接標(biāo)簽的默認鏈接地址 |
HTML 標(biāo)簽
span 標(biāo)簽
- 常用于包含文本誊薄，用來組合文檔中的行內(nèi)元素。
<span></span>
h系列標(biāo)簽 （headline 大字標(biāo)題）
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
p標(biāo)簽 （paragraph 段落）
<p></p>
?警告： p標(biāo)簽不能嵌套其他塊級元素標(biāo)簽锰茉，如果嵌套呢蔫，瀏覽器將會強制把一個p標(biāo)簽拆成兩個。
div 標(biāo)簽（division 分割）
- 用來將相關(guān)內(nèi)容組合到一起飒筑，以便和其他內(nèi)容分割片吊，div+css 是網(wǎng)頁常見的布局方式。
<div></div>
列表標(biāo)簽
- h5規(guī)范：li 不能單獨使用协屡，只能放在 ul 或 ol 標(biāo)簽內(nèi)俏脊，同理，ul 的次級子標(biāo)簽只能是 li 肤晓，li 內(nèi)可以嵌套其他標(biāo)簽爷贫。
無序列表 ul （unordered list）
<ul>
<li></li>
<li></li>
</ul>
- ul 的 type 屬性：（?警告：涉及樣式內(nèi)容請在css中表達樣式）
- disc 實心圓（默認）
- circle 空心圓
- square 實心方塊
有序列表 ol （ordered list）
<ol>
<li></li>
<li></li>
</ol>
- ol 的 type 屬性：（?警告：涉及樣式內(nèi)容請在css中表達樣式）
- 1 阿拉伯?dāng)?shù)字編號（默認）
- a 小寫英文字母編號
- A 大寫英文字母編號
- i 小寫羅馬數(shù)字編號
- I 大寫羅馬數(shù)字編號
- start 屬性：必須是一個整數(shù)，代表有序編號起始值材原。
- reversed 屬性：編號是否倒序沸久。
定義列表 dl （definition list）
由 dt （data term）數(shù)據(jù)項，和 dd （data definition）數(shù)據(jù)定義 構(gòu)成
<dl>
<dt></dt>
<dd></dd>
</dl>
table 表格標(biāo)簽
- table表格余蟹，tr （table row）表格行卷胯，然后每個行分出多少個表格數(shù)據(jù)格td（table data），th（table headline）標(biāo)題標(biāo)題格威酒。例如：
<table border="" cellspacing="" cellpadding="">
<tr><th>Header</th></tr>
<tbody><tr><td>Data</td></tr></tbody> //tbody瀏覽器會自動加上
</table>
- 表格中的標(biāo)簽：
| 表格 | 描述 | 屬性 |
|---|---|---|
| <table> | 定義表格 | cellspacing格與格之間的間隙窑睁，cellpadding格子內(nèi)邊距,width寬度 |
| <caption> | 定義表格標(biāo)題 | align排列方式 |
| <tr> | 定義表格的行 | align，valign葵孤，bgcolor |
| <th> | 定義表格的表頭 | align担钮，valign，bgcolor尤仍、rospan箫津、colspan、width、height |
| <td> | 定義表格單元格 | align苏遥，valign饼拍，bgcolor、rospan田炭、colspan师抄、width、height |
| <thead> | 定義表格的頁眉 | align教硫，valign叨吮，bgcolor |
| <tbody> | 定義表格的主體 | align，valign瞬矩，bgcolor |
| <tbody> | 定義表格的頁腳 | align茶鉴，valign，bgcolor |
- rowspan 屬性：設(shè)置td或th行跨度丧鸯，永遠是右邊合并去左邊
- colspan 屬性：設(shè)置td或th列跨度蛤铜，永遠是下邊合并去上邊
- align屬性：水平方向?qū)R方式
- valign屬性：垂直方向?qū)R方式
form 表單標(biāo)簽
<form action="./" method="get">
<input type="text"/>
<input type="password"/>
<input type="submit" value="submit"/>
<input type="reset" value="reset"/>
</form>
form標(biāo)簽屬性：
- action 屬性：表示表單要提交到的url的地址。
- method 屬性：表示表單提交的方式丛肢，有 get 和 post 围肥。
- enctype 屬性：提交的類型，有
application/x-www-form-urlencoded蜂怎、multipart/form-data穆刻、text/plain - target 屬性：以何種方式打開發(fā)送到的頁面。
- name 屬性：給表單起個名字杠步。
input 標(biāo)簽
- type屬性：常用值text單行文本氢伟，password密碼框，radio單選按鈕幽歼，checkbox多選按鈕朵锣，button普通按鈕，submit提交甸私，reset重置诚些。
- value屬性：表示input的內(nèi)容值。
- placeholder屬性：提示文本皇型，以淺色字表現(xiàn)在文本框中诬烹，不是框中值。
- disabled屬性：禁用帶有該屬性的input弃鸦。
- required屬性：帶有該屬性的input必須填寫內(nèi)容绞吁。
input 的 type 類型
-
type="text"時，變?yōu)槲谋究蚧８瘢籿alue屬性家破，表示框內(nèi)的值颜说。
<input type="text" value="" />
-
type="password"時，變?yōu)槊艽a輸入框员舵。
<input type="password" />
-
type="radio"時脑沿，變?yōu)閱芜x按鈕，提交的是value的值马僻，相同name的radio會互斥，帶有checked屬性默認選中注服。
<input type="radio" value="" name="" checked/>
label標(biāo)簽韭邓，將label標(biāo)簽內(nèi)的內(nèi)容與ID相同的input標(biāo)簽綁定
<input type="radio" id="ID名"/> <label for="ID名">123</label>
-
type="checkbox"時，變?yōu)槎噙x按鈕溶弟，提交的是value值女淑。
<input type="checkbox" value="" />
-
type="file"文件選擇控件 -
type="hidden"定義隱藏的輸入字段，value隱藏在表單內(nèi)一起提交
按鈕
- type="submit"辜御、"reset"鸭你、"button"時，分別為提交按鈕擒权，重置按鈕袱巨，普通按鈕，value值為按鈕內(nèi)顯示的文本碳抄，提交按鈕和重置按鈕直接帶有動作愉老。type="image"定義圖像形式的提交按鈕。
<input type="submit" value="submit按鈕顯示的文本" />
<input type="reset" value="reset按鈕顯示的文本" />
<input type="button" value="111" />
<input type="image" src="./img.jpg" />
- button標(biāo)簽更為靈活剖效，因為是雙標(biāo)簽嫉入，里面可定義文本及圖片等更多內(nèi)容。
<button type="button"></button>
input 的 html5 新增 type 類型
| type值 | 作用 |
|---|---|
| multiple | 多文件上傳 |
| date璧尸、time | 日期咒林，時間選擇 |
| datetime、datetime-local | 定義日期字段（帶有time控件） |
| month爷光、week | 定義日期字段的月垫竞、周 |
| 電子郵件輸入控件（自動檢測郵件規(guī)則） | |
| url | 網(wǎng)址輸入控件（自動檢測網(wǎng)址規(guī)則） |
| number | 數(shù)字輸入控件，可用max和min屬性設(shè)最大最小值 |
| search | 搜索框瞎颗，輸入內(nèi)容后會有清空按鍵 |
| color | 顏色選擇 |
| range | 拖拽條件甥，可max和min，step規(guī)定合法數(shù)字間隔哼拔，value規(guī)定默認值 |
| tel | 電話號碼的文本字段 |
select 標(biāo)簽
- 下拉菜單select標(biāo)簽引有，里面嵌套option標(biāo)簽代表下拉菜單里的選項，帶有selected屬性的默認被選中倦逐。
- 提交的是value值譬正，顯示內(nèi)容是option標(biāo)簽里面寫的內(nèi)容
- 可用optgroup進行分組
<select name="">
<option value=""></option>
<option value="" selected=""></option>
</select>
textarea標(biāo)簽
- textarea多行文本框宫补；
- rows和cols屬性：用來定義多行文本框的顯示上的行數(shù)和列數(shù)（顯示上）。
- style里的resize:none：禁止拉伸曾我。
<textarea rows="" cols=""></textarea>
datalist標(biāo)簽
input標(biāo)簽添加list屬性后粉怕，通過datalist控件，可為輸入框提供備選項抒巢，并有模糊智能感應(yīng)贫贝。
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
a 標(biāo)簽，超級鏈接標(biāo)簽
- anchor錨蛉谜，在哪里有什么稚晚。
<a href="" ></a>
a 標(biāo)簽常用屬性：
- href 屬性：hypertext reference 超文本引用。支持相對路徑和絕對路徑型诚。
路徑：
相對路徑：描述從標(biāo)簽所在的文件出發(fā)客燕，如何找到文件，回退層級用 ../ 寫法狰贯。
絕對路徑：描述文件的精準(zhǔn)地址也搓。
- title 屬性：文字提示屬性，常用來設(shè)置鼠標(biāo)懸停文本涵紊。
- target 屬性：表示鏈接打開的方式傍妒，常用值有：
_self本窗口（默認）
_blank新窗口
_parent父窗口
_top頂級窗口
- 錨點跳轉(zhuǎn)：href 屬性值為 #top 可跳轉(zhuǎn)到頁面頂部，也可以為其他標(biāo)簽的id栖袋，#其他id 跳轉(zhuǎn)至這個id的標(biāo)簽處拍顷。
- 下載鏈接：當(dāng) href 指向文件（exe、zip塘幅、rar）等昔案，將自動成為下載鏈接。
- 郵件鏈接电媳、電話鏈接：
<a href="mailto:me@test.com">發(fā)郵件</a>
<a href="tel:12306">打電話</a>
iframe 標(biāo)簽
<iframe src="https://www.baidu.com" name="frame1" frameborder=""></iframe>
- iframe 元素會創(chuàng)建包含另外一個文檔的內(nèi)聯(lián)框架（即行內(nèi)框架）踏揣。
- ifame 常用屬性
| 屬性名 | 作用 |
|---|---|
| src | iframe中顯示的文檔的url |
| name | 規(guī)定iframe的名稱,a標(biāo)簽的target可以指向 |
| frameborder | 規(guī)定是否顯示框架周圍的邊框，值為0或1 |
img 圖像標(biāo)簽
<img src="./img1.jpg" alt="這是提示文字" title="文字提示"/>
- 在HTML 網(wǎng)頁中插入一張圖片匾乓，使用 img 標(biāo)簽捞稿，它是一個單標(biāo)簽
<img/> - 網(wǎng)頁上支持的圖片格式：.jpeg(jpg)、.png拼缝、.gif娱局、.webp、.svg咧七、.bmp
img 標(biāo)簽常用屬性：
- src 屬性：source 來源衰齐，路徑地址。
- alt 屬性：alternate 替代品继阻，如果無法加載圖像耻涛，會顯示 alt 屬性中的備用文本废酷，以及網(wǎng)頁朗讀器應(yīng)用。
- title 屬性：文字提示屬性抹缕。
- width 屬性：圖片寬度澈蟆。
- height 屬性：圖片高度。
- border 屬性：邊框線粗細卓研。
（?警告：4趴俘、5、6涉及樣式內(nèi)容請在css中表達樣式）
audio 音頻標(biāo)簽
<audio src="" >
不兼容顯示文字
</audio>
//或者用sourse標(biāo)簽引入文件
<audio>
<sourse src="" type=""></sourse>
不兼容顯示文字
</audio>
- autoplay屬性：開啟自動播放鉴分。
- control屬性：顯示播放控件哮幢。
- loop屬性：開啟循環(huán)。
- src屬性：音頻的url地址志珍。
video 視頻標(biāo)簽
<video width="800" height="">
<source src="myvideo.mp4" type="video/mp4"></source>
<source src="myvideo.ogv" type="video/ogg"></source>
<source src="myvideo.webm" type="video/webm"></source>
<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
<param name="movie" value="myvideo.swf" />
<param name="flashvars" value="autostart=true&file=myvideo.swf" />
</object>
當(dāng)前瀏覽器不支持 video直接播放，點擊這里下載視頻： <a href="myvideo.webm">下載視頻</a>
</video>
上面為Hbuilder自動生成多格式視頻兼容寫法垛叨，從上到下找可播放格式伦糯，找到然后播放。
- autoplay屬性：開啟自動播放嗽元。
- control屬性：顯示播放控件敛纲。
- loop屬性：開啟循環(huán)。
- src屬性：音頻的url地址剂癌。
- muted屬性：規(guī)定視頻的音頻輸出應(yīng)該被靜音
- poster屬性：視頻下載時或者播放前顯示的封面
HTML 文本修飾標(biāo)簽
- 常用文本修飾標(biāo)簽如下
| 標(biāo)簽 | 作用 |
|---|---|
<i>...</i> |
斜體 |
<em>...</em> |
強調(diào)斜體 |
<b>...</b> |
加粗 |
<strong>...</strong> |
強調(diào)加粗 |
<u>...</u> |
underline 下劃線標(biāo)簽 |
<sub>...</sub> 和 <sup>...</sup>
|
sub 下標(biāo)淤翔，sup 上標(biāo) |
<cite>...</cite> |
作品的標(biāo)題，表現(xiàn)形式為斜體 |
<del>...</del> |
刪除線 |
?警告： 以上對文本修飾的標(biāo)簽開發(fā)中使用 reset.css 已不再呈現(xiàn)樣式佩谷，僅代表語義旁壮。后續(xù)用來當(dāng)精靈圖，開啟position后設(shè)置寬高谐檀。
HTML5 新增語義化布局標(biāo)簽
| 標(biāo)簽 | |
|---|---|
| <header> | 定義文檔的頁眉 |
| <main> | 定義網(wǎng)頁核心內(nèi)容 |
| <footer> | 定義文檔或者節(jié)的頁腳/頂部 |
| <nav> | 定義導(dǎo)航鏈接部分 |
| <article> | 定義文章 |
| <section> | 定義文檔中的節(jié)（section/段落） |
| <aside> | 定義其所處內(nèi)容之外的內(nèi)容/側(cè)邊 |
