行高 line-height:数值 | inherit | normal
字间距 letter-spacing: 数值 | inherit | normal
显示 display:
none: 不显示，使用的场景非常多
block: 把内联标签变成块级标签
inline: 把块级标签变成内联标签
inline-block:变为行间块元素
宽度 width: 长度 | 百分比 | auto
高度 height: 长度 | 百分比 | auto
清除 clear: none | left | right | both
外边距 margin: 上 右 下 左
内边距 padding: 上 右 下 左
定位 position: absolute | relative
超出 overflow: visible | hidden | scroll auto
浮动 float: left | right | none在页面布局的时候用的最多
fixed 一般用来写网页顶端的固定导航条，或者两侧的菜单。
absolute与relative 这两者一般配合使用，用于调整div之间的相对位置
opacity 0-1 表示透明度
颜色 color: 数值
大小 font-size: 数值
字体 font-family: "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
样式 font-style: oblique(偏斜体) italic(斜体) normal(正常)
粗细 font-weight: bold(粗体) lighter(细体) normal(正常)
背景 background: transparent/透视背景*/
颜色 background-color: 数值
图片 background-image: url() | none
重复 background-repeat: inherit | no-repeat | repeat | repeat-x | repeat-y
大小写 text-transform: capitalize | uppercase | lowercase | none
修饰 text-decoration: underline(下划线) overline(上划线) line-through(删除线) blink(闪烁)
排列 text-align: justify | left | right | center
缩进 text-indent: 数值 | inherit
阴影 text-shadow:数值
边框样式 border-style: dotted(点线) dashed(虚线) soliddouble(双线) groove(槽线) ridge(脊状) inset(凹陷) outset
边框宽度 border-width:
边框颜色 border-color: top值 right值 bottom值 left值
类型 list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
位置 list-style-position: outside | inside
图像 list-style-image: URL
简写 list-style:目录样式类型 | 目录样式位置 | url
margin-top:10px(上边界)
margin-right:10px(右边界)
margin-bottom:10px(下边界值)
margin-left:10px(左边界值)
margin-inside:
margin-outside:
padding-top:10px/ 上边框留空白 /
padding-right:10px/ 右边框留空白 /
padding-bottom:10px/ 下边框留空白 /
padding-left:10px/ 左边框留空白 /
vertical-align:sub/ 下标字 /
vertical-align:super/ 上标字 /
vertical-align:top/ 垂直向上对齐 /
vertical-align:bottom/ 垂直向下对齐 /
vertical-align:middle/ 垂直居中对齐 /
vertical-align:text-top/ 文字垂直向上对齐 /
vertical-align:text-bottom/ 文字垂直向下对齐 /
a / 所有超链接 /
a:link / 超链接文字格式 /
a:visited / 浏览过的链接文字格式 /
a:active / 按下链接的格式 /
a:hover / 鼠标转到链接 /
光标形状 cursor:hand | crosshair | text | wait | move | help | e-resize | nw-resize | w-resize | s-resize | se-resize | sw-resize
/ 也可以自定义 /
cursor: hand/ 链接手指 /
cursor: crosshair / 十字体 /
cursor: s-resize / 箭头朝下 /
cursor: move / 十字箭头, 朝右/
cursor: help / 加一问号 /
cursor: w-resize / 箭头朝左 /
cursor: n-resize / 箭头朝上 /
cursor: ne-resize / 箭头朝右上 /
cursor: nw-resize / 箭头朝左上 /
cursor: text / 文字型/
cursor: se-resize / 箭头斜右下 /
cursor: sw-resize / 箭头斜左下/
cursor: wait / 漏斗
1、什么是HTML 属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。
举例来说，比如你用html标签定义一只猫，<cat></cat>
那么如何给这只猫设置颜色，年龄，大小，公母呢？
就是通过属性设置，比如
<cat name="Tom" color="black" age="2" size="25cm" gender="male" ></cat>即定义了一只名字叫Tom，黑色，2岁，体长25cm，性别是公的猫。
2、属性实例
HTML 链接由 <a>标签定义。链接的地址在 href 属性中指定：
<a href="http://www.w3school.com.cn">This is a link</a>更多 HTML 属性实例
属性例子 1:
<h1>定义标题的开始。
<h1 align="center">拥有关于对齐方式的附加信息。
TIY : 居中排列标题
属性例子 2:
<body>定义 HTML 文档的主体。
<body bgcolor="yellow">拥有关于背景颜色的附加信息。
TIY : 背景颜色
属性例子 3:
<table>定义 HTML 表格。
<table border="1">拥有关于表格边框的附加信息。
html5 新增了的表单元素和属性如下：属性：
1、 form属性
在HTML5中表单元素可放在表单之外，通过给该元素添加form属性即可。
2、 formaction属性
HTML5给提交按钮(如button、submit、image等)增加了formaction属性，以便提交到不同的服务器地址
3、formmethod属性
既然对提交按钮有了formaction属性，就相应的有了formmethod属性
4、 placeholder属性
给文本框(text或textarea)处于未输入状态时的一种文字提示
5、autofocus属性
自动获得焦点，一个页面只能有一个控件具有该属性
6、 list属性
HTML5为单行文本框增加了一个list属性，该属性的值为某个datalist元素的id，增加该属性后的单行文本框类似选择框(select)，但允许用户自定义输入，为了避免没有支持该蒜素的浏览器出现错误，我们通常使用CSS设置不显示
6、autocomplete属性
自动完成允许浏览器预测对字段的输入，在HTML5之前自动完成不能自定义设置，任何人都可以看到，所以存在安全隐患，在HTML5中可以通过此属性来指定“on”、”off“或“”(不指定)三种，不指定时使用浏览器的默认值，这取决于各浏览器的决定。
元素：
HTML5大幅度地增加和改良了input元素的种类
search 与text文本框类似，用于搜索；
tel 与text文本框类似，用于电话；
url 与text文本框类似，用于url格式的地址；
email 与text文本框类似，用于email格式的地址；
number 与text文本框类似，用于数值；
range 只允许输入一段范围内的数值，通过min和max属性来设置范围；
color 颜色文本框，“#000000”格式的文字；
file 文件选择文本框，HTML5中通过multiple属性可以多选；
datetime、date、month、week、time、datetime-local 各种日期与时间输入的文本框；
output 定义不同类型的输出；
表单验证
自动验证
所谓自动验证，就是通过为元素添加相应的属性来达到验证的要求
1、 required属性
具有该属性的元素，如果其内容为空则不允许提交，并给出相应的提示
2、pattern属性
具有该属性的元素，如果内容不为空则把内容与pattern的值进行正则匹配，匹配不成功则不通过并提示
3、min属性和max属性
它们是值类型和日期类型的input元素专用属性，限制了输入的范围
4、 step属性
控制元素的值增加或减少的步幅，如输入11-100之间的数字，且步幅是5，那么只能输入11、16、21....
显示验证
除了给元素添加属性来自动验证外，在HTML5中，form元素与输入元素(input)包括select元素和textarea都具有一个checkValidity方法，调用该方法可以进行手动验证，checkValidity方法以boolean的形式返回验证结果。
取消验证
取消表单验证有两个属性：用于form的novalidate和用于submit的formnovalidate：
自定义错误
在HTML5中没经过验证的表单浏览器会有默认的提示，但也提供了通过JavaScript的来设置自定义错误提示信息
增强的页面元素
1、figure元素
figure是个组合元素，可以带标题figcaption，一个figure只允许放置一个figcaption
2、details元素
details提供了一种替代Javascript的、将画面上局部区域进行展开或收缩的方法
3 、mark元素
mark元素表示页面需要突出显示或高亮显示的部分，经典的是搜索结果
4、progress元素
可以给progress设置value和max属性，value表示已经进行的，max表示总数，value和max只能为有效的浮点数，value必须大于0小于等于max。如果不给progress设置这两个属性，则是动态显示正在进行，进度不确定。
5、 meter元素
定义度量衡
6、改良的ol列表
在HTML5中为ol元素添加了start属性和reversed属性
7、改良的dl列表
dl是专门用来定义术语的列表，在HTML5中为dt增加了名字dfn
8、 另外还有cite用于表示作者，small用于标识“小型文本”等
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）