常用标签
块级元素
div form table ul li ol dl dt dd h1-6 p header footer nav figure section addres aside hgroup hr br
行内元素
span a strong b i em time audio label
行内块级元素
img input select textarea video
<table border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>
合并单元格:colspan rowspan
<form action="后台程序(jsp php aspx)" method="get/post">
<input type="#" name="" value="">
#:
text
password
radio
checkbox
file
hidden
button
submit
reset
image
email
url
search
tel
date(month week time datetime datetime-local)
color
range
number
<select>
<option value="" selected></option>
</select>
<textarea cols="" rows=""></textarea>
</form>
表单元素属性
checked:radio checkbox
selected:option
disabled:input
enabled:
readonly:
maxlength:
placeholder:
multiple:select input="file"
max
min
step
autofocus
autocomplete
formaction
formmethod
list和datalist和option
<input type="text" list="chengjinrui">
<datalist id="chengjinrui">
<option value="">文本</option>
</datalist>
<a href="" target="_blank/_self/_parent" title=""></a>
<img src="路径" width height alt title>
路径:
相对路径
绝对路径
本地:
网络:
所有标签的共同属性
class:
id:
style:
title:
css属性
样式表
1、行内样式表 <p style=""></p>
2、内部样式表 <style></style>
3、链接式
<link href="css的路径" rel="stylesheet">
4、导入式
<style>
@import url(路径);
</style>
样式表的优先级
就近原则
选择器:
基本选择器
*
id
class
element(标签选择器)
层次选择器也叫关系选择器
群组选择器: ,
后对选择器: 空格
子元素选择器: >
紧邻的兄弟选择器: +
相邻的兄弟选择器: ~
伪类选择器:
:first-child
:last-child
:nth-child
:first-of-type
:last-of-type
:nth-of-type
:link
:visited
:hover
:active
:focus(可以应用到input text上 input:focus{background:red;})
:target
:not
属性选择器
[attribute]([type] img[width])
[attribute=value]([type="text"])
[attribute^=value]
[attribute$=value]
[attribute*=value]
伪元素选择器
::first-line
::first-letter
::after
::before
万能清除浮动
选择器的优先级
!important>行内>id>class>element>*
选择器的权重
行内>id>class>element>*
1000 100 10 1 0
css属性
文字属性
font-family:
font-size:
font-weight:
font-style:
color
font-face:服务器端字体
段落属性
text-align:center left right
text-indent:2em
text-decoration:underline/none
text-transform:第一个字母大写uppercase lowercase capitalize
white-space:nowrap
line-height:
text-shadow:
text-overflow:
letter-spacing:
word-spacing:
word-break:
背景属性(background)
background-color
background-image:url
background-image:linear-gradient()
background-repeat:
background-position:
background-size:
background-clip:
background-origin:
background:url(),url()
列表属性
list-style:none;
边框属性
border:
border-top/left/bottom/right;
border-radius:
外边框
margin:
margin-top/left/bottom/right:
内边距
padding:
padding-top/left/bottom/right:
box-shadow
尺寸属性
width
height
布局属性
float
clear
定位属性
position:relative/absolute/fixed
z-index
变形属性
transform:scale/rotate/translate/skew
过渡属性
transtion:all 3s linear 3s
动画属性
animation:name 3s linear 3s infinite alternate/reverse/revers-alternate
box-sizing:border-box;
resize:none;
outline:none;
chrome
-webkit-text-fill-color
-webkit-text-stroke
块级元素
div form table ul li ol dl dt dd h1-6 p header footer nav figure section addres aside hgroup hr br
行内元素
span a strong b i em time audio label
行内块级元素
img input select textarea video
<table border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>
合并单元格:colspan rowspan
<form action="后台程序(jsp php aspx)" method="get/post">
<input type="#" name="" value="">
#:
text
password
radio
checkbox
file
hidden
button
submit
reset
image
url
search
tel
date(month week time datetime datetime-local)
color
range
number
<select>
<option value="" selected></option>
</select>
<textarea cols="" rows=""></textarea>
</form>
表单元素属性
checked:radio checkbox
selected:option
disabled:input
enabled:
readonly:
maxlength:
placeholder:
multiple:select input="file"
max
min
step
autofocus
autocomplete
formaction
formmethod
list和datalist和option
<input type="text" list="chengjinrui">
<datalist id="chengjinrui">
<option value="">文本</option>
</datalist>
<a href="" target="_blank/_self/_parent" title=""></a>
<img src="路径" width height alt title>
路径:
相对路径
绝对路径
本地:
网络:
所有标签的共同属性
class:
id:
style:
title:
css属性
样式表
1、行内样式表 <p style=""></p>
2、内部样式表 <style></style>
3、链接式
<link href="css的路径" rel="stylesheet">
4、导入式
<style>
@import url(路径);
</style>
样式表的优先级
就近原则
选择器:
基本选择器
*
id
class
element(标签选择器)
层次选择器也叫关系选择器
群组选择器: ,
后对选择器: 空格
子元素选择器: >
紧邻的兄弟选择器: +
相邻的兄弟选择器: ~
伪类选择器:
:first-child
:last-child
:nth-child
:first-of-type
:last-of-type
:nth-of-type
:link
:visited
:hover
:active
:focus(可以应用到input text上 input:focus{background:red;})
:target
:not
属性选择器
[attribute]([type] img[width])
[attribute=value]([type="text"])
[attribute^=value]
[attribute$=value]
[attribute*=value]
伪元素选择器
::first-line
::first-letter
::after
::before
万能清除浮动
选择器的优先级
!important>行内>id>class>element>*
选择器的权重
行内>id>class>element>*
1000 100 10 1 0
css属性
文字属性
font-family:
font-size:
font-weight:
font-style:
color
font-face:服务器端字体
段落属性
text-align:center left right
text-indent:2em
text-decoration:underline/none
text-transform:第一个字母大写uppercase lowercase capitalize
white-space:nowrap
line-height:
text-shadow:
text-overflow:
letter-spacing:
word-spacing:
word-break:
背景属性(background)
background-color
background-image:url
background-image:linear-gradient()
background-repeat:
background-position:
background-size:
background-clip:
background-origin:
background:url(),url()
列表属性
list-style:none;
边框属性
border:
border-top/left/bottom/right;
border-radius:
外边框
margin:
margin-top/left/bottom/right:
内边距
padding:
padding-top/left/bottom/right:
box-shadow
尺寸属性
width
height
布局属性
float
clear
定位属性
position:relative/absolute/fixed
z-index
变形属性
transform:scale/rotate/translate/skew
过渡属性
transtion:all 3s linear 3s
动画属性
animation:name 3s linear 3s infinite alternate/reverse/revers-alternate
box-sizing:border-box;
resize:none;
outline:none;
chrome
-webkit-text-fill-color
-webkit-text-stroke