⑫HTML5与之前HTML的区别

最新推荐文章于 2023-12-29 11:37:35 发布

只爭朝夕不負韶華

最新推荐文章于 2023-12-29 11:37:35 发布

阅读量413

点赞数

分类专栏： # HTML和CSS 文章标签： html html5

本文链接：https://blog.csdn.net/qq_45613931/article/details/106522278

版权

HTML和CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Html5

Html5概述
H5与之前的区别

本人是个新手，写下博客用于自我复习、自我总结。
如有错误之处，请各位大佬指出。
学习资料来源于：尚硅谷

Html5概述

HTML5 是定义 HTML 标准的最新版本。
它是一个新版本的HTML语言，具有新的元素，属性和行为；
它有更大的技术集，允许更多样化和强大的网站和应用程序。

它相对以前有很多的优势：
跨平台语言
快速迭代
降低成本
导流入口多
分发效率高

H5与之前的区别

（前言：在这一部分对每个内容的介绍比较简单，如果需要更深的了解相关用法等，可以去找官方文档参考。）

DOCTYPE

DOCTYPE，或者称为 Document Type Declaration（文档类型声明，缩写 DTD）。
只要学习过HTML，大家都知道 DOCTYPE 位于一个 HTML 文档最前面的位置。
而且只要是近几年学习HTML，大家应该都是这么用：<!DOCTYPE html>
其实这已经在不知不觉中使用到了HTML5。

浏览器必须在解析 HTML 文档正文之前就确定当前文档的类型，以决定其需要采用的渲染模式，不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析。到目前为止，各浏览器主要包含了三种模式。在 HTML5 草案中，更加明确的规定了模式的定义：
在这里插入图片描述
这个 document.compatMode 属性最初由微软在 IE 中创造出来，这是一个只读的属性，返回一个字符串，它只可能存在两种返回值：

在现代主流浏览器中，其实怪异模式的渲染和标准与几乎标准间没有太大的差别（ie9+ 谷歌火狐 …）
ie5.5之前都是ie自己的渲染模式，怪异模式
ie6才开始慢慢支持标准，标准模式，在ie6 中怪异和标准模式的区别最大
ie7 8 9都是基于标准模式升级的，他们理论上存在怪异模式

HTML5提供的<DOCTYPE html>是标准模式，向后兼容的，等同于开启了标准模式，
那么浏览器就得老老实实的按照W3C的标准解析渲染页面
一个不含任何 DOCTYPE 的网页将会以怪异(quirks) 模式渲染。

根标签html

H4中的根元素:
<html xmlns="http://www.w3.org/1999/xhtml">
这个标记没有任何问题，你喜欢的话，那就背下来继续用。它是有效的。但在Html5中我们就可以对它进行简略处理：
<html></html>
（HTML5中的每个元素都具有这个命名空间，只是不需要在页面上再显示指出）

现在通过代码具体看看HTML5到底会带来怎样的方便：
Html4：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
	</head>
	<body>
		<div>你好</div>
	</body>
</html>

Html5：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		你好<div/>
	</body>
</html>

语义化标签

在HTML5出来之前，我们用div来表示页面头部，章节，页脚等。但是这些div都没有实际意义。

语义化的好处
HTML5可以让很多更语义化结构化的代码标签代替大量的无意义的div标签。这种语义化的特性提升了网页的质量和语义，对搜索引擎更加的友好。他们这些标签功能就是代替<div>功能中的一部分，他们没有任何的默认样式，除了会让文本另起一行外；

比较：
无语义：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="header">
			<h1>我是header</h1>
			<h2>我是header的副标题</h2>
		</div>
		<div id="content">
			<h2>我是content</h2>
			<h3>我是header的副标题</h3>
		</div>
		<div id="footer">
			<h2>我是footer</h2>
			<h3>我是footer的副标题</h3>
		</div>
	</body>
</html>

有语义：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<header>
			<hgroup>
				<h1>我是header</h1>
				<h2>我是header的副标题</h2>
			</hgroup>
		</header>
		<section>
			<header>
				<hgroup>
					<h1>我是content</h1>
					<h2>我是content的副标题</h2>
				</hgroup>
			</header>
		</section>
		<footer>
			<header>
				<hgroup>
					<h1>我是footer</h1>
					<h2>我是footer的副标题</h2>
				</hgroup>
			</header>
		</footer>
	</body>
</html>

hgroup

hgroup元素代表网页或 section 的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合

<hgroup>
    <h1>HTML5</h1>
    <h2>介绍HTML5语义化标签</h2>
</hgroup>

hgroup使用注意：
如果只需要一个h1-h6标签就不用hgroup;
如果有连续多个h1-h6标签就用hgroup;
如果有连续多个标题和其他文章数据，h1-h6标签就用hgroup包住，和其他文章元数据一起放入header标签。

header

header 元素代表网页或 section 的页眉。通常包含h1-h6元素或hgroup

<header>
	<hgroup>
		<h1>网站标题</h1>
		<h2>网站副标题</h2>
	</hgroup>
</header>

header使用注意：
可以是“网页”或任意“section”的头部部分。
没有个数限制。
如果hgroup或h1-h6自己就能工作的很好，那就不要用header。

nav

nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。

<nav>
	<ul>
		<li>HTML5</li>
		<li>CSS3</li>
		<li>JavaScript</li>
	</ul>
</nav>

nav使用注意：
用在整个页面主要导航部分上，不合适就不要用nav元素；

section

section元素代表文档中的节或段，段可以是指一篇文章里按照主题的分段；节可以是指一个页面里的分组。

<section>
    <h1>section是啥？</h1>
	<article>
		<h2>关于section</h1>
		<p>section的介绍</p>
		<section>
		   <h3>关于其他</h3>
		   <p>关于其他section的介绍</p>
		</section>
	</article>
</section>

section使用注意：
section不是一般意义上的容器元素，如果想作为样式展示和脚本的便利，可以用div。
article、nav、aside可以理解为特殊的section，
所以如果可以用article、nav、aside就不要用section，没实际意义的就用div

article

article元素最容易跟section和div混淆，其实article代表一个文档，页面或者网站中自成一体的内容

<article>
	<h1>一篇文章</h1>
	<p>文章内容..</p>
	<footer>
		<p><small>版权：html5jscss网所属，作者：zzz</small></p>
	</footer>
</article>

article使用注意：
独立文章：用article
单独的模块：用section
没有语义的：用div

aside

aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。
在article元素之外使用可以作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以是日志串连，其他组的导航，甚至广告，这些内容相关的页面。

<article>
	<p>内容</p>
	<aside>
		<h1>作者简介</h1>
		<p>zzz，前端</p>
	</aside>
</article>

aside使用总结：
aside在article内表示主要内容的附属信息，
在article之外则可做侧边栏
如果是广告，其他日志链接或者其他分类导航也可以用

footer

footer元素代表网页或 section 的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。

<footer>
	 COPYRIGHT@zzz
</footer>

footer使用注意：
可以是网页或任意 section 的底部部分；
没有个数限制，除了包裹的内容不一样，其他跟header类似。

和class相关的内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="test" class="z z1 z2 z3">

		</div>
	</body>
	<script type="text/javascript">
		console.log(test.className)
		test.classList.add("z4");
		test.classList.remove("z1");
		test.classList.toggle("z2");
		console.log(test.classList);
	</script>
</html>

首先需要说明的是，在过去我们要在JS部分获取到ID名，从而为其设置各种事件时，使用的是document.getElementById。后续也出现了JQuery，只用$就可以获取。但在最新的ES6，我们连JQuery都不需要用了，直接就可以用同名id拿到这个标签。

除此以外，在过去，如果要添加类名，要做拼串操作，想修改一个类名可能还需要正则，极其的麻烦。因此在HTML5中加了一个classList，这就方便的多了。如代码所示。

自定义属性

在html5中，我们还可以自定义属性，这个属性就会存放在标签的数据集dataset中。简单使用方法在下面。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="test" data-csdn-zsx="zzz">

		</div>
	</body>
	<script type="text/javascript">
		console.log(test.dataset.csdnZsx);
		test.dataset.csdnZsx="111";
		console.log(test.dataset.csdnZsx);
	</script>
</html>

在这里插入图片描述

可编辑元素内容：contenteditable属性

contenteditable ：是否可编辑元素的内容。

这个属性在我之前的学习中没碰到过，但是看起来还是蛮有意思的，在这里记录下来。虽然实用性好像不是很大。

在HTML版本的话，没有这个属性，需要去JS中设置。
document.getElementById("myP").contentEditable = true;
在这里插入图片描述

在HTML5中，只需要在标签上设置：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#test{
				width: 200px;
				height: 200px;
				background: pink;
			}

		</style>
	</head>
	<body>
		<div id="test" contenteditable="true">
			djhaldhaskj
		</div>
	</body>
</html>

以上为比较部分，接下来的文章就会介绍HTML5自己新增的一些新特性。
更为详尽的用法，大家可以参考HTML5官方文档。

只爭朝夕不負韶華

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
⑫HTML5与之前HTML的区别

Html5Html5概述H5与之前的区别DOCTYPE根标签html语义化标签hgroupheadernavsectionarticleasidefooter和class相关的内容自定义属性可编辑元素内容：contenteditable属性本人是个新手，写下博客用于自我复习、自我总结。如有错误之处，请各位大佬指出。学习资料来源于：尚硅谷Html5概述HTML5 是定义 HTML 标准的最新版本。它是一个新版本的HTML语言，具有新的元素，属性和行为；它有更大的技术集，允许更多样化和强大的网
复制链接

扫一扫