一、HTML文档主体结构
1. 文档声明标签
<!Doctype html>
2. 网页开始结束标签:
<html></html>
3. 网页头部标签:<head></head>
1) 网页标题标签:<title></title>
2) 网页汉字编码标签:<mate name=”UTF-8”>
3) 设置网页title图标标签:<link rel=”shortcut icon” href=”favicon.ico”/>
4) 将文档超链接设置为从新页面打开标签:<link target=”_blank’ />
5) 网页引入外部CSS样式标签(如:test.css):<link rel=”stylesheet” type=”text/css”href=”” >
6) 网页引入外部JS文件标签(如: test.js):<script src=”” type=”text/javascript”></script>
4. 网页主体标签:<body></body>
二、文本标签
1. 标题标签:<h1...6></h1...6>
2. 段落标签:<p></p>
3. 换行标签:<br/>
4. 预格式化标签:<pre></pre>
5. 水平线标签:<hr/>
6. 上标标签:<sup></sup>
7. 下标标签:<sub></sub>
8. 空格实体字符:
9. 小于号实体字符:<
10. 大于号实体字符:>
11. &符号实体字符:&
12. 乘号实体字符:×
13. 除号实体字符:&dibide;
三、超链接标签
1. 普通超链接(写出链接属性、描述属性):<a href=””></a>
2. 锚点超链接(写出实现步骤)创建锚点:<a name=”锚点名称”></a>链接锚点:<a href=”#锚点名称”></a>
不同页面的:<a href=”目标路径></a>”
四、图片标签(写出图片地址属性、图像替代文本属性)
<img src=”路径”alt=”描述图片” />
五、列表标签
1. 有序列表标签
<ol>
<li></li>
</ol>
2. 无序列表标签
<ul>
<li></li>
</ul>
3. 自定义列表标签
<dl>
<dt></dt>
<dd></dd>
</dl>
六、表格标签
1. 表格标签(写出单元格间距属性、单元格边距属性)
<table width=”宽度” bgcolor=”背景色” border=”边距” align=”左右中” cellpadding=”内容与边距的距离” cellspacing=”单元格边距”> </table>
2. 表格标题标签
<caption></caption>
3. 表格行标签
<tr></tr>
4. 表格单元格标签 (写出行合并属性、列合并属性)
<th></th><tdrowspan=”合并行” colspan=”合并列”></td>
七、表单标签
1. 表单定义标签(写出表单提交地址属性、表单提交方式属性)
<formaction=”PHP路径” method=”get/post”enctype=”application/x-www-form-urlencoded(默认)”或multipart/form-data 上传图片用这个大文件></form>
2. 单行文本框
<input type=”text”name=”” size=”” maxlength=”控制输入字数” value=”值” placeholder=”提示语”
3. 密码框
<input type=”password”name=”” value=””>
4. 多行文本框
<textarea cols=”宽度” rows=”高度”> <label for=”名称”>可以跟文本框链接</label>
5. 单选框
<input type=”radio”单选 name=”” value=”” checked=”checked”默认/>
6. 复选框
<input type=”checkbox”复选 name=”” value=””/>
7. 下拉菜单
<select name=”” size=””>
<option value=”” selected=”selected”默认选项></option>
</select>
8. 浏览框
<input type=”file” name=””/>
9. 隐藏域
<input type=”hidden”/>
10. 提交按钮
<input type=”submit”提交 name=”名称” value=”” />
<button></button>(默认提交submit)
11. 重置按钮
<input type=”reset” 重置 name=”” value=”” />
<button type=”reset”></button>
12. 普通按钮
<input type=”button”value=””/>
<button type=”button”></button>
八、框架标签
1. 框架集标签(写出分行分列属性、框架边框属性)
<frameset rows行/cols列=”10%,*”>
<frame name=”” src=”路径”noresize=”noresize”分界线能不能拖动 scrolling=”yes/no/auto” 一般默认auto 是否有滚动条/>
</frameset>
<body></body><frameset></frameset>不能嵌套使用
2. 框架标签 (写出框架名称属性、框架地址属性、大小调整属性、滚动条属性)
<a href=”跳转的页面” target=”框架名称” 在指定的框架中打开链接></a>
<a href=”...” target=”_self”></a>在当前页面打开
<a href=”” target=”_blank”></a>在新页面打开
<a href=”” target=”_top”></a>在整个页面打开
3. 内联框架标签(写出框架名称属性、框架地址属性、大小调整属性、滚动条属性、宽高属性)
<iframe name=”” src=”路径” frameborder=”0/1” 内联边框 可以设置宽高 scrolling=”no/yes/auto”是否出现滚动条</iframe>
CSS
一、字体属性
1. 字体设置 font
2. 字体大小 font-size
3. 字体风格 font-family
4. 字体加粗 font-weight
5. 字体简写属性font: stylesize/line-weight family
二、文本属性
1. 字符间距
letter-spacing
2. 单词间距
word-spacing
3. 文本修饰符
text-decoration:underline(下划线) overline(上划线)line-through(删除线)默认是:none
4. 文本水对齐方式
text-align:left/right/center
5. 文本行高
line-weight
6. 文本缩进
text-indent
7. 文本颜色
color
8.行标签转块
display=”inline-block”
三、背景属性
1. 背景颜色
background-color
2. 背景图片
background-image:url(路径)
3. 背景图片重复
background-repent:repent(重复),no-repent(不重复),
4. 背景图片位置
background-position:left/center/right 纵向:top/center/bottom;百分比/px
5. 背景图片固定
background-attachment:scroll(滚动),fixed(固定)
6. 背景简写属性
background:颜色 url:(路径) no-repent
四、列表属性
1. 列表项目符号类型
list-style-type:none/disc(默认)/circle(圆)/square(正)/decimal()/lower-romun(罗马数)
2. 使用图片作列表项目符号
list-style-image
3. 列表项目符号位置
list-style-position:outside(外)/inside(内)
4. 列表项目符号简写属性
list-style:none inside
五、光标属性
cursor:crosshair(十字形)/pointer(小手形)/text(文本I形)/wait(等待)/default(默认指针)/help(帮助?形)/auto(自动形,按默认状态根据页面元素,自行改变样式)
六、边框属性
1. 边框样式
border-style:solid
2. 边框宽度
border-width
3. 边框颜色
border-color
4. 边框简写属性
border:width solid #000
七、内填充属性
1. 上下左右填充均为25px
padding:25px 25px
2. 上下填充为25px,左右填充为50px
padding:25px 50
3. 上填充为25px,左右填充为30px,下填充为50px
padding:25px 30px 50px
4. 上下左右填充分别为10px 20px 30px 40px
Padding: 10px 20px 30px 40px
八、外边距属性
1. 上下左右边距均为25px
margin:20px
2. 上下边距为25px,左右边距为50px
margin:25px 50px
3. 上边距为25px,左右边距填充为30px,下边距为50px
margin:25px 30px 50px
4. 上下左右边距分别为10px 20px 30px 40px
margin:10px 20px 30px 40px
九、定位属性(需举例说明四种定位的用法)
position:relative(相对定位):相对于原位置定位,通过移动left/top进行移动支持负值,原来位置还保存
position:fixed(固定定位):相对于文档的左上角(left/top)或者右下角来进行定位(right/bottom)
position:absolute(绝对定位):相对于最近的那个脱离了标准流的父元素来定位,如果没有父元素就会根据当前视角左上角来定位,让出原空间位置,可以用top/left来定位
十、浮动属性(需举例说明浮动的特点)
float:none/left/right
浮动的框可以向左或者向右移动,直到它的边框碰到包含框或另一个浮动框的边框为止
无论是行内元素还是块元素只要设置了float属性,就可以用width,height设置宽高
十一、清除属性
clear:none/left/right/both(左右都清除浮动)
十二、堆叠属性
z-index:数字越大,离浏览者越近,只针对于脱离文档流元素
十三、可见性属性
visibility:hidden(隐藏某个元素)
十四、显示属性
display:none;可以隐藏某元素,而且隐藏的元素不会占任何空间
十五、溢出属性
overflow:visible(溢出默认)/hidden(隐藏)/scroll(出现滚动条)/auto(自动)