常用HTML元素及其属性：
根元素
1. <html>HTML文档根元素
属性：lang(全局属性),设置整个html文档的语言
lang="en"(英语) lang="zh-CN"(中文)
2.HTML文档元数据
-
<link>常用于引入外部CSS
<link rel="stylesheet" href="style.css">
属性：rel是relation的缩写。它指定了标签和href之间的关系。
-
<meta>metadata元数据信息。
meta可以包含很多的信息记住一些常用的就行
①<meta charset="utf-8">
声明当前文档的字符编码方式
②<meta name="viewport" content="width=device-width, initial-scale=1.0">
移动端适配
initial-scale一个0.0 到10.0之间的正数,定义设备宽度（纵向设备宽度或横向设备高度）与视口大小之间的缩放比率。
③<meta http-equiv="X-UA-Compatible" content="ie=edge">
兼容IE(6,7,8)
④<meta name="description" content="A description of the page" >
添加页面描述，有利于搜索引擎优化(SEO)
⑤
<meta name="referrer" content="no-referrer">不要发送 HTTP Referer 首部。
3. HTML内容分区
<main>
呈现了文档<body>或应用的主体部分，不包含任何在一系列文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站logo等
<header>
不难理解就是头部，主要是用来放置网站的刊头，固定会重覆出现的导航、LOGO、站名等内容。
<aside>
侧栏，网页中非主要区域的地方，常见放广告及导览、全站检索的地方
<footer>
页脚，一般位于网页最后的位置，一个独立的部分，通常包含该章节作者、版权数据或者与文档相关的链接等信息
<nav>
导航栏 (nav) ，一个含有多个超链接的区域，这个区域包含转到其他页面，或者页面内部其他部分的链接列表.
<section>
表示文档中的一个区域（或节），内容中的一个专题组，一般会有包含一个标题(更多是从语义化角度考虑)
4. HTML文本内容
<ul> <li>(常用于页面布局)
ul：unorder list无序列表 li：list 项目
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
<dl> <dt> <dd>
dl：definite list定义列表 dt：definite title定义标题 dd：definite description定义描述
<dl>
<dt>kobe</dt>
<dd>NBA champion</dd>
<dd>NBA STAR</dd>
</dl>
<figure> <figcaption> (常与<img>配合使用)
figcaption元素 是与其相关联的图片的说明/标题，
<figure>
<img src="url" alt="description">
<figcaption>图片的说明/标题</figcaption>
</figure>
<hr>
<hr width="200px">
一条水平线，可以通过width的值，设置其长度
5. HTML表格元素
<table> <thead> <tbody> <tfoot> <td> <th> <tr> <colgroup> <col>
注意区分
<tr> <th> <td> tr：table row(表格行)包裹 th td，th：table header cell(表头单元格) td： table data cell（表中的数据单元）
<colgroup>
<col width="100">
<col width="100">
<col width="80">
<col width="50">
</colgroup>
置于<table></table>中， <col>的width属性可设置每一列的宽度(html5中已废弃，不建议使用)
<table border="1px" style="border-collapse:collapse">合并边框
border-collapseCSS属性是用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。
通过查看下面代码，就能了解常用的表格元素的用法
代码
6. 表单元素
表单元素的重要性不言而喻，请点击查看之前的一篇文章
7. 其他HTML重要常用元素
<a> 很重要 很重要 很重要
锚(anchor)元素可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。
href
1️⃣相对路径
2️⃣http://
3️⃣https://
4️⃣//xxx.com
5️⃣#
6️⃣javascript:;
href="//xxx.com"时，表示无协议，自动继承当前页面的协议。
href="#"(哈希标记),
<a href="#">返回顶部</a> 返回顶部
href="#attr",当某一元素的id的值为attr，点击点击返回元素id为attr所在的区域。
javascript:; 点击链接的时候不会有任何反应
<a href="javascript:;">点击</a>
7️⃣a的target的值等于<iframe>的name属性的值，且<iframe>的src="#"(即为当前页面地址)
<iframe name="xxx" src="#" frameborder="0"></iframe>
<a href="https://www.baidu.com/" target="xxx">打开百度</a>
在页面上
<iframe>框架中打开网页。target
_blank (blank空白) 在新开的窗口打开网页。<a href="https://www.baidu.com/" target="_blank">blank打开百度</a>点击上面的链接新开窗口打开百度。
a标签target的其他属性_top _self _parent结合<iframe>的使用首先在同一个目录建立三个html文档
son.html papa.html grandfather.html代码分别如下：
<body>
我自己
<a href="https://www.baidu.com/" target="_self">self</a>
<a href="https://www.baidu.com/" target="_parent">parent</a>
<a href="https://www.baidu.com/" target="_top">top</a>
</body>
parent.html引入son.html,形成父子引入关系，所以当前页面也就是parent.html所打开的页面
<body>
papa
<iframe src="./son.html" frameborder="0"></iframe>
</body>
grandfather.html引入papa.html,加之之前的parent.html引入son.html,所有构成三个html文档的三代关系
<body>
grandfather
<iframe src="./papa.html" frameborder="0"></iframe>
</body>
点击target="_self的son链接，只在son.html页面本身窗口打开。
点击target="_parent的parent链接，会在son.html的父辈parent.html页面打开
点击
target="_top的parent链接，会在son.html的祖先grandparents.html页面打开
总结：target="_top(祖先窗口打开)，target="_parent(父亲窗口打开)，target="_self(自身窗口打开)，self="_blank"(新开窗口)，结合字母意思以及自己写一个demo验证，基本不会忘记
download
href为下载地址，指示浏览器下载URL而不是导航到它
<a href="downloading address" download>点击下载</a>
<img>元素，代表文档中一个图像(image)
<img src="https://www.baidu.com/img/bd_logo1.png" alt="百度" title="百度一下">
页面展示显示的百度的logo
src：图像的 URL(不是href，不是href)，这个属性对 <img> 元素来说是必需的。
alt：图像的替换文本，如果url地址错误，将会向用户展示alt设置的值，强烈建议不要省略该属性
title：当鼠标悬停在图上一段时间时会显示title所赋的属性值
注： <img> 是一个替换inline元素。它没有基线，这意味着当在一个行内格式的上下文中使用时，默认是基线(baseline)对齐(vertical-align: baseline),这时候图片下方就会出现缝隙
div {
width: 50%;
font-size: 30px;
border: 1px solid blue;
}
img {
width: 200px;
height:100px;
vertical-align:middle;
/* 去掉img样式vertical-align:middle(不为baseline的其他值也行)若是设置为baseline，则缝隙又会出现
*/
}
<span> 元素是短语内容的通用行内容器
没有任何特殊语义，不会对包裹的文本有任何影响，用户为文本内容隔离出一个单独的不受外界干扰的空间，是行内元素。
<br>在文本中生成一个换行（回车）符号
<strong> <em> <i>
<em>: emphasize(强调)
<i>: Italic(斜体)
字面上就能了解这几个元素的作用：
<em>标记出需要用户着重阅读的内容；<strong>表示文本十分重要，一般用粗体显示；<i>用于表现因某些原因需要区分普通文本的一系列文本用斜体表示。
参考：
www.w3.org
HTML 元素参考
meta MDN
html HEAD
版权声明：本文为博主原创文章，未经博主许可不得转载
