标签：footer ems 换行 ado iter 跳转 页眉 get 包括
布局标签
div 标签定义文档中的分区或节（division/section），可以把文档分割为独立的、不同的部分，主要用于布局。
aside 标签的内容可用作文章的侧栏，html5新增标签
header 标签定义页面的头部（介绍信息），html5新增标签
section 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分，html5新增标签
footer 标签定义文档或节的页脚，通常包含文档的作者、版权信息、使用条款链接、联系信息等等，html5新增标签
article 标签规定文章独立的其他内容，比如：标题、内容、评论，html5新增标签文本标签、a标签、媒体标签
h1-h6 标签可定义标题
p 标签定义段落
b/strong 标签加粗
em 标签来表示强调的文本，斜体
strong 标签表示重要文本
u 标签下划线
s 标签删除线
br 标签表示回车换行
hr 标签表示水平线
span 标签被用来组合文档中的行内元素
blockquote 标签表示块引用
pre 标签可定义预格式化的文本，保持原有格式的一种标签。
sub 标签下标，
sup 标签上标
a 标签定义超链接，指定页面间的跳转
img 标签主要在网页中插入图像，可以定义图片替换文本、显示宽度和高度、是否带边框
audio 标签定义声音，比如音乐或其他音频流
video 标签定义视频，比如电影片段或其他视频流序列化标签、表格标签
ul 和 li 无序列表标签
ol 和 li 有序列表标签，可以使用type属性规定有序列表符号的类型
dl、dt、dd 标签定义了定义列表，dl标签用于结合 dt（定义列表中的项目）和 dd（描述列表中的项目）
table、tr、th、td 、thead、tbody 表格标签表单标签
form 标签定义提交方式、提交地址、表单字符集以及如何对其进行编码，需要提交的表单一定要放在form标签内
input标签用于搜集用户信息
label标签为input元素定义标注，如果您点击label元素文本，就会触发此input控件
textarea标签，设置文本区内的可见行数和宽度
button标签定义一个按钮
select标签和option标签下拉列表CSS3选择器
| 选择器 | 写法 | 解释 |
|---|---|---|
| element1~element2 | p~ul | 选择p元素之后的每一个ul元素 |
| [attribute^=value] | a[src^="https"] | 选择每一个src属性的值以"https"开头的元素 |
| [attribute$=value] | a[src$=".pdf"] | 选择每一个src属性的值以".pdf"结尾的元素 |
| [*attribute**=value] | a[src*="44lan"] | 选择每一个src属性的值包含子字符串"44lan"的元素 |
| :first-of-type | p:first-of-type | 选择每个p元素是其父级的第一个p元素 |
| :last-of-type | p:last-of-type | 选择每个p元素是其父级的最后一个p元素 |
| :only-of-type | p:only-of-type | 选择每个p元素是其父级的唯一p元素 |
| :only-child | p:only-child | 选择每个p元素是其父级的唯一子元素 |
| :nth-child(n) | p:nth-child(2) | 选择每个p元素是其父级的第二个子元素 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择每个p元素的是其父级的第二个子元素，从最后一个子项计数 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择每个p元素是其父级的第二个p元素 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择每个p元素的是其父级的第二个p元素，从最后一个子项计数 |
| :last-child | p:last-child | 选择每个p元素是其父级的最后一个子级。 |
| :root | :root | 选择文档的根元素 |
| :empty | p:empty | 选择每个没有任何子级的p元素（包括文本节点） |
| :target | #news:target | 选择当前活动的#news元素（包含该锚名称的点击的URL） |
| :enabled | input:enabled | 选择每一个已启用的输入元素 |
| :disabled | input:disabled | 选择每一个禁用的输入元素 |
| :checked | input:checked | 选择每个选中的输入元素 |
| :not(selector) | :not(p) | 选择每个并非p元素的元素 |
| ::selection | ::selection | 匹配元素中被用户选中或处于高亮状态的部分 |
| :out-of-range | :out-of-range | 匹配值在指定区间之外的input元素 |
| :in-range | :in-range | 匹配值在指定区间之内的input元素 |
| :read-write | :read-write | 用于匹配可读及可写的元素 |
| :read-only | :read-only | 用于匹配设置 "readonly"（只读） 属性的元素 |
| :optional | :optional | 用于匹配可选的输入元素 |
| :required | :required | 用于匹配设置了 "required" 属性的元素 |
| :valid | :valid | 用于匹配输入值为合法的元素 |
| :invalid | :invalid | 用于匹配输入值为非法的元素 |
CSS3边框（Borders）
div{
border:2px solid;
border-radius:25px;/*一个用于设置所有四个边框*/
box-shadow: 10px 10px 5px #888888;/*附加一个或多个下拉框的阴影*/
border-image:url(border.png) 30 30 round;/*设置所有边框图像的速记属性*/
}CSS3背景
div{
background-image:url(img_flwr.gif),url(img_tree.gif);/*多背景*/
background-clip:no-repeat;/*规定背景的绘制区域*/
background-size:100% 100%;/*规定背景图片的尺寸*/
background-origin:content-box;/*规定背景图片的定位区域*/
}CSS3 渐变
/*线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向*/
background: linear-gradient(direction, color-stop1, color-stop2, ...);
/*径向渐变（Radial Gradients）- 由它们的中心定义*/
background: radial-gradient(center, shape size, start-color, ..., last-color);CSS3文本效果
| 属性 | 描述 |
|---|---|
| hanging-punctuation | 规定标点字符是否位于线框之外。 |
| punctuation-trim | 规定是否对标点字符进行修剪。 |
| text-align-last | 设置如何对齐最后一行或紧挨着强制换行符之前的行。 |
| text-emphasis | 向元素的文本应用重点标记以及重点标记的前景色。 |
| text-justify | 规定当 text-align 设置为 "justify" 时所使用的对齐方法。 |
| text-outline | 规定文本的轮廓。 |
| text-overflow | 规定当文本溢出包含元素时发生的事情。 |
| text-shadow] | 向文本添加阴影。 |
| text-wrap] | 规定文本的换行规则。 |
| word-break | 规定非中日韩文本的换行规则。 |
| word-wrap | 允许对长的不可分割的单词进行分割并换行到下一行。 |
CSS3 字体
@font-face{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div{
font-family:myFirstFont;
}CSS3 转换和变形
2D新转换属性
| 属性 | 描述 |
|---|---|
| transform | 适用于2D或3D转换的元素 |
| transform-origin | 允许您更改转化元素位置 |
2D 转换方法
| 属性 | 描述 |
|---|---|
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 |
| translate(x,y) | 定义 2D 转换，沿着 X 和 Y 轴移动元素。 |
| translateX(n) | 定义 2D 转换，沿着 X 轴移动元素。 |
| translateY(n) | 定义 2D 转换，沿着 Y 轴移动元素。 |
| scale(x,y) | 定义 2D 缩放转换，改变元素的宽度和高度。 |
| scaleX(n) | 定义 2D 缩放转换，改变元素的宽度。 |
| scaleY(n) | 定义 2D 缩放转换，改变元素的高度。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| skew(x-angle,y-angle) | 定义 2D 倾斜转换，沿着 X 和 Y 轴。 |
| skewX(angle) | 定义 2D 倾斜转换，沿着 X 轴。 |
| skewY(angle) | 定义 2D 倾斜转换，沿着 Y 轴。 |
3D转换属性
| 属性 | 描述 |
|---|---|
| transform | 向元素应用 2D 或 3D 转换。 |
| transform-origin | 允许你改变被转换元素的位置。 |
| transform-style | 规定被嵌套元素如何在 3D 空间中显示。 |
| perspective | 规定 3D 元素的透视效果。 |
| perspective-origin | 规定 3D 元素的底部位置。 |
| backface-visibility | 定义元素在不面对屏幕时是否可见。 |
3D 转换方法
| 描述 | |
|---|---|
| matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换，使用 16 个值的 4x4 矩阵。 |
| translate3d(x,y,z) | 定义 3D 转化。 |
| translateX(x) | 定义 3D 转化，仅使用用于 X 轴的值。 |
| translateY(y) | 定义 3D 转化，仅使用用于 Y 轴的值。 |
| translateZ(z) | 定义 3D 转化，仅使用用于 Z 轴的值。 |
| scale3d(x,y,z) | 定义 3D 缩放转换。 |
| scaleX(x) | 定义 3D 缩放转换，通过给定一个 X 轴的值。 |
| scaleY(y) | 定义 3D 缩放转换，通过给定一个 Y 轴的值。 |
| scaleZ(z) | 定义 3D 缩放转换，通过给定一个 Z 轴的值。 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
| rotateX(angle) | 定义沿 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿 Z 轴的 3D 旋转。 |
| perspective(n) | 定义 3D 转换元素的透视视图。 |
CSS3 过渡
div{
transition-property: width;/*规定应用过渡的 CSS 属性的名称。*/
transition-duration: 1s;/*定义过渡效果花费的时间。默认是 0。*/
transition-timing-function: linear;/*规定过渡效果的时间曲线。默认是 "ease"。*/
transition-delay: 2s;/*规定过渡效果何时开始。默认是 0。*/
transition:width 1s linear 2s;/*简写属性，用于在一个属性中设置四个过渡属性*/
}CSS3 动画
@keyframes myfirst{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
div{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}CSS3多列
| 属性 | 描述 |
|---|---|
| column-count | 指定元素应该被分割的列数。 |
| column-fill | 指定如何填充列 |
| column-gap | 指定列与列之间的间隙 |
| column-rule | 所有 column-rule-* 属性的简写 |
| column-rule-color | 指定两列间边框的颜色 |
| column-rule-style | 指定两列间边框的样式 |
| column-rule-width | 指定两列间边框的厚度 |
| column-span | 指定元素要跨越多少列 |
| column-width | 指定列的宽度 |
| columns |
CSS3 盒模型
div{
/*指定一个元素是否应该由用户去调整大小*/
resize：none | both | horizontal | vertical | inherit
/*允许您以确切的方式定义适应某个区域的具体内容*/
box-sizing: content-box | border-box | inherit
/*属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓*/
outline:outline-color outline-style outline-width outine-offset
}CSS3伸缩布局盒模型(弹性盒)
| 属性 | 描述 |
|---|---|
| display | 指定 HTML 元素盒子类型。 |
| flex-direction | 指定了弹性容器中子元素的排列方式 |
| justify-content | 设置弹性盒子元素在主轴（横轴）方向上的对齐方式。 |
| align-items | 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。 |
| flex-wrap | 设置弹性盒子的子元素超出父容器时是否换行。 |
| align-content | 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐 |
| flex-flow | flex-direction 和 flex-wrap 的简写 |
| order | 设置弹性盒子的子元素排列顺序。 |
| align-self | 在弹性子元素上使用。覆盖容器的 align-items 属性。 |
| flex | 设置弹性盒子的子元素如何分配空间。 |
CSS3多媒体查询
<link rel="stylesheet" type="text/css" href="site.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<style>
@media all and (min-width: 800px) { ... }
@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }
@media (min-width:800px) or (orientation:portrait) { ... }
@media (not min-width:800px) { ... }
</style>//方式一：可指定去除空格的位置类型
function trimStr(str, type) {
const regObj = {
left: /^\s+/,
middle: /(^\s+)(\S)|\s+(\S)/g,
right: /\s+$/,
both: /(^\s+)|(\s+$)/g,
all: /\s+/g
};
const reg = type && regObj[type] ? regObj[type] : regObj.both;
const replaceStr = type === 'middle' ? (m, $1, $2, $3) => $1 ? m : $3 : '';
return str.replace(reg, replaceStr);
}
trimStr(' aa bb cc d d ee ', 'middle')
//方式二：一次性去除所有空格
function trim(str) {
return str.split(' ').join('');
}
trim(' aa bb cc d d ee ');标签：footer ems 换行 ado iter 跳转 页眉 get 包括
原文地址：https://www.cnblogs.com/EricZLin/p/12019762.html
