HTML5 && CSS

关注
发布于: 2020 年 06 月 04 日
HTML5元素定义汇总
Google浏览器开发者工具
块级元素块级元素在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以block形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。
﻿
<div>文档分区。<form>表单。<fieldset>表单元素分组。<output> HTML5表单输出。
<address>联系方式信息。<article> HTML5文章内容。<aside> HTML5伴随内容。
<canvas> HTML5绘制图形。<audio> HTML5音频播放。<video> HTML5视频。
<table>表格。<tfoot>表脚注。<hr>水平分割线。
<ul>无序列表。<ol>有序列表。<pre>预格式化文本。
<dl>定义列表。<dd>定义列表中定义条目描述。<section> HTML5一个页面区段。
<p>行。<blockquote>块引用。<noscript>不支持脚本或禁用脚本时显示的内容。
<figure> HTML5图文信息组 。<figcaption> HTML5图文信息组标题。
<header> HTML5区段头或页头。<footer> HTML5区段尾或页尾。
<hgroup> HTML5标题组。 <h2>, <h3>, <h4>, <h5>, <h6>标题级别 1-6。
﻿
行内元素内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行，它通常出现在一堆文字之间。
a、 img、span、strong、 em
button、input、label、select、textarea
特殊字符在HTML中，字符 <, >,",' 和 & 是特殊字符. 我们必须使用字符引用 —— 表示字符的特殊编码, 每个字符引用以符号&开始, 以分号(;)结束.
﻿
CSS层叠优先级一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千 — 四位数的四个位数：
千位： 如果声明在 style 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。
百位： 选择器中包含ID选择器则该位得一分。
十位： 选择器中包含类选择器、属性选择器或者伪类则该位得一分。
个位：选择器中包含元素、伪元素选择器则该位得一分。
注: 通用选择器 (*)，组合符 (+, >, ~, ' ')，和否定伪类 (:not) 不会影响优先级。
CSS选择器选择器列表将多个单独的选择器组合起来，在它们之间加上一个逗号(,)，变为选择器列表。
h1, 
.special {
  color: blue; 
} 
选择器种类类型、类和ID选择器类型选择器有时也叫做“标签名选择器”或者是“元素选择器”。
<*一个<h1>标签的HTML元素*>
h1 { }  
<*向:first-child选择器加入全局选择器，选择器正选中<article>元素的任何第一子元素*>
article *:first-child { } 
<*一个类选择器*>
.box { }  	
<*指向特定元素的类选择器*>
h1.highlight {
    background-color: pink;
}
<*多个类被应用的时候指向一个元素*>
.notebox.warning {
  border-color: orange;
  font-weight: bold;
}
<*一个ID选择器*>
#unique { }		
  
<*指向特定元素的ID选择器*>
h1#heading {
    color: rebeccapurple;
}
备注：ID所指特定，会优先于大多数其他选择器。所以很难处理它们。大多数情况下，给一个元素加个类，而不是使用ID，会更好。不过要是ID是唯一一种指定这个元素的方式的话——也许是因为你没法访问标记文本所以不能编辑——这会生效。
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors
属性选择器根据一个元素上的某个标签属性的存否以选择元素，或者甚至根据一个有特定值的标签属性是否存在，来做选择。
﻿
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors
伪类与伪元素伪类，开头为冒号的关键字，是一个选择处于特定状态的元素的选择器。比如它们是这一类型的第一个子元素，或者是鼠标指针悬浮在上面的时候。
简单伪类：
:first-child（代表父元素的第一个子元素）
:last-child （代表父元素的最后一个子元素）
:only-child （匹配没有任何兄弟元素的元素）
:invalid （表示任意内容未通过验证的 <input> 或其他 <form> 元素，对于突出显示用户的字段错误非常有用）
用户行为伪类：
:hover （只会在鼠标指针悬浮到一个元素上的时候选择这个元素，一般就是链接元素）
:active （匹配被用户激活的元素，当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间）
:focus （只会在用户使用键盘控制，选定元素的时候激活）
:link （选中所有尚未访问的链接）
:visited （表示用户已访问过的链接）
a:hover { }
﻿
伪元素，开头为双冒号::，选择一个元素的某个部分而不是元素自己。例如，::first-line总是会选择一个元素（下面的情况中是<p>）中的第一行，表现得就像是一个<span>包在了第一个被格式化的行外面，然后<span>被选中了。
::before和::after伪元素与content属性的共同使用，在CSS中被叫做“生成内容”
p::first-line { }
﻿
.box::before {
    content: "This should show before the other content."
}   
﻿
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements
关系选折器后代选择器：在几项之间有着空格的选择器。
子代关系选择器：是个大于号（>），只会在选择器选中直接子元素的时候匹配。继承关系上更远的后代则不会匹配。
邻接兄弟选择器：（+）用来选中恰好处于另一个在继承关系上同级的元素旁边的物件。
通用兄弟关系选择器：（~）选中一个元素的兄弟元素，即使它们不直接相邻。
关系选择器：将任何在我们前面的学习过程中学到的选择器组合起来，选出你的文档中的一部分。
article > p { }
<*后代选择器：在几项之间有着空格的选择器*>
.box p {
    color: red;
}  
<*子代关系选择器：在几项之间有着空格的选择器*>
 article > p
<*邻接兄弟选择器：紧随h1元素之后的p元素，中间不能有其他元素*>
h1 + p {
    font-weight: bold;
    background-color: #333;
}   
<*通用兄弟选择器：选中了所有的 h1之后的p元素，虽然中间还有个 div，其后的p还是被选中了*>
h1 ~ p {
    font-weight: bold;
}
    
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators
选择器参考表类型选择器   h1 {  }
通配选择器   * {  }
类选择器      .box {  }
ID选择器      #unique { }
标签属性选择器      a[title] {  }
伪类选择器            p:first-child { }
伪元素选择器         p::first-line { }
后代选择器      article p
子代选择器      article > p
相邻兄弟选择器   h1 + p
通用兄弟选择器   h1 ~ p
﻿
CSS 学习目录层叠与继承
CSS选择器
 标签，类，ID选择器
属性选择器
伪类和伪元素
关系选择器
盒模型
背景与边框
处理不同文字方向的文本
溢出的内容
值和单位
在CSS中调整大小
图像、媒体和表单元素
样式化表格
调试CSS
组织CSS
﻿