回顾
CSS属性
边框属性
border:
border-style
border-color
border-width
border-left:
border-right
border-bottom
border-top
border-style-left
border-style-right
border-style-top
border-style-bottom
border-*-left/top/right/bottom
内边距
pading / padding-left/right/top/bottom
背景
background: color image repeate postion
background-color
background-image
background-repeat
background-position
background-attachment
CSS sprites 精灵图
background-color:red;
background:url()
background:
background-color:
尺寸
width/max-width/min-width
height...
HTML标签
超链接和锚点
<a href="" target="" title="" download></a>
<div id="锚点名"></div>
<a name="锚点名"></a>
图片和图片映射
<img src="" title="" usemap="#mymap">
<map name="" id="">
<area shape="" coords="" href="" target="" title="">
</map>
页面中的组成部分
1 列表
1.1 列表标签
有序列表
<ol> <li>
<ol>的属性： start type ="1/a/A/i/I" reversed
无序列表
<ul><li>
定义列表
<dl> <dt> <dd>
1.2 列表相关的CSS属性
适用于<ol>和<ul> 也可以设置给 <li>
list-style-type: disc/circle/square.../nonelist-style-position: outside/insidelist-style-image: url()list-style: 复合属性
2 表格
2.1 HTML标签
<table></table><thead></thead><tbody></tbody><tfoot></tfoot> <caption></caption> 标题<tr></tr> 行<td></td> 单元格<th></th> 表头单元格
2.2 CSS属性
table-layout: auto / fixed 列宽固定(相等)border-collapse: separate/ collapse 合并单元格边框border-spacing: 长度; 单元格和单元格之间的间隙 单元格不能合并caption-side: top/bottom 标题的位置empty-cells:hide/show 空的单元格显示/隐藏 单元格不能合并
2.3 合并单元格
td或者th的属性： colspan 跨列 rowspan 跨行
3 表单
3.1 表单的组成(控件)
文本输入框
<input name="" type="text">placeholdermaxlengthvalue
密码框
<input name="" type="password">placeholdermaxlengthvalue
单选按钮
<input type="radio" name="" value="" checked>
复选框
<input type="checkbox" name="" value="" checked>
文件选择
<input type="file" name="">multiple 多个
规定类型的文本输入框 (H5)
input:emailinput:urlinput:number max/min/stepinput:searchinput:tel
范围选择框 (H5)
<input type="range" name="" value="" max="" min="" step="">
颜色选择(H5)
input:color
时间日期(H5)
<!--日期--><input type="date" name="date">?<!--月份--><input type="month" name="month">?<!--星期--><input type="week" name="week">?<!--时间--><input type="time" name="time">?<!--时间日期--><input type="datetime-local" name="dt">
下拉选项
<select name=""> <option value=""></option> <option value="" selected></option> <option value=""></option></select>?multiple 多选
多行文本
<textarea name="" rows="" cols=""></textarea>maxlenth
按钮
input:submit input:reset input:buttonbutton:submit button:reset button:button 默认submit
3.2 表单标签
<form></form> action method<input> type name max/min/step maxlength checked value placeholder（H5） list(H5)<select></select> name<option></option> value<textarea></textarea> rows cols name placeholder?<fieldset></fieldset><legend></legend>?<datalist></datalist>(H5) 嵌套option?
3.3 表单验证 （H5）
必须
required 属性 给所有可以输入的表单控件
指定类型
email/url/number
正则
pattern 属性 所有可输入 ttile
3.4 表单控件的通用属性
disabled 所有的表单控件元素 禁用enabled 可用readonly 只读 用于可以输入的表单控件(input/textarea)autofocus 自动获取焦点 所有的表单元素 H5autocomplete 自动完成 on/off H5patterntitlerequired
4 视频/音频(H5)
视频
<video src=""></video>controlsautoplayposter= ""preload 预加载loop
mp4 / ogg / webm
音频
<audio src=""></audio>controlsautoplaypreloadloop
mp3 / wav / ogg
source
<video> <source src="" type=""> <source src="" type=""> <source src="" type=""></video>?<audio> <source src="" type=""> <source src="" type=""> <source src="" type=""></audio>
原文地址：https://www.cnblogs.com/Roc-Atlantis/p/9390631.html