先从html5+css3开始归纳吧
Html5的新特性归纳
- 自封闭标签(单标签)不写关闭符号也是合法的。(可以使用) 如:<img src="images/0.jpg" alt="">
- 所有的type属性不写也是合法的。(可以使用) <style></style><link href=””><script></script>
- 属性值不写双引号也是合法的。(别使用) <img src=images/12.jpg alt=图片加载失败>
- 标签大小写都合法。(别使用)
H5控件篇
div可以拆分为更多的标签
<section></section>,<nav></nav>,<header>,<footer>,<aside>
这些标签都和div一样,是容器级标签,可以互相嵌套,放什么都行,放自己也行。都是block-level,标准流中是块级元素。
figure元素和figcaption元素
figure元素是元素组合,带有可选标题。figure元素用来表示网页上一块独立的内容,将它从删除后不会对网页上的其他的内容造成任何影响。figure元素所表示可以是图片、代码统计或者示例,也可以用于视频插件、音频插件。figure元素支持accesskey、class、contenteditable、contentmene、date-*、draggable等html5全局属性,figure元素支持onafterprint、onbeforeprint、onbeforeunload、onerror、onload等事件属性。
figcaption元素
figcaption元素表示figure元素的标题,它从属于figure元素,在figure元素内部书写,在figure元素的从属元素的前面或者后面。建议一个figure元素放置一个figcaption元素,可以放多个其他的元素。
mark元素
mark元素用于突出或者高亮显示,对于用户有重要参考作用的一段文字,使用mark元素通常是为了引起读者注意,因为标出来的文字与用户的当前操作有关,通常该元素对于当前用户具有很好的
自动感应标签:datalist
可以代码javascript部分功能(画布局部区域展开或收缩的方法),不建议使用这个功能,因为部分浏览器不支持details元素。sunmary元素从属于details元素,鼠标点击sunmary元素中的内容文字时,details元素中的元素会展开或者收缩。如果details元素内没有sunmary元素,浏览器会提供文字供点击,浏览器为提供一个诸如上下箭头之类的图标,标示区域可以被搜索或者展开。details元素可以设置open属性,打开details元素所表示的局部区域处于展开状态。details元素内不仅可以放置文字,也可以放置表单、插件或对于一个统计图提供的详细数据表格。
<p>
2 你学会技能:<input type="text" list="ganying">
3 <datalist id="ganying">
4 <option value="html">网页制作</option>
5 <option value="css">样式设置</option>
6 <option value="javascript">用户交互</option>
7 </datalist>
</p>
time标签,时间语义化标签。是行内元素。
details和summary。有总结含义的标签。
表单
form文本框 有提示框的作用
1<form action="" id="biaodan"></form>
<input type="text" value="用户名" form="biaodan">
label标签改变 一般用在登录界面
1<label>
2 请输入用户名:<input type="text">
</label>
placeholder属性 起到占位符的作用 可以在input表单中使用
autofocus属性 主动获取焦点属性 一进入网站就就会获取的焦点
required属性 必填属性、
输入控件
input标签更改type属性值表示不同的表单元素
电子邮箱:email
电话:tel
搜索框:search
网址:url
数字:number min:最小值 max:最大值
拖拽条:range min:最小值 max:最大值
日期:date
颜色:color
<form action="1.php" method="get">
<label>
请输入用户名:<input type="text" value="默认文本" autofocus>
</label>
<p>
你学会技能:<input type="text" list="ganying">
<datalist id="ganying">
<option value="html">网页制作</option>
<option value="css">样式设置</option>
<option value="javascript">用户交互</option>
</datalist>
</p>
<p>
请输入昵称:<input type="text" placeholder="占位符" required>
</p>
<p>
电话:<input type="tel">
</p>
<p>
电子邮箱:<input type="email">
</p>
<p>
网址:<input type="url">
</p>
<p>
搜索框:<input type="search">
</p>
<p>
数字:<input type="number" min="1" max="50" value="25">
</p>
<p>
拖拽条:<input type="range" min="100" max="200" value="150">
</p>
<p>
日期:<input type="date">
</p>
<p>
颜色:<input type="color">
</p>
<input type="submit" value="立即提交">
</form>
Html5插入音频
通过viode标签 source插入路径
src:插入视频路径
controls:控制条
autoplay:自动播放
loop:循环播放
1<video controls>
2 <source src="video/2.mp4">
</video>