HTML5新增标签

最新推荐文章于 2020-06-01 06:58:12 发布

孝客

最新推荐文章于 2020-06-01 06:58:12 发布

阅读量2.3k

点赞数

本文链接：https://blog.csdn.net/Ywm103025/article/details/84842384

版权

这篇博客详细介绍了HTML5中新增的标签，包括它们的种类、使用原因及带来的好处。讨论了details、summary和dialog等元素的用途，并探讨了新input类型的引入以及如何修改input框内文字颜色。同时，提到了html5shiv库的作用，帮助理解在老浏览器中支持HTML5新特性的解决方案。

摘要由CSDN通过智能技术生成

HTML5新增标签

作者: 严孝孝

课程内容

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">

最低0.47元/天解锁文章

孝客

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
HTML5新增标签

HTML5新增标签作者: 严孝孝目录1.html5新标签2.html5新input类型3.html5新input属性4.html5shiv库课程内容1.html5新标签q.html5 新标签有哪些？ header，footer，section，nav， aside， article 语义化标签 details， summary 详情和摘要 dialog&lt;...
复制链接

扫一扫