HTML5新增标签
作者: 严孝孝
目录
- 1.html5新标签
- 2.html5新input类型
- 3.html5新input属性
- 4.html5shiv库
课程内容
1.html5新标签
q.html5 新标签有哪些?
header,footer,section,nav, aside, article 语义化标签
details, summary 详情和摘要
dialog
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
#d{
border: none;
background-color: lightblue;
}
</style>
</head>
<body>
<header>
header意思头部, 页面上方, 区域的上方
</header>
<nav>
nav表示导航, 网站导航按钮放在这里面
</nav>
<section>
放页面主体内容
<nav>
</nav>
<div>
<article>
article表示文章, 放页面的数据
</article>
</div>
<aside>
aside表示边, 作为侧边栏
</aside>
</section>
<footer>
footer表示底部, 放友情链接, 帮助中心, logo, 版权
</footer>
<button onclick="dealOpen()">打开/关闭</button>
<script type="text/javascript">
var d = document.querySelector("dialog")
function dealOpen(){
var o = d.getAttribute("open")
if(o == null){
d.setAttribute("open","")
}else{
d.removeAttribute("open")
}
}
</script>
</body>
</html>
q.为什么使用这些标签, 好处?
标签是有语义, 利于代码的可阅读性
便于搜索引擎SEO
q.details, summary作用?
实现文本展开和隐藏的功能, 评论
<details>
<summary>
XX评论: 今天天气不错
</summary>
<div>
今天天气不错,风和日历
</div>
</details>
q.dialog作用?
实现对话框功能, 注意属性open加上现实, 去掉不显示
<dialog id="d" >
瓶子,棋子,傻子
</dialog>
2. html5新input类型
q. 有哪些新类型?
color 颜色
date,日期
datetime 日期时间
datetime-local 本地时间
month 月
time 时间
range滑动条
week 周
email 邮件
search 搜索
tel 电话
url 网址
datalist 配合输入框
output元素用于不同类型的输出,比如计算或脚本输出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">