下面是html5中新增的结构元素的是,HTML5的新的结构元素介绍
HTML5的新的结构元素介绍
一、HTML5与HTML4的区别
1. 取消了一些过时的HTML4的标签
其中包括纯粹显示效果的标记,如和
,它们已经被 CSS完全取代。
其他取消的属性:acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike,tt
2. 添加了一些新的元素
更加智能的表单元素:date, email, url等; 更加合理的标签:, , , , ,, , 等。
3. 文件类型声明
仅有一种类型,
二、HTML5的新结构标签
在讲这些新标签之前,我们先看一个普通的页面的布局方式:
以上是很常见的div+css布局模式,通过class来区分不同的结构,包括头部、导航、文章内容、右边栏,还有底部模块。
而HTML5新标签带来的新的布局则是下面这种情况:
代码如下:
my page
header
nav
section
aside
footer
拥有具体含义的标签,使得代码有很直观的感受,搜索器也能很容易地抓取合适的信息。
下面介绍HTML5中相关的结构标签
定义文档中的节。它用来表现普通的文档内容或应用区块,但section元素标签并非一个普通的容器元素,它表示一段专题性的内容,一般会带有标题。
section是什么?
一个新章节
关于section
section的介绍
...
特殊的section标签,它比section具有更明确的语义,它代表一个独立的、完整的相关内容块。当我们描述一件具体的事物的时候,通常鼓励使用article来代替section。
article会有标题部分(通常包含在header内),也可以包含footer。
article可以嵌套,内层的article对外层的article标签有隶属关系。
这是一篇介绍HTML 5结构标签的文章
HTML 5的革新
2011.03.20
文章内容详情
可以作为页面导航的链接组,其中的导航元素链接到其它页面或者当前页面的其它部分,使html代码在语义化方面更加精确,同时对于屏幕阅读器等设备的支持也更好。
- 厚德IT
- FlyDragon
- J飞龙天惊
aside标签用来装载非正文的内容,被视为页面里面一个单独的部分。它包含的内容与页面的主要内容是分开的,可以被删除,而不会影响到网页的内容、章节或是页面所要传达的信息。例如广告,成组的链接,侧边栏等等。
作者简介
厚德IT
header标签定义文档的页眉,通常是一些引导和导航信息。它不局限于写在网页头部,也可以写在网页内容里面。
通常header标签至少包含一个标题标记(h1-h6),还可以包括hgroup标签,还可以包括表格内容、标识、搜索表单、nav导航等。
网站标题
网站副标题
footer标签定义section或document的页脚,包含了与页面、文章或是部分内容有关的信息,比如说文章的作者或者日期。 它和header标签使用基本一样,可以在一个页面中多次使用,如果在一个区段的后面加入footer,那么它就相当于该区段的页脚了。
页脚信息
hgroup标签是对网页或区段section的标题元素(h1-h6)进行组合。例如,在一区段中你有连续的h系列的标签元素,则可以用hgroup将他们括起来。
这是一篇介绍HTML 5结构标签的文章
HTML 5的革新
用于对元素进行组合。多用于图片与图片描述组合。
HTML5中新的结构元素
HTML5中新的结构元素 1. HTML5初始文件 1.1.doctype 在之前,doctype的声明是这样的: "http://www.w3. org/TR/html4/strict.d ...
读书笔记:《HTML5开发手册》--HTML5新的结构元素
读书笔记: (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...
html5新增的主题结构元素
article元素 article元素代表文档.页面或应用程序中独立的.完整的.可以独自被外部引用的内容. 它可以是一篇博客或者报刊中的文章,一篇论坛帖子.一段用户评论或独立的插件. 或其他任何独立的 ...
【HTML5 3】《html5 开发精要与实例讲解》 step2 -- 结构元素 (待续)
主要内容:通过 一个博客网站和一个企业网站的制作 展示如何运用HTML5中的各种 结构元素,构建出一个语义清晰,结构分明的Web3.0时代的网站. 案例1:用HTML5中的结构元素构建一个博客网站 疑 ...
html5中的网页结构
一.html5中的大纲 在html5中,使用各种结构元素所描述出来的整个网页的层次结构,就是该网页的大纲.因此在组织这份大纲的时候,不能使用div元素,因为div元素只能当做容器,用在需要对网页中某个 ...
HTML5中新增加的结构元素、网页元素和全局属性
HTML5新增的结构元素(新增的都是块元素,独占一行) 1) header 定义了文档的头部区域
网站标题
02.Web大前端时代之:HTML5+CSS3入门系列~H5结构元素
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素 可以理解为语义话标记,比如:以前这么写&l ...
HTML5结构元素
前面的话 几年前,用于网页布局的一般都用div元素,但语义化并不好.HTML5引入了大量新的块级元素来帮助提升网页的语义,使页面具有逻辑性的结构.容易维护,并且对数据挖掘服务更加友好.本文将详细介绍H ...
HTML5学习笔记(三):语义化和新增结构元素
在HTML5之前,使用机器来阅读一个网页是非常困难的,我们使用不同样式的div来标记不同的内容,所以实际上机器无法得知页面的哪个部分是正文,哪个部分是标题,那么在HTML5里,针对这个问题就引入了语义 ...
随机推荐
maven-过滤不打入包的文件
在使用maven打包时,有时有些测试文件,或者配置都希望打入到架包中 此时就需要使用将不用的文件过滤,maven有很方便的过滤插件.因工作时间,暂不讨论.本次讨论一个非常简单除暴的方法,通过配置ecl ...
[LintCode] Move Zeroes 移动零
Given an array nums, write a function to move all 0's to the end of it while maintaining the relativ ...
LR动态脚本的处理
在处理SSO修改密码脚本时遇到一个问题,根据用户名的不同,提交请求中数据会不一样.处理此问题,如果经分析用同类型的账号(每个账号含有的子账号类型和数目一致)测试与实际不同类型账号性能没有大的差别,则用 ...
《c程序设计语言》读书笔记--统计总的字符数,打印能打印的最多字符
#include #define MAXLINE 10 int getline(char line[],int maxline); void copy(char to[ ...
ORA-942 SP2-0611
环境:oracle 11.2.04 问题描述: 在使用hr用户启用set autot trace时报错 set">HR@test>set autot trace; Error O ...
SWFUpload批量上传插件
SWFUpload是一个批量上传插件,在HTML4.1里面,估计也只有Flash+javascript配合才能够做到了.先复制个重要的网址,这个应该是官方的文档了,相当齐全. http://leeon ...
C#委托,事件,匿名委托
作为一个初学者,写下来是当做自己的学习笔记,希望在以后遇到问题的时候能够快速的找到方法 如果能帮助跟我一样的新人是更好不过的了 如果有什么不正确或者可以改进的地方也希望大家能够指出来 ...
unity读取Sqlite数据库
using UnityEngine; using System.Collections; using Mono.Data.Sqlite; using System.Data; public enum ...
一旦ORA-28000: the account is locked用户锁定故障排除
今天我的同事们反映的问题,测试库的变化password,并改变相关的应用程序中使用password后,其中一个仍然会出现在帐户被锁定,报告ORA-28000: the account is locke ...
Java进阶 创建和销毁对象
最近准备写点Javase的东西,希望可以帮助大家写出更好的代码. 1.给不可实例化的类提供私有构造器 比如:每个项目中都有很多工具类,提供了很多static类型的方法供大家使用,谁也不希望看到下面的代 ...
下面是html5中新增的结构元素的是,HTML5的新的结构元素介绍相关推荐
- html5中新增标签的兼容性如何设置,HTML5新标签的兼容性处理
普通浏览器 普通不支持HTML5新标签的浏览器 -- 能正常解析,但会当初成 inline 元素对待 在不支持HTML5新标签的浏览器里,会将这些新的标签解析成行内元素(inline)对待,所以我们只 ...
- HTML5中新增的元素有哪些
HTML5中新增的元素有哪些 1.新增的结构元素 语义化的标签<article></article> 文章<section></section> 独立的 ...
- html 5 设置标签居中,Html5中新增标签与样式实现元素水平垂直居中的方法
Html5中新增标签与样式实现元素水平垂直居中的方法 发布时间:2021-06-12 12:44:51 来源:亿速云 阅读:71 作者:小新 这篇文章将为大家详细讲解有关Html5中新增标签与样式实现 ...
- HTML5中新增的音频标签是,HTML5新增的音频标签、视频标签
我们所说的H5就是我们所说的HTML5中新增的语言标准 一.音频标签 在HTML5当中有一个叫做audio的标签,可以直接引入一段音频资源放到我们的网页当中 格式: 降级的文字说明(当音频文件不能本浏 ...
- html中用来表示主题标签的是什么,HTML5中的article标签是什么?HTML5中的article元素用在什么地方?...
HTML5中的article标签是什么?HTML5中的article元素用在什么地方?本篇文章主要为大家解释了什么是HTML5中的article标签,article用在什么地方,还有HTML5中art ...
- Html5中新增的表单元素详解
HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性. •datalist •keygen •output datalist 元素 datalist 元素规定输入域的选项列表.列表是 ...
- HTML5中新增的文件API和拖拽API详解
文件API 在HTML5之前的,从网页上传文件一次只能上传一个文件,而且也无法对要上传的文件做更深一步的操作. HTML5提供了一个系列关于文件操在的API,通过使用这些API,对于从Web页面访问本 ...
- HTML day_02(6.1)表格列表、结构标记 、 表单、新表单元素
一.表格 1.表格的结构 2.表格的语法 table标签:表示表格的开始和结束,表格的所有内容需要写在这一对标签中 tr标签:表示表格中的一行 table row td标签:要写在tr中,这一行中的每 ...
- html5中如何消除表格间的间隔,HTML5表格间距问题
我试图让所有这些图片排成一列.由于某些原因,它在单元格的底部添加了额外的空间.我尝试了所有解决这个间距问题的不同解决方案.HTML5表格间距问题 下面就来看看我的HTML5代码以及: table{ b ...
最新文章
- 忘了python关键语句?这份备忘录拯救你的记忆
- 香港理工大学计算机系石杰明老师组招收全奖博士生、博士后
- Output Operations on DStreams
- iOS开发多线程篇—自定义NSOperation
- csdn的自动化评论
- c# 字典排序_Python零基础入门之列表与字典
- js 调用服务器端方法总结
- 七、PHP框架Laravel学习笔记——资源控制器
- java 截取byte数组_2020年的秋招已经开始了!最新Java面试题大全(文末附参考答案)送给大家...
- 面向对象实现放大镜_面向音乐家和音乐爱好者的开放式硬件:耳机,放大器等
- 08.树:2_二叉树
- Rust创建项目的两种方式
- 关于3CDaemon的FTP服务端异常
- 【转载】UMTS到LTE的系统架构演进
- 【NeoVim Coc.nvim】禁用从文档内提取字段的补全选项(禁用带有“yank”的补全选项)
- Web开发网页颜色搭配
- 疫情背后,零售变革正在酝酿,手机行业或迎来线下大洗牌
- springboot实现数据库数据导出生成Excel报表
- EC20 centos7 调试_CentOS 7实现离线下载
- Mouse_event()