H5网页元素和全局属性
目录
- 一、语义元素
- 二、分组元素
- 三、页面交互元素
- 四、文本层次语义元素
- 五、全局属性
一、语义元素
使用语义话标签的意义:
同时作为结构元素,它不具有任何样式,只是使页面元素的的语义更加明确。
语义类标签对开发者更为友好,使用语义类标签增强了可读性,即便是在没有 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表示不可编辑。
H5网页元素和全局属性相关推荐
- html常用语义化元素和全局属性整理
WWW www其实是World Wide Web 的缩写,它是一个由许多互相链接的超文本组成的系统,通过互联网访问, 在汉语中,www 被翻译成(web 万维网 全球广域网). <HTML> ...
- H5 input元素 type 常见属性值
值 描述 button 定义可以点击的按钮(大多与JavaScript使用) checkbox 定义复选框 cloor 定义拾色器 date 定义日期字段(带有 calendar 控件) month ...
- html css整理笔记,HTML CSS整理笔记 (八) 定位网页元素
----8 定位网页元素---- 51.Position属性:指定盒子的位置,相对它父级的位置或它自身应该在的位置. (1)static 默认无定位,元素按照标准文档布局. (2)relative相对 ...
- html5指南--1.html5全局属性(html5 global attributes)
今天开始一个全新的关于html5系列课程,是我读<The Definitive Guide to HTML5 >的学习笔记.我会把自己觉得里面不错的章节,或者有意义的内容进行整理,以供大家 ...
- 【HTML 教程】网页元素的属性
作者 | 阮一峰 1.简介 网页元素的属性(attribute)可以定制元素的行为,不同的属性会导致元素有不同的行为.元素属性的写法是 HTML 标签内部的"键值对". <h ...
- 03 # 网页元素的属性
说明 网道HTML 教程学习笔记 1.简介 网页元素的属性(attribute)可以定制元素的行为,不同的属性会导致元素有不同的行为. 注意: 1.属性名与标签名一样,不区分大小写. 2.属性名与属性 ...
- [html] HTML全局属性(global attribute)有哪些(包含H5)?
[html] HTML全局属性(global attribute)有哪些(包含H5)? classiddatatypehrefstylewidthheighttargecheckeddisabledr ...
- HTML元素中的属性2(路径详解)—零基础自学网页制作
相对路径与绝对路径的使用方法 在<HTML元素中的属性1-零基础自学网页制作>这一篇教程最后内容中,我们详细展示了"绝对路径"与"相对路径"在写法上 ...
- html如何设置重置按钮,在HTML网页上,表单中元素的TYPE属性值设置为()时,用语创建重置按钮。...
在HTML网页上,表单中元素的TYPE属性值设置为()时,用语创建重置按钮. 更多相关问题 A non-current asset ( cost $15,000, depreciation $10,0 ...
最新文章
- 基于SSM实现租房平台管理系统
- 兼容PC和手机触摸代码
- Oracle数据库迁移后变慢,迁移数据之后,读取数据库变得很慢
- Tinyhttpd源码--实现http服务器
- 《微软文档管理解决方案2007》之一:安装部署 - [SharePoint Server]
- Eclipse 里一个 SAP Hybris Commerce 的开发插件
- linux 网络RPS/RFS/XPS
- 到底什么才是人生最大的投资
- 数值运算pythonmopn_Python SciPy库——拟合与插值
- java学习4-Maven的发布war并部署到tomcat
- 在Flash中接收来自页面(.NET)的值的方法.
- laravel ::all() 选择字段_Laravel 性能优化:优化 ORM 性能使应用程序高可用
- python工程师干什么的_Python就业前景和工资待遇分析,你学Python了吗?
- 【数字信号处理】基于matlab GUI数字信号处理系统【含Matlab源码 1088期】
- mysql查询一张表中一共有多少条数据
- 惠普电脑怎么用access_惠普笔记本电脑怎么分区
- 5G 核心网 Quality of Service Model (QoS Model)
- SpringBoot mybatis 实现多级树形菜单
- google官方图标 Material icons 全图标一览
- Bandit:一款Python代码安全漏洞检测工具