H5、CS3属性总结

HTML

根元素

<html>代表 HTML 或 XHTML 文档的根。其他所有元素必须是这个元素的子节点

文档元数据

<head>代表关于文档元数据的一个集合,包括脚本或样式表的链接或内容。

<title>定义文档的标题,将显示在浏览器的标题栏或标签页上。该元素只能包含文本,包含的标签不会被解释。

<base>定义页面上相对 URL 的基准 URL。

<link>用于链接外部的 CSS 到该文档。

<meta>定义其他 HTML 元素无法描述的元数据。

<style>用于内联 CSS。

脚本

<script>定义一个内联脚本或链接到外部脚本。脚本语言是 JavaScript。

<noscript>定义当浏览器不支持脚本时显示的替代文字。

<template>通过 JavaScript 在运行时实例化内容的容器。

 

章节

<body> 代表 HTML 文档的内容。在文档中只能有一个 <body> 元素。

<section>定义文档中的一个章节。

<nav>定义只包含导航链接的章节。

<article>定义可以独立于内容其余部分的完整独立内容块。

<aside>定义和页面内容关联度较低的内容——如果被删除,剩下的内容仍然很合理。

<h1>,<h2>,<h3>,<h4>,<h5>,<h6>标题元素实现了六层文档标题,<h1>是最大的标题,<h6>是最小的标题。标题元素简要地描述章节的主题。

<header>定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。

<footer>定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。

<address>定义包含联系信息的一个章节。

<main>定义文档中主要或重要的内容。

 

组织内容

<p>定义一个段落。

<hr>代表章节、文章或其他长内容中段落之间的分隔符。

<pre>代表其内容已经预先排版过,格式应当保留 。

<blockquote>代表引用自其他来源的内容。

<ol>定义一个有序列表。

<ul>定义一个无序列表。

<li>定义列表中的一个列表项。

<dl>定义一个定义列表(一系列术语和其定义)。

<dt>代表一个由下一个<dd>定义的术语。

<dd>代表出现在它之前术语的定义。

<figure>代表一个和文档有关的图例。

<figcaption>代表一个图例的说明。

<div>代表一个通用的容器,没有特殊含义。

 

文字形式

<a>代表一个链接到其他资源的超链接

<em>代表强调文字。

<strong>代表特别重要文字。

<small>代表注释,如免责声明、版权声明等,对理解文档不重要。

<s>代表不准确或不相关的内容。

<cite>代表作品标题

<q>代表内联的引用

<dfn>代表一个术语包含在其最近祖先内容中的定义

<abbr>代表省略缩写,其完整内容在title属性中。

<data>关联一个内容的机器可读的等价形式(该元素只在 WHATWG 版本的 HTML 标准中,不在 W3C 版本的 HTML5 标准中)。

<time>代表日期时间值;机器可读的等价形式通过datetime属性指定。

<code>代表计算机代码

<var>代表代码中的变量

<samp>代表程序或电脑的输出

<kbd>代表用户输入,一般从键盘输出,但也可以代表其他输入,如语音输入。

<sub>,<sup>分别代表下标上标

<i>代表一段不同性质的文字,如技术术语、外文短语等。

<b>代表一段需要被关注的文字。

<u>代表一段需要下划线呈现的文本注释,如标记出拼写错误的文字等。

<mark>代表一段需要被高亮的引用文字。

<ruby>代表被ruby 注释标记的文本,如中文汉字和它的拼音。

<rt>代表ruby 注释,如中文拼音。

<rp>代表 ruby 注释两边的额外插入文本,用于在不支持 ruby 注释显示的浏览器中提供友好的注释显示。

<bdi> 代表需要脱离父元素文本方向的一段文本。它允许嵌入一段不同或未知文本方向格式的文本。

<bdo>指定子元素的文本方向,显式地覆盖默认的文本方向。

<span>代表一段没有特殊含义的文本,当其他语义元素都不适合文本时候可以使用该元素。

<br>代表换行

<wbr>代表建议换行 (Word Break Opportunity),当文本太长需要换行时将会在此处添加换行符。

 

编辑

<ins>定义增加到文档的内容。

<del>定义从文档移除的内容。

 

嵌入内容

<img>代表一张图片

<iframe>代表一个内联的框架

<embed>代表一个嵌入的外部资源,如应用程序或交互内容。

<object>代表一个外部资源,如图片、HTML 子文档、插件等。

<param>代表<object>元素所指定的插件的参数

<video>代表一段视频及其视频文件和字幕,并提供了播放视频的用户界面。

<audio>代表一段声音,或音频流

<source><video><audio>这类媒体元素指定媒体源

<track><video><audio>这类媒体元素指定文本轨道(字幕)

<canvas>代表位图区域,可以通过脚本在它上面实时呈现图形,如图表、游戏绘图等。

<map><area>元素共同定义图像映射区域。

<area><map>元素共同定义图像映射区域。

<svg>定义一个嵌入式矢量图

<math>定义一段数学公式

表格

<table>定义多维数据

<caption>代表表格的标题

<colgroup>代表表格中一组单列或多列

<col>代表表格中的

<tbody>代表表格中一块具体数据(表格主体)。

<thead>代表表格中一块列标签(表头)。

<tfoot>代表表格中一块列摘要(表尾)。

<tr>代表表格中的

<td>代表表格中的单元格

<th>代表表格中的头部单元格

 

表单

<form>代表一个表单,由控件组成。

<fieldset>代表控件组

<legend>代表<fieldset>控件组的标题

<label>代表表单控件的标题

<input>代表允许用户编辑数据的数据区(文本框、单选框、复选框等)。

<button>代表按钮

<select>代表下拉框

<datalist> 代表提供给其他控件的一组预定义选项

<optgroup>代表一个选项分组

<option>代表一个<select>元素或<datalist>元素中的一个选项

<textarea>代表多行文本框

<keygen>代表一个密钥对生成器控件。

<output>代表计算值

<progress>代表进度条

<meter> 代表滑动条

交互元素

<details>代表一个用户可以(点击)获取额外信息或控件的小部件

<summary>代表<details>元素的综述标题

<menuitem>代表一个用户可以点击的菜单项。

<menu>代表菜单。

 

CSS

1、动画属性

@keyframes定义一个动画,@keyframes定义的动画名称用来被animation-name所使用。3
animation复合属性。检索或设置对象所应用的动画特效。3
animation-name检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义3
animation-duration检索或设置对象动画的持续时间3
animation-timing-function检索或设置对象动画的过渡类型3
animation-delay检索或设置对象动画的延迟时间3
animation-iteration-count检索或设置对象动画的循环次数3
animation-direction检索或设置对象动画在循环中是否反向运动3
animation-play-state检索或设置对象动画的状态3

2、背景属性

background复合属性。设置对象的背景特性。1
background-attachment设置或检索背景图像是随对象内容滚动还是固定的。必须先指定background-image属性。1
background-color设置或检索对象的背景颜色。1
background-image设置或检索对象的背景图像。1
background-position设置或检索对象的背景图像位置。必须先指定background-image属性。1
background-repeat设置或检索对象的背景图像如何铺排填充。必须先指定background-image属性。1
background-clip指定对象的背景图像向外裁剪的区域。3
background-originS设置或检索对象的背景图像计算background-position时的参考原点(位置)。3
background-size检索或设置对象的背景图像的尺寸大小。3

3、边框属性

border复合属性。设置对象边框的特性。1
border-bottom复合属性。设置对象底部边框的特性。1
border-bottom-color设置或检索对象的底部边框颜色。
border-bottom-style设置或检索对象的底部边框样式。1
border-bottom-width设置或检索对象的底部边框宽度。1
border-color置或检索对象的边框颜色。1
border-left复合属性。设置对象左边边框的特性。1
border-left-color设置或检索对象的左边边框颜色。1
border-left-style设置或检索对象的左边边框样式。1
border-left-width设置或检索对象的左边边框宽度。1
border-right复合属性。设置对象右边边框的特性。1
border-right-color设置或检索对象的右边边框颜色。1
border-right-style设置或检索对象的右边边框样式。1
border-right-width设置或检索对象的右边边框宽度。1
border-style设置或检索对象的边框样式。1
border-top复合属性。设置对象顶部边框的特性。1
border-top-color设置或检索对象的顶部边框颜色1
border-top-style设置或检索对象的顶部边框样式。1
border-top-width设置或检索对象的顶部边框宽度。1
border-width设置或检索对象的边框宽度。1
outline复合属性。设置或检索对象外的线条轮廓。2
outline-color设置或检索对象外的线条轮廓的颜色。2
outline-style设置或检索对象外的线条轮廓的样式。2
outline-width设置或检索对象外的线条轮廓的宽度。2
border-bottom-left-radius设置或检索对象的左下角圆角边框。提供2个参数,2个参数以空格分隔,每个参数允许设置1个参数值,第1个参数表示水平半径,第2个参数表示垂直半径,如第2个参数省略,则默认等于第1个参数3
border-bottom-right-radius设置或检索对象的右下角圆角边框。3
border-image设置或检索对象的边框样式使用图像来填充。3
border-image-outset规定边框图像超过边框的量。3
border-image-repeat规定图像边框是否应该被重复(repeated)、拉伸(stretched)或铺满(rounded)。3
border-image-slice规定图像边框的向内偏移。3
border-image-source规定要使用的图像,代替 border-style 属性中设置的边框样式。3
border-image-width规定图像边框的宽度。3
border-radius设置或检索对象使用圆角边框。3
border-top-left-radius定义左上角边框的形状。3
border-top-right-radius定义右上角边框的形状。3
box-decoration-break规定行内元素被折行3
box-shadow向方框添加一个或多个阴影。3

4、盒子属性

属性描述CSS
overflow-x如果内容溢出了元素内容区域,是否对内容的左/右边缘进行裁剪。3
overflow-y如果内容溢出了元素内容区域,是否对内容的上/下边缘进行裁剪。3
overflow-style规定溢出元素的首选滚动方法。3
rotation围绕由 rotation-point 属性定义的点对元素进行旋转。3
rotation-point定义距离上左边框边缘的偏移点。3

5、颜色属性

color-profile允许使用源的颜色配置文件的默认以外的规范3
opacity设置一个元素的透明度级别3
rendering-intent允许超过默认颜色配置文件渲染意向的其他规范3

6、内边距属性Padding

属性说明CSS
padding在一个声明中设置所有填充属性1
padding-bottom设置元素的底填充1
padding-left设置元素的左填充1
padding-right设置元素的右填充1
padding-top设置元素的顶部填充1

7、媒体页面内容属性

bookmark-label指定书签的标签3
bookmark-level指定了书签级别3
bookmark-target指定了书签链接的目标3
float-offset在相反的方向推动浮动元素,他们一直具有浮动3
hyphenate-after指定一个断字的单词断字字符后的最少字符数3
hyphenate-before指定一个断字的单词断字字符前的最少字符数3
hyphenate-character指定了当一个断字发生时,要显示的字符串3
hyphenate-lines表示连续断字的行在元素的最大数目3
hyphenate-resource外部资源指定一个逗号分隔的列表,可以帮助确定浏览器的断字点3
hyphens设置如何分割单词以改善该段的布局3
image-resolution指定了正确的图像分辨率3
marks将crop and/or cross标志添加到文档3
string-set 3

8、弹性盒子模型属性

flex复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。3
flex-grow设置或检索弹性盒的扩展比率。3
flex-shrink设置或检索弹性盒的收缩比率。3
flex-basis设置或检索弹性盒伸缩基准值。3
flex-flow复合属性。设置或检索弹性盒模型对象的子元素排列方式。3
flex-direction该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置。3
flex-wrap该属性控制flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。3
align-content在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项(垂直)。3
align-items定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。3
align-self定义flex子项单独在侧轴(纵轴)方向上的对齐方式。3
justify-content设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。3
order设置或检索弹性盒模型对象的子元素出现的順序。3

9、字体属性

属性说明CSS
font在一个声明中设置所有字体属性1
font-family规定文本的字体系列1
font-size规定文本的字体尺寸1
font-style规定文本的字体样式1
font-variant规定文本的字体样式1
font-weight规定字体的粗细1
@font-face一个规则,允许网站下载并使用其他超过"Web- safe"字体的字体3
font-size-adjust为元素规定 aspect 值3
font-stretch收缩或拉伸当前的字体系列3

10、内容生成属性

属性说明CSS
content与 :before 以及 :after 伪元素配合使用,来插入生成内容2
counter-increment递增或递减一个或多个计数器2
counter-reset创建或重置一个或多个计数器2
quotes设置嵌套引用的引号类型2
crop允许replaced元素只是作为一个对象代替整个对象的矩形区域3
move-to从流中删除元素,然后在文档中后面的点上重新插入。3
page-policy判定基于页面的给定元素的适用于计数器的字符串值3

11、网格属性

属性说明CSS
grid-columns指定在网格中每列的宽度3
grid-rows指定在网格中每列的高度3

12、超链接属性

target简写属性设置target-name, target-new,和target-position属性3
target-name指定在何处打开链接(目标位置)3
target-new指定是否有新的目标链接打开一个新窗口或在现有窗口打开新标签3
target-position指定应该放置新的目标链接的位置3

13、线框属性

alignment-adjust允许更精确的元素的对齐方式3
alignment-baseline其父级指定的内联级别的元素如何对齐3
baseline-shift允许重新定位相对于dominant-baseline的dominant-baseline3
dominant-baseline指定scaled-baseline-table3
drop-initial-after-adjust设置下拉的主要连接点的初始对齐点3
drop-initial-after-align校准行内的初始行的设置就是具有首字母的框使用初级连接点3
drop-initial-before-adjust设置下拉的辅助连接点的初始对齐点3
drop-initial-before-align校准行内的初始行的设置就是具有首字母的框使用辅助连接点3
drop-initial-size控制局部的首字母下沉3
drop-initial-value激活一个下拉式的初步效果
inline-box-align设置一个多行的内联块内的行具有前一个和后一个内联元素的对齐3
line-stacking一个速记属性设置line-stacking-strategy, line-stacking-ruby,和line-stacking-shift属性3
line-stacking-ruby设置包含Ruby注释元素的行对于块元素的堆叠方法3
line-stacking-shift设置base-shift行中块元素包含元素的堆叠方法3
line-stacking-strategy设置内部包含块元素的堆叠线框的堆叠方法3
text-height行内框的文本内容区域设置block-progression维数3

14、列表属性

属性说明CSS
list-style在一个声明中设置所有的列表属性1
list-style-image将图象设置为列表项标记1
list-style-position设置列表项标记的放置位置1
list-style-type设置列表项标记的类型1

15、外边距属性 margin

属性说明CSS
margin在一个声明中设置所有外边距属性1
margin-bottom设置元素的下外边距1
margin-left设置元素的左外边距1
margin-right设置元素的右外边距1
margin-top设置元素的上外边距1

16、定位i属性 position

属性说明CSS
bottom设置定位元素下外边距边界与其包含块下边界之间的偏移2
clear规定元素的哪一侧不允许其他浮动元素1
clip剪裁绝对定位元素2
cursor规定要显示的光标的类型(形状)2
display规定元素应该生成的框的类型1
float规定框是否应该浮动1
left设置定位元素左外边距边界与其包含块左边界之间的偏移2
overflow规定当内容溢出元素框时发生的事情2
position规定元素的定位类型2
right设置定位元素右外边距边界与其包含块右边界之间的偏移2
top设置定位元素的上外边距边界与其包含块上边界之间的偏移2
visibility规定元素是否可见2
z-index设置元素的堆叠顺序2

17、分页属性

属性说明CSS
orphans设置当元素内部发生分页时必须在页面底部保留的最少行数2
page-break-after设置元素后的分页行为2
page-break-before设置元素前的分页行为2
page-break-inside设置元素内部的分页行为2
widows设置当元素内部发生分页时必须在页面顶部保留的最少行数2

18、表格属性

属性说明CSS
border-collapse规定是否合并表格边框2
border-spacing规定相邻单元格边框之间的距离2
caption-side规定表格标题的位置2
empty-cells规定是否显示表格中的空单元格上的边框和背景2
table-layout设置用于表格的布局算法2

19、文本属性

属性说明CSS
color设置文本的颜色1
direction规定文本的方向 / 书写方向2
letter-spacing设置字符间距1
line-height设置行高1
text-align规定文本的水平对齐方式1
text-decoration规定添加到文本的装饰效果1
text-indent规定文本块首行的缩进1
text-transform控制文本的大小写1
unicode-bidi 2
vertical-align设置元素的垂直对齐方式1
white-space设置怎样给一元素控件留白1
word-spacing设置单词间距1
text-emphasis向元素的文本应用重点标记以及重点标记的前景色。1
hanging-punctuation指定一个标点符号是否可能超出行框3
punctuation-trim指定一个标点符号是否要去掉3
text-align-last当 text-align 设置为 justify 时,最后一行的对齐方式。3
text-justify当 text-align 设置为 justify 时指定分散对齐的方式。3
text-outline设置文字的轮廓。3
text-overflow指定当文本溢出包含的元素,应该发生什么3
text-shadow为文本添加阴影3
text-wrap指定文本换行规则3
word-break指定非CJK文字的断行规则3
word-wrap设置浏览器是否对过长的单词进行换行。3

20、2D/3D transition属性

属性说明CSS
transition此属性是 transition-property、transition-duration、transition-timing-function、transition-delay 的简写形式。3
transition-property设置用来进行过渡的 CSS 属性。3
transition-duration设置过渡进行的时间长度。3
transition-timing-function设置过渡进行的时序函数。3
transition-delay指定过渡开始的时间。3
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值