表单标签
一个表单整体范围
action: 提交的网络地址
method: 请求方式get和post
默认明文传输(GET)不安全, 可以将method属性设置为POST改为非明文传输
<form action="" method="">
所有的表单内容,都要写在form标签里面
</form>
input标签
type: 输入方式
<input type="text"/> 文本
<input type="password"/> 密码
<input type="radio"> 单选框 (默认多选, 互斥在多个radio标签中添加 相同的name属性), checked默认显示
<input type="checkbox"> 多选框 同样添加相同的name属性, checked默认显示
<input type="button"> 按钮 作用可点击
<input type="reset" /> 重置表单 重置form信息
<input type="hidden"> 隐藏信息 隐藏提交到服务器的信息
<input type="submit" /> 提交表单按钮 把表单数据发送到action属性指定的地址
value: 添加默认值
maxlength: 输入字符最大长度
label标签
绑定表单标签,方便鼠标点击聚焦
绑定: 给label标签for属性添加一个表单元素一样的id值
select标签
创建表单里的待选列表, 可选择某一个选项
<select>
<option>北京</option>
<option>河北</option>
<option>河南</option>
<option>山东</option>
<option>山西</option>
<option>湖北</option>
<option selected="selected">贵州</option> selected默认值
</select>
<select>
<optgroup label="北京市"> optgroup添加分组
<option>海淀区</option>
<option>昌平区</option>
<option>朝阳区</option>
</optgroup>
<optgroup label="广州市">
<option>天河区</option>
<option>白云区</option>
</optgroup>
<option selected="selected">贵州</option>
</select>
多行文本框(文本域)
cols: 列
row:行
<textarea cols="30" rows="10">默认</textarea>
默认可以拉动
<!--禁止手动拉伸-->
<style type="text/css">
textarea{
resize: none;
}
</style>
H5新增标签
html只能处理文本和图片, h5在基础之上可以处理多媒体数据
多媒体标签
video标签 播放视频
src:播放路径
autoplay:自动播放
controls:控制条
poster:占位海报
loop:播放次数。默认-1循环,一般用于做广告视频
preload: 预加载视频。preload和autoplay相冲, 设置了autoplay属性 preload会失效
muted: 静音
width/height: 视频宽高
格式1:
<video src="">
</video>
格式2:
<video>
<source src="" type=""></source>
<source src="" type=""></source>
</video>
格式2的意义在与:
5大厂商浏览器都有自己的格式,W3C为了解决浏览器适配问题推出第二种
注意点: 过去的一些浏览器是不支持HTML5标签,同样无法播放,以后通过一个JS的框架html5media来实现
audio标签 播放音频
和video标签的使用基本一样,height/width/poster属性不能用
格式:
<audio src="">
</audio>
<audio>
<source src="" type="">
</audio>
summary标签 详情和概要标签
summary描述概要,details描述详情,默认折叠
格式:
<details>
<summary>概要信息</summary>
详情信息
</details>
marquee标签
作用: 跑马灯效果 ( 不是W3C推荐的标签, 在W3C文档无法查询这个标签, 但是各大浏览器支持非常好)direction: 滚动方向up
scrollamount: 滚动速度, 值越大越快
loop: 次数, 默认是-1, 也就是无限滚动
behavior: 滚动类型。弹回
<marquee>内容</marquee>
HTML中被废弃的标签
有一部分不是添加语义的,只修改样式,所以这部分标签都被废弃了b、u、i、s
<b>将文本字体加粗</b>
<u>为文本添加下划线</u>
<i>显示斜体文本效果</i>
<s>为文本添加删除线</s>
新的替代标签
<strong>着重内容</strong>
<ins>新插入的文本</ins>
<em>强调内容</em>
<del>已删除的文本</del>
HTML实体
< 输出一个小于符号 < 英语less than
> 输出一个大于符号 > 英语greater than
  输出一个空格 英语non-breaking spacing
只需了解:
表格标签
table定义表格 ,tr定义行,td定义单元格
border: 设置边框。默认为0看不到
cellspacing: 设置外边距。 默认单元格之间有2个像素的间隙
cellpadding: 设置内边距。默认边缘距离内容有1个像素
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
数据列表
请输入你的车型: <input type="text" list="cars">
<datalist id="cars">
<option>奔驰</option>
<option>宝马</option>
<option>奥迪</option>
<option>路虎</option>
<option>宾利</option>
</datalist>
属性:
- direction: 设置滚动方向 left/right/up/down
- scrollamount: 设置滚动速度, 值越大就越快
- loop: 设置滚动次数, 默认是-1, 也就是无限滚动
- behavior: 设置滚动类型 slide滚动到边界就停止, alternate滚动到边界就弹回