何为HTML5?
W3school给予的解释:
百度百科给予的解释:
简单来说HTML5就是一种全新的HTML标准,在原有的HTML基础上新增了许多标签、属性,同时也舍弃了许多标签属性。
HTML5删除的标签
<font></font> //规定文本的字体、字体尺寸、字体颜色。
<comment></comment> //注释标签
<context></context>
<center></center> //将 HTML 网页中的文本进行水平居中处理:
<basefont /> //规定页面上的默认字体颜色和字号
<big></big> //标签呈现大号字体效果。
<frame /> //标签定义 frameset 中的一个特定的窗口(框架)。
<frameset></frameset> //标签定义一个框架集
<noframes></noframes> // 元素可为那些不支持框架的浏览器显示文本
HTML5新增的属性(常用)
1、placeholder :占位符,当用户输入的时候,里面的文字消失
用法:
<input type="text" placeholder="请输入用户名">
效果如下:
2、autofocus:规定当页面加载时 input 元素应该自动获得焦点
用法:
<input type="text" placeholder="请输入用户名" autofocus="autofocus" />
效果如下:
3、multiple:多文件上传
用法:
<input type="file" multiple="multiple" />
效果如下:
4、required:input框为必填项,内容不能为空。 用法:
<input type="text" required="required">
效果如下:
HTML5新增的input type属性值:
1.email:输入邮箱格式
使用方法:
<input type="email">
2.tel:输入手机号码格式
使用方法:
<input type="tel">
3.url:输入url格式
使用方法:
<input type="url">
4.numberl:输入数字格式 使用方法:
<input type="number">
5.search:搜索框(体现语义化)
使用方法:
<input type="search">
6。range:自由拖动滑块
使用方法:
<input type="range">
效果如下:
7.time:小时分钟
使用方法:
<input type="time">
效果如下:
8.date:年月日
使用方法:
<input type="date">
9.datetime:时间
使用方法:
<input type="datetime">
10.month:月年
使用方法:
<input type="month">
HTML5新增的标签
图像:
<canvas>:画板(位图。放大会失帧,常用作绘画走势图、简单的图样)
<svg>:画板(矢量图,放大不失帧,常用作绘画地图、logo)
音频和视频:
<audio>:音频标签,定义声音内容
<video>:视频标签,定义视频内容
HTML5布局使用的语义化标签:
<header>:头部或整个页面的标题
<footer>:表示底部, 放友情链接, 帮助中心, logo, 版权。
<nav>:nav表示导航, 网站导航按钮放在这里面。
<section>放页面的主体内容。
<article>: article表示文章, 放页面的数据。
<aside>:aside表示边,作为内容侧边栏,页面的辅助信息
<mark>::高亮显示
标签语义化的解释以及好处:
标签语义化就是根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
标签语义化的好处:
- HTML结构清晰
- 代码可读性较好
- 无障碍阅读
- 搜索引擎可以根据标签的语言确定上下文和权重问题,提高搜索引擎SEO
- 移动设备能够更完美的展现网页(对css支持较弱的设备)
- 便于团队维护和开发
注: 其实现在很多大型公司的前端很注重标签语义化,团队组员能够很好的理解页面结构,便于维护,不必再焦头烂额的猜测这部分代码代表什么内容,省下了许多没必要的时间,所以在以后的页面设计中,我们慢慢的将使用语义化标签养成一种习惯,就可以方便很多人。