day03
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="" alt="" usemap="#mymap">
<map name="" id="">
<area shape="" coords="" href="" target="" title="">
</map>
页面中的组成部分
1 列表
1.1 HTML列表标签
有序列表
<ol></ol> 代表HTML有序列表 ，里面每一列表项使用<li>标签定义
属性
start 规定有序列表的起始值。
type 规定在列表中使用的标记类型。(1 a A i I)
reversed H5新添加 降序
无序列表
<ul></ul> 代表HTML无序列表 ，里面每一列表项使用<li>标签定义
定义列表
-
<dl></dl>定义了定义列表（definition list） -
<dt></dt>标签定义了定义列表中的项目（即术语部分） -
<dd></dd>在定义列表中定义条目的定义部分。
1.2 CSS属性 列表相关的CSS属性
适用于<ol>和<ul> 也可以设置给 <li>
list-style-type: disc/circle/square.../none 设置标识符
list-style-position: outside/inside 列表有边框这个才有意义
list-style-image: url() 使用自己的图片替代标识符
list-style: none; 复合属性 把前面的全部覆盖 这个最常用
ul li:first-child 表示第一个列表项
2 表格
2.1 HTML标签
<table></table>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
<caption></caption> 标题
<tr></tr> 行
<td></td> 单元格
<th></th> 表头单元格
2.2 CSS属性 table标签的css属性
table-layout: auto / fixed 列宽固定(相等) auto(默认) 常用
border-collapse: separate/ collapse 合并单元格边框 默认独立 常用
border-spacing: 长度; 单元格和单元格之间的间隙 单元格不能合并
caption-side: top/bottom 标题的位置
empty-cells:hide/show 空的单元格显示/隐藏 单元格不能合并
2.3 html 合并单元格
td或者th的属性：
colspan 跨列
rowspan 跨行
3 表单
3.1 表单相关标签
-
<form></from>定义一个 HTML 表单，用于用户输入。属性
action
method
get
post
enctype
multipart/form-data(有文件表单时候，必须使用这个)
application/x-www-form-urlencoded
target -
<input>定义一个输入控件属性
name 必须有，否则数据无法传递
type text、password、radio、hidden、checkbox、submit、image、file、reset、button、submit、email、number、color等 -
<button></button>定义按钮属性
type submit、reset、submit
name -
<select></select>定义选择列表（下拉列表）属性
disabled 禁用
name 必须有
multiple 多选,默认会显示所有,名字要使用数组like[]
size 显示几个下拉 -
<option></option>定义选择列表中的选项。属性
value 提交的值，若没有，则提交内容
selected 定义选中项
disabled 选项禁用 -
<optgroup></optgroup>把相关的选项组合在一起属性
disabled 规定禁用该选项组。
label 为选项组规定描述。 -
<textarea></textarea>属性
cols 可见宽度
rows 可见行数
readonly 文本区只读
name 必须有
disabled 禁用 -
<label>定义 fieldset 元素的标题。 -
<fieldset></fidldset>定义围绕表单中元素的边框 -
<legend></legend>定义 fieldset 元素的标题。
3.2 表单的组成(控件)
文本输入框
<input name="" type="text">
placeholder 文本框内提示符，无实际意义
maxlength 字符最多输入10个
value 默认文本框内存在的值，可自己定义
密码框
<input name="" type="password">
placeholder
maxlength
value
单选按钮
<input type="radio" name="" value="" checked>
value：单复选没输入 要提交必须要value
checked：默认选中的选项，可以自己改变
<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女
复选框
<input type="checkbox" name="" value="" checked>
<input type="checkbox" name="hobby" value="eat"> 吃
<input type="checkbox" name="hobby" value="drink" checked> 喝
<input type="checkbox" name="hobby" value="sleep" checked> 睡
<input type="checkbox" name="hobby" value="play"> 玩
文件选择
<input type="file" name="">
multiple 多个
规定类型的文本输入框 (H5) 自动检测类型
规定类型的文本输入框（HTML5新增）
<!--邮箱-->
<input type="email" name="email" placeholder="请输入邮箱">
<!--url-->
<input type="url" name="url" placeholder="请输入网址">
<!--数字-->
<input type="number" name="num">
<input type="number" name="num" min='10' max='100' step='10'>
<!--搜索框-->
<input type="search" name="kw" placeholder="搜索">
<!--电话号码 同于text 但是用移动设备，会直接弹出数字键盘-->
<input type="tel" name="tel_num" placeholder="请输入电话号码">
范围选择框 (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> selected 默认值 multiple 多选
多行文本
<textarea name="" rows="" cols=""></textarea> maxlenth 最多输入10个单位
按钮
<!--提交按钮--> <input type="submit" value="提交"> <button>提交</button> <button type="submit">提交</button> <!--重置按钮--> <input type="reset" value="重置"> <button type="reset">重置</button> <!--普通按钮--> <input type="button" value="按钮"> <button type="button">按钮</button>
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 HTML 视频/音频(H5)
视频
<video></video> 定义视频 | 属性 | 值 | 描述 | -------- | ------------------ | ------------------------------------------------------ | autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放。 | controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 | height | pixels | 设置视频播放器的高度。 css设置 | loop | loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放。 | muted | muted | 如果出现该属性，视频的音频输出为静音。 | poster | URL | 规定视频正在下载时显示的图像，直到用户点击播放按钮。 | preload | auto metadata none | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 | src | URL | 要播放的视频的 URL。 | width | pixels | 设置视频播放器的宽度。 css设置
mp4 / ogg / webm
音频
<audio></audio> 定义音频
| 属性 | 值 | 描述
| -------- | ------------------ | ----------------------------------------------------------
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放。
| controls | controls | 如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。
| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放。
| muted | muted | 如果出现该属性，则音频输出为静音。
| preload | auto metadata none | 规定当网页加载时，音频是否默认被加载以及如何被加载。
| src | URL* | 规定音频文件的 URL。
mp3 / wav / ogg
source 解决以前浏览器不兼容的问题
<video> <source src="" type="video/mp4"> <source src="" type="video/ogg"> <source src="" type="video/webm"> </video> <audio> <source src="" type="audio/mp3"> <source src="" type="audio/wav"> <source src="" type="audio/ogg"> </audio>
