框架用多了，css写顺手了，写html只会div了（悲），css也由于公司只搞死板的WMS系统，对一些新兴的样式属性一窍不通。
原生是根啊，不能只会框架，那样人是飘在天上的。
虽说近期也有意识到这个问题，时常抱着mdn了解h5语义化与css3属性相关，但还是有些许亿点遗漏。在此记录一下各种原因了解到的一些不太熟悉的属性/标签。
前言
本文由HTML 教程整理所得，仅整理本人不熟悉的相关知识点。
HTML
css 让 html 变成了 divHtml，框架让 html 标签属性变得越来越陌生，有多少人和我一样呢（悲）
基础
HTML 标签名和属性名是大小写不敏感的，比如<title>和<TITLE>是同一个标签，onclick和onClick是同一个属性。但一般习惯使用小写。
<head>
当网页不包含<head>时，，浏览器将会自动创建一个。
它通常包含以下七个子元素：
meta: 设置网页元数据link：连接外部样式表title：设置网页标题style：编辑内嵌样式表script：引入网页脚本noscript：当浏览器不支持脚本时显示的内容base：设置网页内部相对 URL 的计算基准
<meta>
可以有多个<meta>标签，每一个代表一条元数据，约定放在<head>内容的最前面。
<base>
指定网页内部的所有相对 URL的计算基准，只能存放于<head>内，对整个网页有效，整张网页只能有一个<base>标签。
当不设置<base>标签时，默认以当前 URL 为计算基准。
<base> 有两个属性，必须要包含两者其一：
- href: 网页的基准 url
- target: 如何打开链接
示例：
<head> <base href="https://www.marrydream.top/test" target="_blank"></head>对于上面例子，若存在相对路径 ./a，将会变为绝对路径 https://www.marrydream.top/test/a，且默认使用新页签的方式打开链接。
注意：锚点也会相对于<base>计算，而不是相对当前网页的 URL。
url
URL 的各个组成部分只有使用以下字符可以直接使用，这些称为合法字符。
- 数字、字母
- 连词号（
-） - 句点（
.） - 下划线（
_）
除合法字符以外，还有18个保留字符，仅能在指定位置使用，若一定要使用则需要手动将其转义。
转义的方法为，字符的十六进制 ASCII 码前面加上百分号（%）。
18个字符及其转义形式详见 HTML教程-URL字符
对于合法字符也可以手动进行转义，但不推荐，如www.apple.com也可以写成www.%61pple.com。
对于除合法字符与保留字符以外的字符，可以直接使用，理论上讲浏览器将会自动进行转义。
对于汉字，自动的转义方式为使用对应的十六进制 UTF-8编码，每两个字符一组在前方添加%。
例如：汉字梦对应的 UTF-8 编码为E6A2A6，两两转义后变为%E6%A2%A6。
锚点 anchor
使用#跟随锚点名称，放在 url 的尾部，即可直接跳转到具体的位置。
锚点名称一般为元素id的属性，如#app。
字符编码
网页中最常用的编码 UTF-8，这是 Unicode 字符集的一种表达方式。
Unicode 字符集致力于包含世界上所有的字符，而每一个字符都在字符集中有一个自己的编号，称为码点。
由于可打印形式、特殊意义字符、输入难度问题，html 无法展示所有的 Unicode 字符。
因此 html 允许使用 Unicode 码点来表示字符，浏览器将会自动转义。
码点表示方法为&#N;（十进制）或&#xN;（十六进制），其中N为码点。
例如a在 Unicode 中的码点为 97，则可以写为 a。
<p>a</p><!--等同于--><p>a</p>由于码点并不方便记忆，HTML 将一些常用的特殊符号规定了容易记忆的名字，参考 字符的实体表示法
全局属性
全局属性可以作用于几乎所有的 HTML 标签，这里仅列举本人不熟悉的部分属性。
title
大多数浏览器中，鼠标悬浮在元素上面时，会将title属性值作为浮动提示，显示出来。
tabindex
tabindex 控制用户按下tab键时，网页焦点的转移顺序，亦可以使不可获得焦点的元素拥有获得焦点的能力。
<div tabindex="-1">我可以获取焦点啦</div>该属性不同的值的意义如下：
- 负整数：该元素可以获取焦点（允许使用 js 的
focus()方法），但不参与 tab 对网页元素的遍历，通常为-1。 - 0：参与 tab 的遍历，顺序由浏览器指定，通常为在网页中出现的顺序。
- 正整数：参与 tab 的遍历，且按照从小到大的顺序遍历。值相同时顺序由浏览器指定。
一般来说不需要指定该属性，或指定为 0，默认交给浏览器就好。除非要让某些无法获取焦点的元素参与遍历或允许获取焦点才需设置。
hidden
隐藏该元素，其实就是给一个 display: none 的样式。css 的可见性设置优先级高于该属性。
<div hidden>你看不到我</div>contenteditable
使标签变为允许编辑的状态，有两种属性。
true或空字符串：允许编辑false：不允许编辑
虽然该属性不写属性值依旧有效，但它是枚举属性而非布尔属性，建议为了规范带上属性值。
data-属性
用于放置自定义数据，供 css 和 js 使用。
<div id="el" data-device-type="website"></div>CSS 中使用css选择器对该属性设置样式
[data-device-type="website"] { display: none;}JS 中操作自定义属性，可读写
// 这里利用了设置id后的元素无需手动获取的新特性const deviceType = el.dataset.deviceType; // 读el.dataset.newAttr = "new field"; // 写语义化结构
答应我，不要通篇 div一把梭好吗（x
为了优化代码的可读性和可维护性，在编写 HTML 时，应尽量使用对应语义的标签，使得开发者只看标签就能大致了解 HTML 的大致结构。
下面这就是一个比较直观的语义化结构。
<body> <header>页眉</header> <main> <article> <h1>标题</h1> <p>段落</p> </article> </main> <footer>页尾</footer></body><header>
表示网页或文章、区块的头部。
一个页面可以有多个<header>，可以用在多个场景，但每个具体的场景只能存在一个<header>，且<header>内不能包含其他<header>或<footer>。
<footer>
表示网页或文章、区块的底部。
使用要点同<header>，内部不能包含其他<header>或<footer>。
<main>
表示页面的主体内容，一个页面只能有一个<main>。
<main>是顶层标签，不能放在其他语义化标签内。
<article>
表示页面里的一段完整内容，即使其他页面不存在也有独立意义。允许有自己的标题（<h1>到<h6>）。
适用于自包含的窗口小部件：股票行情，计算器，钟表，天气窗口小部件等。
<article> <h3>标题</h3> <p>段落</p></article>一个页面允许有多个 <article>，且允许嵌套使用，但是他们必须是部分与整体的关系。
<aside>
用来放置与网页或文章主要内容间接相关的部分，或者页面的附属信息，本身表达的内容应该是与附近的内容有一定相关联的， 比如相关文章的链接、广告、友情链接等功能。
网页级别的<aside>可以放置侧边栏，但不一定就要在页面侧边。
<body> <main></main> <aside></aside></body>文章级别的<aside>可以用来放置补充信息、评论或注释。
<p>段落</p>
<aside> <p>这一段是重点</p></aside><section>
表示一个含有主题的独立部分，一组相似主题的内容，一般都有一个标题。一个页面不能只有一个<section>。
下面表示了一个包含两章的文章页面。
<article> <h1>标题</h1> <section> <h2>第一章</h2> <p>内容</p> </section> <section> <h2>第二章</h2> <p>内容</p> </section></article><section>也可以包含<article>，取决于你所认为的这两个标签对当前页面的含义。
<nav>
用于放置页面或文档的导航信息。内部一般包含<ol>或<ul>这样的列表标签。
<nav> <ol> <li>首页</li> <li>分类</li> <li>文章</li> </ol></nav>一般只能放入<header>内部，不建议放入<footer>内。
<h1>-<h6>
浏览器提供了6个标签用来表示文章标题，从1-6从大到小分为六级。
<article> <h1>HTML 语义化标签</h1> <h2>前言</h2> <h2>标签</h2> <h3>header</h3> <h3>footer</h3> <h2>后记</h2></article>标题不应该越级，比如 <h1> 后直接接 <h3>，会失去文章的清晰结构。
<hgroup>
如果主标题含有多级标题，例如存在副标题。则使用<hgroup>来包裹多级标签。
<hgroup> <h1>文章列表</h1> <h2>拾光</h2></hgroup><hgroup>只能用于包裹<h1>-<h6>，不能包含其他标签。
<strong>
行内元素，表示很强的重要性，会被浏览器以粗体展示。
<p>早上记得<strong>吃药</strong>啊大郎</p>注：<b>标签与<strong>意义相同，但它没有语义，不建议使用。
<em>
行内元素，表示强调，会被浏览器以斜体展示。
<p><em>请</em>你滚过来</p>注：<i>标签与<em>意义相同，但它语义不强，不建议使用。
<cite>
表示引言出处或者作者，会被浏览器默认以斜体展示。
<cite>-- 茉莉</cite><blockquote>和<q>
表示引用他人的话，存在 cite 属性，值为网址，不会显示在网页上。
<blockquote cite="https://marrydream.top/">茉莉曾言道……</blockquote><p> 500年前， <q cite="https://marrydream.top/">茉莉曾言道……</q></p>其中<blockquote>为块级元素，<q>为行内元素。但<q>会默认被浏览器以斜体显示并自动添加半角双引号。
<code>
行内元素，表示计算机代码，默认被浏览器以等宽字体显示。
<p><code>encodeURI()</code>可以将字符串转义为合法url字符串</p><code>本身只表示一行代码，如果要表示多行代码，则需包裹在<pre>标签内。
<pre> <code> const str = "茉莉"; console.log(encodeURI(str)); </code></pre><address>
块级元素，表示某人或某个组织的联系方式。通常会被放在<footer>标签内。
<footer> <address> </address></footer>内部不能存在非联系方式，也不能包含标题标签（<h1>~<h6>）、<article>、<aside>、<section>、<nav>、<header>、<footer>等标签。
<figure>和<figcaption>
<figure> 是一个将主体内容与附加信息，封装在一起的语义容器。一般用于表示一个图像区块，将图像和相关信息封装在一起。
<figcaption> 为它的可选子元素，对区块进行描述，可存在多个。
<figure> <img src="https://marrydream.top/images/avatar.jpg"> <figcaption>头像</figcaption></figure><figure>还可以封装代码、段落等其他内容。
<figure> <figcaption>字符串转义方法</figcaption> <p><code>encodeURI()</code>可以将字符串转义为合法url字符串</p></figure>列表标签
<ol>
有序列表，已经很熟悉了就不多描述了，这里只说一下它的一些属性。
reversed
产生倒叙的数字列表
<ol reversed> <li>A</li> <li>B</li></ol>结果的编号从上到下为 2、1。
start
数值为一个整数，用来定义编号的起始数字。
<ol start="5"> <li>A</li> <li>B</li></ol>结果的编号从上到下为 5、6。
type
指定编号的样式，有如下几种值：
a: 小写字母A：大写字母i：小写罗马数字I：大写罗马数字1：整数（default）
<ol type="A"> <li>A</li> <li>B</li></ol>结果的编号从上到下为 A、B。
<li>
当<li>存在于<ol>之中时，拥有一个value属性，定义当前列表编号，后续编号也会依次递增。
<ol> <li>A</li> <li value="3">B</li> <li>C</li></ol>结果的编号从上到下为 1、3、4。
<dl>
这是一个包含术语以及描述的列表，通常用于展示键值对、标题-内容等。为 block 元素，默认样式如下：
虽然该标签自带缩进效果，但它和
ul一样，不建议用来在页面中创建具有缩进效果的内容，会造成语义混乱
其包含两个仅允许在 <dl></dl> 内使用的标签：dt 和 dd，分别指代术语和描述，格式如下：
<!--基本格式--><dl> <dt>术语一</dt> <dd>描述一</dd> <dt>术语二</dt> <dd>描述二</dd></dl><!--一条描述前可以有多条术语--><dl> <dt>术语一</dt> <dt>术语二</dt> <dd>描述</dd></dl><!--一条术语后能跟多条描述--><dl> <dt>术语</dt> <dd>描述一</dd> <dd>描述二</dd></dl>WHATWG HTML 同样允许在 dl 元素中用 div 元素来包含每个包装每个 dt-dd 键值对
<dl> <div> <dt>术语</dt> <dd>描述</dd> </div></dl>在 Typescript 中，dl 实现了 HTMLDListElement 接口，dt 与 dd 实现了 HTMLElement 接口。
CSS
CSS 样式太多了了解不过来啊，而且一直在更新，甚至想学习新属性却被组长/总监不允许用在项目中，理由就是万恶的兼容性。我刚入公司的时候组长甚至不乐意我用 flex 布局，我不是很理解一个做电商的至于 flex 都不让用吗（碎碎念）
本处记录的属性会考虑兼容性是否适配主流版本浏览器，其中不包括IE，IE已死，有事烧纸你不曾注意前端开发者在狞笑
(min|max)?(width|height) 的关键字属性
这几个虽然为实验性属性，但发现兼容性意外的不错
如果这篇文章对你有帮助，欢迎分享给更多人！
部分信息可能已经过时