常用HTML元素及其屬性：
根元素
1. <html>HTML文檔根元素
屬性：lang(全局屬性),設(shè)置整個(gè)html文檔的語言
lang="en"(英語) lang="zh-CN"(中文)
2.HTML文檔元數(shù)據(jù)
-
<link>常用于引入外部CSS
<link rel="stylesheet" href="style.css">
屬性：rel是relation的縮寫田盈。它指定了標(biāo)簽和href之間的關(guān)系颗品。
-
<meta>metadata元數(shù)據(jù)信息牺蹄。
meta可以包含很多的信息記住一些常用的就行
①<meta charset="utf-8">
聲明當(dāng)前文檔的字符編碼方式
②<meta name="viewport" content="width=device-width, initial-scale=1.0">
移動(dòng)端適配
initial-scale一個(gè)0.0 到10.0之間的正數(shù),定義設(shè)備寬度（縱向設(shè)備寬度或橫向設(shè)備高度）與視口大小之間的縮放比率稠集。
③<meta http-equiv="X-UA-Compatible" content="ie=edge">
兼容IE(6,7,8)
④<meta name="description" content="A description of the page" >
添加頁(yè)面描述，有利于搜索引擎優(yōu)化(SEO)
⑤
<meta name="referrer" content="no-referrer">不要發(fā)送 HTTP Referer 首部库糠。
3. HTML內(nèi)容分區(qū)
<main>
呈現(xiàn)了文檔<body>或應(yīng)用的主體部分滤灯，不包含任何在一系列文檔中重復(fù)的內(nèi)容，比如側(cè)邊欄曼玩，導(dǎo)航欄鏈接，版權(quán)信息窒百，網(wǎng)站logo等
<header>
不難理解就是頭部黍判，主要是用來放置網(wǎng)站的刊頭，固定會(huì)重覆出現(xiàn)的導(dǎo)航篙梢、LOGO顷帖、站名等內(nèi)容。
<aside>
側(cè)欄渤滞，網(wǎng)頁(yè)中非主要區(qū)域的地方贬墩，常見放廣告及導(dǎo)覽、全站檢索的地方
<footer>
頁(yè)腳妄呕，一般位于網(wǎng)頁(yè)最后的位置陶舞，一個(gè)獨(dú)立的部分，通常包含該章節(jié)作者绪励、版權(quán)數(shù)據(jù)或者與文檔相關(guān)的鏈接等信息
<nav>
導(dǎo)航欄 (nav) 肿孵，一個(gè)含有多個(gè)超鏈接的區(qū)域唠粥，這個(gè)區(qū)域包含轉(zhuǎn)到其他頁(yè)面，或者頁(yè)面內(nèi)部其他部分的鏈接列表.
<section>
表示文檔中的一個(gè)區(qū)域（或節(jié)）停做，內(nèi)容中的一個(gè)專題組晤愧，一般會(huì)有包含一個(gè)標(biāo)題(更多是從語義化角度考慮)
4. HTML文本內(nèi)容
<ul> <li>(常用于頁(yè)面布局)
ul：unorder list無序列表 li：list 項(xiàng)目
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
<dl> <dt> <dd>
dl：definite list定義列表 dt：definite title定義標(biāo)題 dd：definite description定義描述
<dl>
<dt>kobe</dt>
<dd>NBA champion</dd>
<dd>NBA STAR</dd>
</dl>
<figure> <figcaption> (常與<img>配合使用)
figcaption元素 是與其相關(guān)聯(lián)的圖片的說明/標(biāo)題，
<figure>
<img src="url" alt="description">
<figcaption>圖片的說明/標(biāo)題</figcaption>
</figure>
<hr>
<hr width="200px">
一條水平線蛉腌，可以通過width的值官份，設(shè)置其長(zhǎng)度
5. HTML表格元素
<table> <thead> <tbody> <tfoot> <td> <th> <tr> <colgroup> <col>
注意區(qū)分
<tr> <th> <td> tr：table row(表格行)包裹 th td，th：table header cell(表頭單元格) td： table data cell（表中的數(shù)據(jù)單元）
<colgroup>
<col width="100">
<col width="100">
<col width="80">
<col width="50">
</colgroup>
置于<table></table>中烙丛， <col>的width屬性可設(shè)置每一列的寬度(html5中已廢棄舅巷，不建議使用)
<table border="1px" style="border-collapse:collapse">合并邊框
border-collapseCSS屬性是用來決定表格的邊框是分開的還是合并的。在分隔模式下蜀变，相鄰的單元格都擁有獨(dú)立的邊框悄谐。在合并模式下，相鄰單元格共享邊框库北。
通過查看下面代碼爬舰，就能了解常用的表格元素的用法
代碼
6. 表單元素
表單元素的重要性不言而喻，請(qǐng)點(diǎn)擊查看之前的一篇文章
7. 其他HTML重要常用元素
<a> 很重要 很重要 很重要
錨(anchor)元素可以創(chuàng)建一個(gè)到其他網(wǎng)頁(yè)寒瓦、文件情屹、同一頁(yè)面內(nèi)的位置、電子郵件地址或任何其他URL的超鏈接杂腰。
href
1??相對(duì)路徑
2??http://
3??https://
4??//xxx.com
5??#
6??javascript:;
時(shí)垃你，表示無協(xié)議，自動(dòng)繼承當(dāng)前頁(yè)面的協(xié)議喂很。
href="#"(哈希標(biāo)記),
<a href="#">返回頂部</a> 返回頂部
href="#attr",當(dāng)某一元素的id的值為attr惜颇，點(diǎn)擊點(diǎn)擊返回元素id為attr所在的區(qū)域。
javascript:; 點(diǎn)擊鏈接的時(shí)候不會(huì)有任何反應(yīng)
<a href="javascript:;">點(diǎn)擊</a>
7??a的target的值等于<iframe>的name屬性的值少辣，且<iframe>的src="#"(即為當(dāng)前頁(yè)面地址)
<iframe name="xxx" src="#" frameborder="0"></iframe>
<a target="xxx">打開百度</a>
在頁(yè)面上
<iframe>框架中打開網(wǎng)頁(yè)凌摄。target
_blank (blank空白) 在新開的窗口打開網(wǎng)頁(yè)。<a target="_blank">blank打開百度</a>點(diǎn)擊上面的鏈接新開窗口打開百度漓帅。
a標(biāo)簽target的其他屬性_top _self _parent結(jié)合<iframe>的使用首先在同一個(gè)目錄建立三個(gè)html文檔
son.html papa.html grandfather.html代碼分別如下：
<body>
我自己
<a target="_self">self</a>
<a target="_parent">parent</a>
<a target="_top">top</a>
</body>
parent.html引入son.html,形成父子引入關(guān)系锨亏，所以當(dāng)前頁(yè)面也就是parent.html所打開的頁(yè)面
<body>
papa
<iframe src="./son.html" frameborder="0"></iframe>
</body>
grandfather.html引入papa.html,加之之前的parent.html引入son.html,所有構(gòu)成三個(gè)html文檔的三代關(guān)系
<body>
grandfather
<iframe src="./papa.html" frameborder="0"></iframe>
</body>
點(diǎn)擊target="_self的son鏈接，只在son.html頁(yè)面本身窗口打開忙干。
點(diǎn)擊target="_parent的parent鏈接器予，會(huì)在son.html的父輩parent.html頁(yè)面打開
點(diǎn)擊
target="_top的parent鏈接，會(huì)在son.html的祖先grandparents.html頁(yè)面打開
總結(jié)：target="_top(祖先窗口打開)捐迫，target="_parent(父親窗口打開)乾翔，target="_self(自身窗口打開)，self="_blank"(新開窗口)施戴，結(jié)合字母意思以及自己寫一個(gè)demo驗(yàn)證末融，基本不會(huì)忘記
download
href為下載地址钧惧，指示瀏覽器下載URL而不是導(dǎo)航到它
<a href="downloading address" download>點(diǎn)擊下載</a>
<img>元素，代表文檔中一個(gè)圖像(image)
<img src="https://www.baidu.com/img/bd_logo1.png" alt="百度" title="百度一下">
頁(yè)面展示顯示的百度的logo
src：圖像的 URL(不是href勾习，不是href)浓瞪，這個(gè)屬性對(duì) <img> 元素來說是必需的。
alt：圖像的替換文本巧婶，如果url地址錯(cuò)誤乾颁，將會(huì)向用戶展示alt設(shè)置的值，強(qiáng)烈建議不要省略該屬性
title：當(dāng)鼠標(biāo)懸停在圖上一段時(shí)間時(shí)會(huì)顯示title所賦的屬性值
注： <img> 是一個(gè)替換inline元素艺栈。它沒有基線英岭，這意味著當(dāng)在一個(gè)行內(nèi)格式的上下文中使用時(shí)，默認(rèn)是基線(baseline)對(duì)齊(vertical-align: baseline),這時(shí)候圖片下方就會(huì)出現(xiàn)縫隙
div {
width: 50%;
font-size: 30px;
border: 1px solid blue;
}
img {
width: 200px;
height:100px;
vertical-align:middle;
/* 去掉img樣式vertical-align:middle(不為baseline的其他值也行)若是設(shè)置為baseline湿右，則縫隙又會(huì)出現(xiàn)
*/
}
<span> 元素是短語內(nèi)容的通用行內(nèi)容器
沒有任何特殊語義诅妹，不會(huì)對(duì)包裹的文本有任何影響，用戶為文本內(nèi)容隔離出一個(gè)單獨(dú)的不受外界干擾的空間毅人，是行內(nèi)元素吭狡。
<br>在文本中生成一個(gè)換行（回車）符號(hào)
<strong> <em> <i>
<em>: emphasize(強(qiáng)調(diào))
<i>: Italic(斜體)
字面上就能了解這幾個(gè)元素的作用：
<em>標(biāo)記出需要用戶著重閱讀的內(nèi)容；<strong>表示文本十分重要丈莺，一般用粗體顯示划煮；<i>用于表現(xiàn)因某些原因需要區(qū)分普通文本的一系列文本用斜體表示。
參考：
www.w3.org
HTML 元素參考
meta MDN
html HEAD
版權(quán)聲明：本文為博主原創(chuàng)文章缔俄，未經(jīng)博主許可不得轉(zhuǎn)載
