H5网页元素和全局属性

最新推荐文章于 2023-11-05 14:48:18 发布

任由天高

最新推荐文章于 2023-11-05 14:48:18 发布

阅读量545

点赞数

分类专栏： H5+CSS3 文章标签： html5 css3

本文链接：https://blog.csdn.net/fantasy_geek/article/details/104598525

版权

H5+CSS3 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

一、语义元素

使用语义话标签的意义：
同时作为结构元素，它不具有任何样式，只是使页面元素的的语义更加明确。
　　语义类标签对开发者更为友好，使用语义类标签增强了可读性，即便是在没有 CSS 的时候，开发者也能够清晰地看出网页的结构，也更为便于团队的开发和维护。
　　除了对人类友好之外，语义类标签也十分适宜机器阅读。它的文字表现力丰富，更适合搜索引擎检索(SEO)，也可以让搜索引擎爬虫更好地获取到更多有效信息，有效提升
　　网页的搜索量，并且语义类还可以支持读屏软件，根据文章可以自动生成目录等等。
　　
H5语义元素的理解：
1.<header>元素
<header>元素是一种具有引导和导航作用的辅助元素，通常，<header>元素可以包含一个区域的标题，也可以包含网站logo图片、搜索条件等其他内容。
基本语法结构如下：

<header>
	<h1>Welcome to my homepage</h1>
	<p>My name is Donald Duck</p>
</header>
<p>The rest of my home page...</p>

2.<article元素
<article>元素在页面中用来表示结构完整且独立的内容部分，里面可包含独立的<header>、<footer>等结构元素。如论坛的一个帖子、杂志或者报纸的一篇文章等。
<article>元素是可以嵌套使用的，内层的内容在原则上需要与外层内容相关联。例如，一篇博客文章与该文章的评论一起可以使用嵌套article的方式，这时用来呈现评论的<article>元素被包含在文章内容里面。
基本语法结构如下：

<article>
 	<header>我是博客文章标题</header>
	<p>我是博客内容</p>
<article>我是评论</article>
</article>

3.<footer>元素
<footer>元素可以作为其直接父级内容区域或是一个根区域的尾部内容，通常包括其相关区域块的附加信息，如文档的作者、文档的创作日期、相关阅读链接以及版权信息等。
基本语法结构如下：

<article>
	...
	<p>三国游戏介绍</p>
	<footer>
		<ul>
			<li>关于三国</li>
			<li>地图信息</li>
			<li>游戏攻略</li>
		</ul>
	</footer>
</article>

下面通过实例对<header>元素、<article>元素、<footer>元素的用法进行演示。
【示例】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="gb2312">
		<title>h5结构元素</title>
	</head>
	<body>
		<article>
			<header>
				<h1>HTML介绍</h1>
			</header>
			<p>header介绍</p>
			<p>footer介绍</p>
			<a href="#">阅读全文</a>
			<footer>
			<a href="#">版权所有</a>
			</footer>
		</article>
	</body>
</html>

效果图如下：
---------------------------------- 在这里插入图片描述
4.<section>元素
该元素可以用来表现普通的文档内容区域或者应用区块，一个区块通常由内容极其标题组成。基本语法结构如下：

<header>
	<h1>标题</h1>
	...
</header>
<section>
	<h1>第1章</h1>
	<p>第1章的内容</p>
</section>
<section>
	<h1>第2章</h1>
	<p>第2章的内容</p>
</section>

下面通过实例对<section>元素的用法进行演示。
【示例】

<body>
	<article>
		<header>
			<h1>HTML5介绍</h1>
		</header>
		<p>header介绍</p>
		<p>footer介绍</p>
		<section>
			<h1>评论</h1>
			<article>
			<header>
				<p>Posted by:张三</p>
				<p>发布时间: 2017-08-08 10:01:01</p>
			</header>
			HTML5 is good thing
			.</article>
			<article>
				<header>
				<p>Posted by: 李四</p>
				<p>发布时间: 2017-08-09 11:01 :01</p>
				</header>
				<p>正在学习HTML5，非常棒! </p>
			</article>
			</section>
	</article>
</body>

效果图如下：
-------------------------------------- 在这里插入图片描述
5. <aside>元素
<aside>可用来表示当前页面或者文章的附属信息部分，它可以包含与当前页面或者主要内容关的引用、侧边栏、广告、导航元素组，以及其他类似的有别于主要内容的部分。
aside元素在网站制作中主要有以下两种使用方法

（1）被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、名词解释，等等。
（2）在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以使友情链接，博客中的其它文章列表、广告单元等。
【示例】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>aside元素</title>
	</head>
	<body>
		<header>
			<h1>js入门</h1>	
		</header>
		<article>
			<h1>语法</h1>
			<p>文章的正文。。。。</p>
			<aside>
				<h1>名词解释</h1>
				<p>语法：这是重要的语言</p>
			</aside>
		</article>
		<aside>
			<nav>
				<h2>评论</h2>
				<ul>
					<li><a href="#">H5入门学习</a></li>
					<li><a href="#">CSS3选择器</a></li>
				</ul>
			</nav>
		</aside>
		<time datetime="2015-10-10">2015-10-10</time>
		<time datetime="2015-10-10T20:00">2015-10-10</time>
		<time datetime="2015-10-10T20:00Z">2015-10-10</time>
		<time datetime="2015-10-10T20:00+09:00">2015-10-10</time>
	</body>
</html>

页面效果如下：
在这里插入图片描述
6. <nav>元素
<nav>通常作为页面导航的链接组、侧边栏导航。
下面通过示例对<aside>和<nav>元素的用法进行演示。
【示例】

<! DOCTYPE html>
<html>
	<head>
	<title>aside nav 元素</title>
	<style type="text/css">
	aside#leftside{
		float:left;
		width:180px;
		background: #EADCAE;
		padding-bottom: 10px;
	}
	</style>
	</head>
	<body>
		<aside id="leftside">
			<nav>
				<ul>
					<li><a href="#">导航一</a></li>
					<li><a href="#">导航二</a></li>
					<li><a href="#"> 导航三</a></li>
					<li><a href="#">导航四</a></li>
				</ul>
			</nav>
		</aside>
	</body>
 </html>

页面显示效果如下：
-------------------------------------- 在这里插入图片描述
7.<address>元素
<address>元素一般被用来提供联系人信息、网站链接、电子邮件、地址、电话号码等，一般放在一个网页的开头或者结尾，最常用的是和其他内容包含在<footer>元素内。基本语法结构如下：

	<address>
	<span>作者：张三</span>
	<span>地址：武当山</span>
		<a href="mailto:zhangsan@126.com">请联系我</a>
	</address>

二、分组元素

分组元素用于对页面中的内容进行分组。

1.<figure>和<figcation>元素
<figure>元素用于定义独立的流内容（图像、图表、照片、代码等等），一般指一个独立的单元。<figure>元素的内容应该与主内容相关，但如果被删除，也不会对文档流产生影响。<figcation>元素用于为<figure>元素组添加标题，一个<figure>元素内最多允许使用一个<figcation>元素，该元素应该放在<figure>元素的第一个或者最后一个子元素的位置。
基本语法结构如下：

<body>
	<p>
	一些网页主体文章内容等......
	</p>
	<figure>
		<figcaption>北京鸟巢</figcaption>
		<p>拍摄者：传智播客内容与资源组，拍摄时间：2015年12月</p>
		<img src="niaochao.jpg">
	</figure>
</body>

2.<hgroup>元素
<hgroup>元素用于将多个标题（主标题和副标题或者子标题）组成一个标题组，通常它与<h1>~<h2>元素组合使用。通常，将<hgroup>元素放在<header>元素中。
在使用hgroup元素时要注意以下几点：

如果只有一个标题元素不建议使用hgroup元素。
当出现一个或者一个以上的标题与元素时，推荐使用<hgroup>元素作为标签元素。
当一个标题包含副标题、<section>或者<article>元素时，建议将<hgroup>元素和标题相关元素存放到<header>元素容器中。

三、页面交互元素

1.<summary> <details>元素
它们一起提供了一个可以显示和隐藏额外文字的“小工具”。<summary>元素就像元素名的含义一样，就是一个标题、摘要说明，单击可以切换<details>标签之间内容的显示或隐藏。默认<details>里的内容是隐藏的，单击才可显示内容。可以使用一个布尔属性open，加在<details>元素上，使它默认显示。基本语法如下：

<details>
	<summary>经典金曲</summary>
	<p>my heart will go on</p>
	<p>take my breath away</p>
</detail>

页面显示效果如下：
在这里插入图片描述
2.<progress>元素
<progress>元素用于表示一个任务的完成进度。这个进度可以是不确定的，只是表示进度正在进行，但是不清楚还有多少工作量没有完成。
<progress>元素的常用属性值由两个，具体如下。

value：已经完成的工作量。
max：总共有多少工作量。

四、文本层次语义元素

1.<time>元素
<time>元素用于定义时间或日期，可以代表24小时中的某一时间。
<time>元素有两个属性：

datetime：用于定义相应的时间或日期。取值为具体时间（例如：14：00）或者具体时间（例如2015-09-01），不定义该属性时，由元素的内容给定日期/时间。
pubdate：用于<time>元素中的日期/时间是文档（或<article>元素）的发布日期。取值一般为“true”。

2.<mark>元素
<mark>元素的主要供能是在文本中高亮显示某些字符，以引起用户注意。该元素的用法与<em>和<strong>有相似之处，但是使用<mark>元素在突出显示样式时更随意灵活。
3.<cite>元素
<cite>元素可以创建一个引用标记，用于对文档参考文献的引用说明，一旦在文档中使用了该标记，被标记的文档内容将以斜体的样式展示在页面中，以区别于段落中的其它字符。

五、全局属性

下面的全局属性结合着JavaScript使用能发挥明显的优势。
1.draggable属性
draggable属性用来定义元素是否可以移动，该属性有两个值：true和false，默认为false，当值为true时表示选中之后可以进行拖动操作，否则不能拖动。
2.hidden属性
在HTML5中，大多数元素都支持hidden属性，该属性有两个属性值：true和false。当hidden属性取值为true时，元素将会被隐藏，反之则会显示。元素中的内容是通过浏览器创建的，页面装载后允许使用javaScript脚本将该属性取消，取消后该元素变为可见状态，同时元素中的内容也及时显示出来。
3.spellcheck属性
spellcheck属性主要针对于input元素和textarea文本输入框，对用户输入的文本内容进行拼写和语法检查，spellcheck属性有两个值：true（默认值）和false，值为true时检测输入框中的值，反之不检测。
4.contenteditable属性
contenteditable属性规定是否可编辑元素的内容，但是前提是该元素必须可以获得鼠标焦点并且其内容不是只读的。该属性有两个值，如果为true表示可编辑，为false表示不可编辑。

任由天高

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5网页元素和全局属性

1.元素元素是一种具有引导和导航作用的辅助元素，通常，元素可以包含一个区域的标题，也可以包含网站logo图片、搜索条件等其他内容。例：代码：`html Welcome to my homepage My name is Donald DuckThe rest of my home page...`2.元素元素在页面中用来表示结构完整且独立的内容部分，里面可包含独立的、等结构...
复制链接

扫一扫