一、HTML的发展史
二、HTML5和HTML4的区别
1、更简单
2、标签的语义化
3、语法更宽松
4、多设备跨平台
5、自适应网页设计
三、文档类型声明(DTD)
DTD ( Document Type Definition )
H5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C// DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN""http://www.w3.org/TR/html4/frameset.dtd">
四、新增的HTML5标签
语义化标签
<header> 头标签
<nav> 导航标签
<section> 表示文档的结构、栏目
<footer> 页脚
<article> 文章标签
<aside> 侧边栏导航
<mark> 凸显文字
figure
用来表示网页上一块独立的内容。
figcaption
用来表示figure的标题
作为第一个或最后一个元素
output
显示表单元素结果。
datalist
提供表单选项列表
datalist.html
hgroup
<hgroup>
<h3></h3>
<h4></h4>
</hgroup>
dialog
会话框 默认隐藏绝对定位居中
Open 属性 非隐藏
embed 嵌入插件标签
video
定义视频，比如电影片段或其他视频流
*.mp4 *.ogg *.webM
<source src="xx.ogg" type="audio/ogg">
audio
定义音频，比如音乐或其他音频流
canvas
画布
改良的ol
a、可以自定义编号 start
b、可以按编号反向排序 reversed
c、可以使用type=“A”
例：
<ol start=3 >
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
</ol>
类型值 生成样式 序列举例
A 大写字母 A、B、C、D、E
a 小写字母 a、b、c、c、e
I 大写罗马数字 I、II、III、IV、V
i 小写罗马数字 i、ii、iii、iv、v
1 阿拉伯数字 1、2、3、4、5
五、删除的HTML标签
部分浏览器支持：
<marquee>
<applet>
<bgsound>
<blink>
完全抛弃：
<rb>
<acronym>
<dir>
<isindex>
<listing>
<xmp>
<nextid>
六、重新定义的HTML标签
<rb> ruby
<acronym> abbr
<dir> ul
<isindex> form与input相结合的方式替代
<listing> pre
<xmp> code
<nextid> guids
七、智能表单的使用和规范
<input type="?" />
地址栏
<input type="url" >
输入无效地址会自动提示
输入数字
<input type="number" value="25" min="10" max="100" step="5"/>
step 跳跃数
min 最小值
max 最大值
输入电子邮件
<input type="email" required="required" multiple="multiple" >
required 判断是否为空
multiple 可用逗号分隔邮件地址
拖动范围
<input type="range" value="25" min="0" max="100" step="5" >
(如果不设置最大最小值默认值为0与100)
获取颜色
<input type="color" value=""/>
(value默认是#000000 设置默认值必须是6个16进制数)
搜索框
<input type="search" value=""/>
电话输入框(语义话)
<input type="tel" value=""/>
日期年月日
<input type="date" value="yyyy-mm-dd"/>
日期年月
<input type="month" value="yyyy-mm"/>
日期年周
<input type="week" value="yyyy-W01"/>
时间 时分
<input type="time" value="hh:mm"/>
日期时间 年月日 时分
<input type="datetime-local" value="yyyy-mm-ddThh:mm"/>
日期时间 谷歌都不兼容的日期控件 safari Opera12
<input type="datetime" />
关闭智能表单验证 ： novalidate=“false”
火狐关闭缓存：autocomplete=“off”
转载：https://blog.csdn.net/weixin_45552104/article/details/102552604
查看评论