标签：img   时间   poster   html标签   selected   预加载   disable   --   文本   

回顾

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.../none
list-style-position: outside/inside
list-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">
placeholder
maxlength
value

密码框

<input name="" type="password">
placeholder
maxlength
value

单选按钮

<input type="radio" name="" value="" checked>

复选框

<input type="checkbox" name="" value="" checked>

文件选择

<input type="file" name="">
multiple 多个

规定类型的文本输入框 (H5)

input:email
input:url
input:number   max/min/step
input:search
input: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:button
button: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  自动获取焦点  所有的表单元素  H5
autocomplete   自动完成 on/off   H5
pattern
title
required

4 视频/音频(H5)

视频

<video src=""></video>
controls
autoplay
poster= ""
preload 预加载
loop

mp4 / ogg / webm

音频

<audio src=""></audio>
controls
autoplay
preload
loop

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>

页面的组成-列表/表格/表单/视频音频

标签：img   时间   poster   html标签   selected   预加载   disable   --   文本   

原文地址：https://www.cnblogs.com/Roc-Atlantis/p/9390631.html