前端基础-HTML5新特性
html5的新特点
1.语法更简单
a) 头部声明
<!doctype html>
b) 简化了字符集声明
<meta charset="utf-8">
2.语法更宽松
a) 可以省略结束符的标签
li、dt、dd、p、optgroup、option、tr、td、th
b) 可以完全省略的标签
html、head、body
3.标签语义化
增加了很多标签，在作页面的时候更加具有语义（定义了一些原本没有语义的div模块为有鲜明结构的语义模块）
a) <header>标记定义一个页面或一个区域的头部
b) <nav>标记定义导航链接
c) <article>标记定义一篇文章内容
d) <section>标记定义网页中一块区域
e) <aside>标记定义页面内容部分的侧边栏
f) <footer>标记定义一个页面或一个区域的底部
语义化标签图示 |
|---|
在这里插入图片描述
4.表单新增常用属性------要求掌握
required：必填
placeholder：输入内容提示
autofocus：自动获取焦点-----自动帮我们将光标点进去
<form method="post" action="http://www.baidu.com">
<!-- required 必填，必须的 -->
<!-- 自动获取焦点----自动将光标定位到表单中 -->
<input type="text" placeholder="请输入用户名" autofocus="autofocus" required="required" />
<input type="submit" />
</form>效果图 |
|---|
在这里插入图片描述
5.input新增type属性值
a) type=“email”，文本框中只能输入email地址
示意图 |
|---|
在这里插入图片描述
b) type=“date”，日期控件
示意图 |
|---|
在这里插入图片描述
c) type=“time”
示意图 |
|---|
在这里插入图片描述
d) type=“month”
示意图 |
|---|
在这里插入图片描述
e) type=“week”
示意图 |
|---|
在这里插入图片描述
f) type=“number”，唤醒数字键盘
示意图 |
|---|
在这里插入图片描述
g) type=“range”，滑块
示意图 |
|---|
在这里插入图片描述
h) type=“color”
示意图 |
|---|
在这里插入图片描述
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
