<meta>
链接 常用meta整理 | 菜鸟教程 (runoob.com)
主要用于提供HTML文档的元数据，用于不同移动设备页面调整（全屏、识别邮箱电话号码、添加广告）、SEO优化（搜索引擎优化）、页面相关（编码、站点适配）……
（1）URL : 统一资源定位符（Uniform Resource Locator）,标准资源的地址，分为绝对路径和相对路径。
互联网的每个文件都有一个唯一的URL
包括 模式（协议）、服务器名称（IP地址）、路径、文件名
（2） HREF：（Hypertext Reference）指定网络资源位置，定义当前元素/文档和属性所需锚点/资源的关系/链接。
浏览器的页面解析不会暂停。
（建议使用link标签导入样式表）
（3） SRC：（Source）只嵌入当前资源/文档元素 定义的位置
浏览器下载，编译，执行文件前页面的加载和处理会被暂停。
（建议把JS文件放到底部加载）
padding : 填充
border : 边缘
margin ： 页边空白
是一个行内元素，
它包含一个 path 属性，该属性允许在不影响图像分辨率的情况下缩放图像。
path
五种排序方式：数字、字母、小写字母、罗马字母、小写罗马字母（样式）
<ol type = “A”> <!-- A:字母 a:小写字母 I:罗马字母 i:小写罗马字母 默认数字 --> <li>第一句</li> <li>第二句</li> <li>第三句</li> </ol>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <ul id = "aa"> <li>第一句</li> <li>第二句</li> <li>第三句</li> <li>第四句</li> </ul> </body> </html>
#aa { /* # 散列符号 为ID选择器 */ list-style: none; /* 无序列表去掉点*/ display:block; /*块级元素（列显示）*/ display:inline; /*行内元素（行显示）*/ display:flex; /*用flexbox均匀间隔子元素*/ }
多元素选择器 用 英文逗号
又称为包含选择器，可以选择作为某元素后代的元素。
nav > ul 比 nav ul 限定更严格，必须后面的元素只比前面的低一个级别。
h1 em { color: red; }
只能选择作为某元素子元素的元素。
nav ul选择nav内包含的所有ul元素，例如上面dom结构里面id为a、b、c的全部ul。
h1 > em { color: red; }
<form action="……" method="……"> <!-- action属性为表单提交地址url 忽略则为当前界面--> <!-- method属性规定提交表单所用的HTTP方法 --> <fieldset> <legend>Personal information:</legend> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"></fieldset> </form>
① GET（默认方法）：如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。
当您使用 GET 时，表单数据在页面地址栏中是可见的。
PS ：GET 最适合少量数据的提交。浏览器会设定容量限制。
② POST ： 如果表单正在更新数据，或者包含敏感信息（例如密码）。
POST 的安全性更好，因为在页面地址栏中被提交的数据是不可见的。
元素为
<fieldset class="question" name="2"> <legend>2</legend> <ul class="answers-list"> <li></li> <li></li> </ul> </fieldset>
元素是最重要的表单元素。
关于 ：输入（表单输入）元素 - HTML（超文本标记语言） | MDN (mozilla.org)
type属性：（还有很多……见链接）
通过更改value属性来更改其中的值
① text : 定义常规文本输入
② radio : 定义单选按钮输入
③ submit ：定义提交按钮
section和div的唯一区别是应用于其内部内容的语义。
Section 是一个HTML5元素，对其内部的内容具有语义。这些元素可以用来对html中的内容或元素进行分组，可以提高可读性和SEO（按照搜索引擎算法，提高文章在搜索引擎中的自然排名）。
Section
Div 是一个没有语义的html标签。它用于创建其他元素的逻辑和布局，也包含其他内容元素。
Div
① 字体样式一览参考font-family - CSS：层叠样式表 | MDN (mozilla.org)
h1,h2 { font-family: Verdana Tahoma; /* 有些字体比其他字体更容易阅读，在低分辨率屏幕上尤其如此。 tohoma 是 sans-serif 系列中的另一种网络安全字体*/ color: inherit; text-decoration: none; /* 去掉字体下划线 */ }
h2 { border-bottom: 4px solid #dfdfe2 /* 宽度 样式 颜色*/ }
伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。
一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。
/* 每一个 <p> 元素的第一行。 */ p::first-line { color: blue; text-transform: uppercase; }
① ::after : 已选中元素的最后一个子元素。
::after
② ::before : 匹配选中的元素的第一个子元素。
::before
③ ::selection ：应用于文档中被用户高亮的部分
::selection
（比如使用鼠标或其他选择设备选中的部分）。
④ ::first-line ：在某 块级元素 的第一行应用样式。
::first-line
（1） 关于视觉可访问性的主题，元素之间的对比是一个关键因素。 例如，标题的文本和背景之间的对比度应至少为 4.5:1。
@media 规则允许在相同样式表为不同媒体设置不同的样式。
Media Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。
使用Media Queries必须要使用 “@media” 开头，然后指定媒体类型（也可以称为设备类型），随后是指定媒体特性（也可以称之为设备特性）。媒体特性的书写方式和样式的书写方式非常相似，主要分为两个部分，第一个部分指的是媒体特性，第二部分为媒体特性所指定的值，而且这两个部分之间使用冒号分隔。
@media screen and (max-width: 960px){ body{ background: #000; } }
@media screen的css在打印设备里是无效的，而@media在打印设备里是有效的。
如果css需要用在打印设备里，那么就用@media ，否则，就用@media screen。
不过这只是笼统的做法，其实如果把“screen”换为“print”，写为 @media print ，那么该css就可用到打印设备上了，但要注意，@media print 声明的css只能在打印设备上有效
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
语义：用于控制视图的大小和形状
width: 特殊值 device-width 即100vw，100%的视口宽度
initia-scale: 控制页面首次加载时显示的缩放倍数。默认值是1，负值会被忽略。
<p>含有表头的表格</p> <table> <caption>this is a form</caption> <thead> <tr> <!-- tr表示行 td表示列--> <th>The table header</th> </tr> </thead> <tbody> <tr> <td>The table body</td> <td>with two columns</td> </tr> </tbody> </table>
CSS 选择器 - CSS：层叠样式表 | MDN (mozilla.org)
属性选择器：
/* :nth-of-type() 伪选择器用于根据它们在相同类型的同级中的顺序来定位特定元素。*/ tr.total td:nth-of-type(3) { padding-right: 0.5rem; } /* span[class~="sr-only"] 选择器将选择任何 span 元素，其 class包括sr-only。*/ span[class~="sr-only"] { border: 0 !important; } /* span:not(.sr-only)选择器定位没有 sr-only类的任何 span 元素。 :not()也被称为反选伪类 */ #years span:not(.sr-only) { font-weight: bold; } /* [autoplay] 选择所有具有 autoplay 属性的元素（不论这个属性的值是什么）。*/
clip-path
clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。
clip-path - CSS：层叠样式表 | MDN (mozilla.org)
calc
calc() 函数用一个表达式作为它的参数，用这个表达式的结果作为值。这个表达式可以是任何如下操作符的组合，采用标准操作符处理法则的简单表达式。
.demo { width: calc(50vmax + 3rem); padding: calc(1vw + 1em); transform: rotate( calc(1turn + 28deg) ); background: hsl(100, calc(3 * 20%), 40%); font-size: calc(50vw / 3); }
z-index
z-index 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。当元素之间重叠的时候，z-index 较大的元素会覆盖较小的元素在上层进行显示。
/* 字符值 */ z-index: auto; /* 整数值 */ z-index: 0; z-index: 3; z-index: 289; z-index: -1;/* 使用负值降低优先级 */ /* 全局值 */ z-index: inherit; z-index: initial; z-index: unset;
border-collapse
语义：用来决定表格的边框是分开的还是合并。
在分隔模式下，相邻的单元格都拥有独立的边框。
在合并模式下，相邻单元格共享边框。
table { /*合并模式*/ border-collapse: collapse; /*分隔模式*/ border-collapse: separate; }
http-equiv
HTML下head中的http-equiv="X-UA-Compatible"详解：
X-UA-Compatible是针对IE8新加的一个设置，对于IE8之外的浏览器是不识别的，这个区别与 content="IE=7"在无论页面是否包含<!DOCTYPE>指令，都像是使用了 Windows Internet Explorer 7的标准模式。而content="IE=EmulateIE7"模式遵循<!DOCTYPE>指令。对于多数网站来说，它是首选的兼容性模式。
目前IE8尚在测试版中，所以为了避免制作出的页面在IE8下面出现错误，建议直接将IE8使用IE7进行渲染。也就是直接在页面的header的meta标签中加入如下代码：
盒子模型是指：外边距（margin）+ border（边框） + 内边距（padding）+ content（内容），可以把每一个容器，比如div，都看做是一个盒子模型
box-sizing
①：没有设置box-sizing:border-box属性，宽高会加上padding和border的值，需要我们手动去计算，减去padding和border的值，并调整content的值，以免超过给定的宽高
②：加了box-sizing:border-box属性，padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在content里，盒子模型会自动根据padding和border的值来调整content的值，就不需要手动调整
* { --blue: #1e90ff; } body { background-color: var(--blue); }
var() 函数用于插入 CSS 变量的值。
CSS 变量可以访问 DOM，这意味着您可以创建具有局部或全局范围的变量，使用 JavaScript 来修改变量，以及基于媒体查询来修改变量。
使用 CSS 变量的一种好方法涉及设计的颜色。您可以将它们放在变量中，而不必一遍又一遍地复制和粘贴相同的颜色。
变量通常在 :root 选择器中声明。 这是 CSS 中最高级别的选择器；放在里面的变量将在任何地方都可用。
:root
