HTML5特性--＞语义、新属性、h5介绍

最新推荐文章于 2021-12-27 22:45:54 发布

六代目专机

最新推荐文章于 2021-12-27 22:45:54 发布

阅读量473

点赞数 1

分类专栏： html5新特性文章标签： html js web

本文链接：https://blog.csdn.net/Ghost__H/article/details/114402266

版权

html5新特性专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.什么是HTML5?

1.HTML5是HTML标准的最新版本，它包含了两种不同的概念：

（1）它是一个新本的HTML语言，具有新的元素、属性和行为。

（2）它拥有更强大的技术集，允许用户定义更强大更多样化的网站应用程序。

2.HTML5的优势

跨平台：所有系统都能运行
免安装：打开浏览器，就能使用
快速部署：升级只需在服务器更新代码
超链接：可以与其他网站互连，可以被搜索引擎检索

3.HTML新增的预定义属性

我们知道在html5以前的版本中，每个html标签都有一个内置的property叫做className,我们可以通过element.className取到字符串形式的类名。如下图

但是如果我们要给里面加入一个类名或者说删除一个类名呢？这是一件非常麻烦的事情，若是要删除一个类名我们需要用正则匹配到它再删除。增加了工作量。好消息是，html5为我们增加了一个新的对象，里面原生提供了添加和删除类名的方法！从此以后，我们只需要使用 element.classList就可以得到升级plus版本的类名列表！

	<div id="test" class="qhf qhf1 qhf3">
			
	</div>
    var testNode = document.querySelector("#test");
    console.log(testNode.classList);

执行上面的代码后，我们打开浏览器控制台可以看到下面的样子。

classList

可以看到类名列表拥有了很多操作方法，下面我们着重介绍三个方法add(),remove(),toggle()

1.add("classname")，add方法向classList中添加一个类名

2.remove("classname")，remove方法将classList中指定的类名删除

3.toggle("classname")，toggle方法可以添加/删除指定的类名

有了h5给我们提供的这些方法，操作类名列表变的非常方便！

4.HTML5新增的自定义属性

<div hzx="hzx"></div>

在html标签中定义的自定义属性，在js中我们只能通过element.setAttribute("classname","newValue");来修改属性值，不能通过点运算符访问。但是在html5提供了dataset属性集可以让我们方便地通过element.dataset.属性名的方式来访问我们自定义的属性名。

<div data-hzx="hzx"></div>

我们只需要在自己定义的属性名前面加上data-就可以做为dataset属性集中的一个成员可以通过点运算符访问，下面给出应用的一些例子。

	<body>
		<div id="test" data-gldz-hzx="hzx">
			
		</div>
	</body>
	<script type="text/javascript">
		var testNode = document.querySelector("#test");
       //在获取值时，需要去掉data-,并且将gldz-hzx中的-删除,h大写 也就是应用驼峰命名法
		console.log(testNode.dataset.gldzHzx);
		testNode.dataset.gldzHzx="111";
		testNode.dataset.gldzHzx.add("222");
	</script>

在h5之前，我们要想在浏览器中输入一段文本只能使用textarea文本域标签，虽然说能解决问题，但是textarea有它自己的一些默认样式。但是这样灵活度会很低，不能自己定制文本域的样式，h5中给标签引入了contenteditable属性。只要给标签设置这个属性

普通的标签也拥有了可编辑属性，我们来看一段代码。

	<div id="test" contenteditable="true">
			adoiajdoiajsd
	</div>

可以看到我们让contenteditable="true"即可以打开普通标签的可编辑属性

可编辑属性

在JS部分，我们可以获得这个元素的对象。用element.innerText来获取用户输入的内容，老规矩，看一段代码。

<div id="test" contenteditable="true">
			adoiajdoiajsd
</div>
<input type="button" name="" id="btn" value="获得值" />
 <script type="text/javascript">
   const box = document.getElementById('test');
   const btn = document.getElementById('btn');
   btn.onclick = function(){
			 console.log(box.innerText);
  }
	</script>

效果如下：

获取编辑值效果

5.HTML5的DOCTYPE与渲染模式

DOCTYPE，全称Document Type Declaration（文档类型声明)，DOCTYPE唯一HTML文档的最前面，位于根元素HTML标签之前，因为浏览器必须在解析HTML文档之前就确定文档类型，以决定要采用的渲染模式。

到目前为止，浏览器中主要包含了三种模式：

standards mode(strict mode) 严格模式
almost standards mode 轻微严格模式
quirks mode 怪异模式

若是想知道我们现在采用的是什么模式，可以在控制台打印 document.compatMode属性，该属性有两个返回值：

BackCompat：标准兼容模式未开启（怪异模式）
CSS1Compat：标准兼容模式已开启（标准模式）

在现代浏览器中，怪异模式和标准(严格)模式没有太大差别，而差异主要体现在ie浏览器，我们来看一个例子。

<html>
	<head>
		<meta charset="gbk">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#test{
				width: 300px;
				height: 300px;
				padding: 50px;
				background: pink;
			}
		</style>
	</head>
	<body>
		<div id="test"></div>
	</body>

这个例子里面写了一个div标签并设置了一些样式，在现代浏览器中打开没有任何区别但是如果在IE5，6..中打开会进入怪异模式，会自动设置boder-box属性，盒子的会比实际设置的宽和高小。

怪异盒子

在IE的早期版本用的是它自己的渲染模式，呈现出来就是怪异模式。HTML5的<!DOCTYPE html>就等同于打开了标准模式，浏览器就得老老实实地按照W3C的标准解析并渲染页面。不含任何DOCTYPE的网页会以怪异模式渲染。当我们加上了这个标签表明了页面遵守的是HTML5的规范，所以平时开发时应该加上这个标签。总的来说，DOCTYPE的作用有两个：

doctype告诉浏览器将要解析的文档的文档类型，这样浏览器才会根据文档类型选择相应的解析器解析。
加上<!DOCTYPE html>等于告诉浏览器这个文件按照H5的标准编写，它会自动打开标准模式。避免因为怪异模式使得页面效果与设置不符。

1.一些doctype的写法

       <!DOCTYPE html>
           当 doctype 信息如上时，表明该页面是遵守了 HTML5 规范的，浏览器会选择 Standards Mode，这种 doctype 是最推荐的一种，
       我们平时设计页面都应该加上这一个 doctype。
           HTML5 不基于 SGML,所以不需要引用 DTD,浏览器内部本身有对标签进行解析渲染验证的模块

       <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
       当 doctype 如上时，浏览器同样会选择 Standards Mode，虽然和第一种 doctype 有一些区别，但是几乎可以认为是一样的。

       <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
       当 doctype 如上时，浏览器会选择 Almost Standards Mode，渲染时和标准会有一些区别

       当 doctype 缺失的时候，浏览器会选择 Quirks Mode，这是非常不推荐的方式，
       当 doctype上面有注释，标签或者空行时，某些浏览器都会认为该页面不具有doctype。
       我们应该尽量避免 Quirks Mode，这对一个 web 应用是非常不利的地方。

6.HTML5的根元素写法

   H4中的根元素:
       <html xmlns="http://www.w3.org/1999/xhtml">

       首先这个标记没有任何问题，你喜欢的话,那就背下来继续用。它是有效的。
       但这个标记中的很多字节在Html5中我们都可以省略了

       xmlns:这是XHTML1.0的东西，
           它的意思是在这个页面上的元素都位于http://www.w3.org/1999/xhtml这个命名空间内
           但是HTML5中的每个元素都具有这个命名空间，不需要在页面上再显示指出


   H5中的根元素
       <html></html>

7.MIME类型

每当浏览器请求页面时，Web服务器会同时发送一些头信息。浏览器会根据这些信息来决定如何解析后面的页面内容，这里面最重要的是Content-Type属性。比如Content-Type:text/html，text/html:即这个页面的"内容类型",或者称为MIME类型。这个头信息将唯一确定某个资源的本质是什么，也决定了它应该如何被呈现，下面是一些常见的MIME类型：

MIME类型	该类型适用的文件
text/html	.html,.htm,*.shtml
text/plain	*.txt
text/css	*.css
text/javascript	*.js
image/jpeg	*.jpg
image/png	*.png

8.HTML5语义化标签

在HTML5面世之前，我们经常使用div来表示页面的头部，章节，页脚等，但是这些div都没有实际意义。
各大浏览器厂商分析了上百万的页面，从中发现了DIV名称的通用id名称大量重复。例如，很多开发人员喜欢使用
div id="footer"来标记页脚内容，所以Html5元素引入了语义化标签（一组新的片段类元素）

1.语义化的好处

HTML5可以让很多更语义化结构化的代码标签代替大量的无意义的div标签
这种语义化的特性提升了网页的质量和语义
对搜索引擎更加的友好

这些标签其实就是为了代替div功能的一部分，他们没有任何的默认样式。下面介绍一些常用的语义化标签：

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

	<hgroup>
		    <h1>HTML 5</h1>
		    <h2>这是一篇介绍HTML 5语义化标签和更简洁的结构</h2>
	</hgroup>

hgroup使用注意：

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

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

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

header使用注意：

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

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

<nav>
		    <ul>
		        <li>HTML 5</li>
		        <li>CSS3</li>
		        <li>JavaScript</li>
		    </ul>
</nav>

nav使用注意：

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

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

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

section使用注意：

如果想作为样式展示和脚本的便利，可以用div。
article、nav、aside可以理解为特殊的section，
所以如果可以用article、nav、aside就不要用section，没实际意义的就用div

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

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

article使用注意：

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

   aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等

       在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以是日志串连，其他组的导航，甚至广告，这些内容相关的页面。

<article>
		    <p>内容</p>
		    <aside>
		        <h1>作者简介</h1>
		        <p>小北，前端一枚</p>
		    </aside>
</article>

aside使用总结：

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

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

<footer>
		    COPYRIGHT@damu
</footer>

footer使用注意：

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

9.总结

上面说了一些H5的新特性，包括了文档类型声明，MIME类型，可编辑属性，ClassList,dataset有以及语义化标签。

六代目专机

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5特性--＞语义、新属性、h5介绍

1.什么是HTML5?1.HTML5是HTML标准的最新版本，它包含了两种不同的概念：（1）它是一个新本的HTML语言，具有新的元素、属性和行为。（2）它拥有更强大的技术集，允许用户定义更强大更多样化的网站应用程序。 2.HTML5的优势跨平台：所有系统都能运行免安装：打开浏览器，就能使用快速部署：升级只需在服务器更新代码超链接：可以与其他网站互连，可以被搜索引擎检索3.HTML新增的预定义属性我们知道在html5以前的版本...
复制链接

扫一扫