首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Html5 学习系列(二)HTML5新增结构标签

引言 在本节中,笔者将向大家讲述三部分内容,分别介绍HTML5时代的召唤,跟HTML4的区别,以及HTML5中带来的新的结构标签。...HTML4与HTML5的区别 1、取消了一些过时的 HTML4的标签 其中包括纯粹显示效果的标记,如和,它们已经被 CSS完全取代。...比如章节、页眉、页脚或文档中的其它部分。一般用于成节的内容,会在文档流中开始一个新的节。它用来表现普通的文档内容或应用区块,通常由内容及其标题组成。... 作者简介 厚德IT header标签 标签定义文档的页眉,通常是一些引导和导航信息。...作为页面的页脚时,一般包含了版权、相关文件和链接。它和标签使用基本一样,可以在一个页面中多次使用,如果在一个区段的后面加入footer,那么它就相当于该区段的页脚了。

2.3K10

从零开始学 Web 之 HTML5(一)HTML5概述,语义化标签

2、html的发展历史 超文本标记语言(第一版,不叫 HTML 1.0)——在1993年6月作为互联网工程工作小组(IETF)工作草案发布(并非标准); HTML 2.0——1995年11月作为RFC...新的语法特征被引进以支持视频音频,如video、audio和 canvas 标记。 HTML5还引进了新的功能,可以真正改变用户与文档的交互方式。...相比之前的进步: 取消了一些过时的 HTML4 标记 将内容和展示分离 一些全新的表单输入对象 全新的,更合理的Tag 本地数据库 Canvas 对象 浏览器中的真正程序 Html5取代Flash在移动设备的地位...缺点 该标准并未能很好的被Pc端浏览器所支持。因新标签的引入,各浏览器之间将缺少一种统一的数据描述格式,造成用户体验不佳。 5、html5 应用场景 (1)极具表现力的网页:内容简约而不简单。...2、html5 部分新增的标签 2.1、结构标签 section:独立内容区块,可以用 h1~h6 组成大纲,表示文档结构,也可以有章节、页眉、页脚或页眉的其他部分; article:特殊独立区块,表示这篇页眉中的核心内容

3.3K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    HTML5 & CSS3初学者指南(1) – 编写第一行代码

    HTML5和CSS3 HTML5是HTML的最新标准,取代了以前的HTML 4.01。 HTML5诞生于W3C和Web超文本应用技术工作组(WHATWG)之间的合作。...HTML5的创建,是以以下三点为目标: 减少对插件的依赖(如Flash) 使用标记代替脚本 独立的设备和平台 读取HTML设计原则,有助于更好地理解为什么HTML5就像是今天这个样子。... 开始标签和结束标签之间的区域,用于放置HTML文档标题的地方。标签的内容将会出现在浏览器的工具栏中。...在我们的例子中,我们已经使用了其中的4个,即,,和。它们必须与对应的结束标记配合使用。浏览器会自动的分别为每一行标题上面和下面添加额外的间距。...我的解决办法是:写开始标签时,同时也写上结束标签,然后再花时间在两个标签之间添加内容。 第一次的学习就到这里。 学习完第一节HTML5和CSS3的基本知识,能够帮助我们更好的进行前端开发。

    1.4K60

    12.HTML5下一代的HTML标准介绍与初识尝试

    HTML5 是 HTML 的最新稳定版本, 它将 HTML 从用于构造一个文档的一个简单标记,到一个完整的应用程序开发平台,除其他功能外,HTML5 还包括新元素和用于增强存储、多媒体和硬件访问的 JavaScript...9.CSS3支持:虽然CSS3并非HTML5的一部分,但HTML5的普及也促使了CSS3的应用,CSS3提供了更多的样式选择器、动画效果和布局功能,可以让网页更加美观和交互。...5.使用使用小写属性名,虽然HTML5在解析属性名时不区分大小写,但是在实际开发中应该小写命名。 6.建议为元素的属性值加上双引号,其属性与属性值之间尽量少用空格。...9.正确的使用空行和缩进,缩进使用两个空格不建议使用TAB键(由于不同编辑器对其解析有个不一致),元素之间也应尽量避免空行。...header>:定义文档或节的页眉,常用于文章头部。

    34920

    【译】停止滥用div! HTML语义化介绍

    >样板之间挑选出来。一旦你(的代码)深入几个层次,跟踪哪个结束标记与哪个开始标记对应,那就变得很棘手了。...页眉和页脚元素页可以使用PHP或Rails/ERB等语言中的部分模版来更易于使用,因为你可以在整个站点中包含常见的页眉和页脚部分: 页眉在事物的前面,页脚在事物的末尾。...那么,和普通的旧之间有什么区别,然后,你应该在什么时候使用它们呢?好吧,允许我再次引用规范: 笔记: 元素不是通用容器元素。...我们已经明确标记了页面的主要内容区域,而不仅仅是单独调整,我们已经调整出了页眉,页脚和章节。但是,肯定还有比我们的文档更多的语义。

    1.9K20

    停止滥用div! HTML语义化介绍

    >样板之间挑选出来。一旦你(的代码)深入几个层次,跟踪哪个结束标记与哪个开始标记对应,那就变得很棘手了。...页眉和页脚元素页可以使用PHP或Rails/ERB等语言中的部分模版来更易于使用,因为你可以在整个站点中包含常见的页眉和页脚部分: 页眉在事物的前面,页脚在事物的末尾。...那么,和普通的旧之间有什么区别,然后,你应该在什么时候使用它们呢?好吧,允许我再次引用规范: 笔记: 元素不是通用容器元素。...我们已经明确标记了页面的主要内容区域,而不仅仅是单独调整,我们已经调整出了页眉,页脚和章节。但是,肯定还有比我们的文档更多的语义。

    98440

    HTML标记语言学习笔记

    (markup language) 3) 标记语言是一套标记标签 (markuptag) 4) HTML 使用标记标签来描述网页 -3rd- HTML 标签 ---- 01 概述 HTML...HTML 标签是由尖括号包围的关键词,比如 2. HTML 标签通常是成对出现的,比如 和 3. 标签对中的第一个标签是开始标签,第二个标签是结束标签 4....在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭(及上文提到的标签需要成对出现)。 -5th- HTML 属性 ---- 01 概述 1....属性提供了有关 HTML 元素的更多的信息。 2. 属性总是以名称/值对的形式出现,比如:name="value"。 3. 属性总是在 HTML 元素的开始标签中规定。...01 使用 HTML5新语义元素 HTML5 语义元素 标签 用途 header 定义文档或节的页眉 nav 定义导航链接的容器 section 定义文档中的节 article 定义独立的自包含文章

    1.9K31

    (近万字)一篇文章带你了解HTML5和CSS3开发基础与应用-适合前端面试必备

    作者 | Jeskson 来源 | 达达前端小酒馆 HTML5和CSS3开发基础与应用,详细说明HTML5的新特性和新增加元素,CSS3的新特性,新增加的选择器,新的布局,盒子模型,文本,边框,渐变...HTML5的介绍,常用的元素和属性,表单相关元素和属性,CSS3新添加的选择器,CSS3新的属性。 了解HTML5,和现在主流的浏览器的,与基本语法。...在使用HTML5之前,w3c希望用XHTML来替代HTML,因为HTML与XHTML相比,XHTML是一种更加严格,更加规范的HTML代码,这是因为XHTML要求HTML必须是一种XML文档格式,XML...在XML文档中有且只能有一个根元素,文档中的元素必须由开始标签和结束标签组成,除了是单标签,即为空元素语法,标签之间不能交叉使用,属性值必须用“”括起来。...文档结构元素,header用于定义文档或是节的页眉,footer用于定义文档或是节的页脚,HTML5新增的结构header,footer除外,还有aside是用于定义文档内的文章,section用于定义文档中的一个区域

    1.1K30

    你所不知道的html5与html中的那些事(二)

    本系列文章将为您一一解答你所不知道的关于html5与html中的那些事;具体会包括如:html5新的理念与想法,html5的新标签的用意与具体开发中场景应用,html5与css3的感情经历(用法搭配),...; 而的另一个含意就是是整个文章的骨架;打个比方说明一下 ,就好像你写word文档的时候,当你把认为是标题的空字段用word给的样式标记上,这样word就会跟据你做的标记生成对应的目录;那么在html...header标签的用法; header标签在html5中标准的含义就是 网页的页眉,他就用来放一组介绍性或者导航性的内容的区域;大家不然被这个页眉弄的思维狭隘了,以为页眉就一定要在页面的头部或是前面;...这个header标签就表示的是整个网页的页眉,他将一组本网页的导航包括起来,很多曾加了页面的阅读性与访问性,当然上面的用法只是他的用法中的一种,你也可以在下面的内容中继续使用header,只要你的页面看起来语意很明显就好...; 了解了他的用法之后下面说说在用他的时候需要注意的东西吧,相信会有很多朋友不知道下面我说的内容的: 1.只在必要时使用header标签,什么是必要的时候就是可以很多提升网页语意的时候,如果只有h1~h6

    80080

    HTML学习记录

    HTML的一些基础知识。 介绍   html全称为:超文本标记语言 (Hyper Text Markup Language, HTML),是用于建立网页的标准标记语言,由成双成对的标签组合而成。... 常用代码与标签 常用标签   自己找吧懒得写了嘻嘻 粗体和斜体   一般我们粗体和斜体使用的都是和,但是如果是强调作用的话,我们一般推荐使用...实体符号 HTML语义元素 & 媒体元素 语义元素 描述 定义文档或节的页眉 定义文档内的导航连结 定义文档内的文章 定义文档中的节... 定义 和 的来源 定义 和 的轨道 定义视频或影片内容 HTML5 新特性 HTML5...只是大陆和台湾称谓不同,且新马一带的称谓也是不同的,称之为黄梨。 黄梨。 当然,由于历史原因,有时候不得不继续使用zh-CN。

    12410

    HTML ,XHTML,HTML5简介,js,JSP与Servlet的关系理解

    HTML5 的改进 新元素 新属性 完全支持 CSS3 Video 和 Audio 2D/3D 制图 本地存储 本地 SQL 数据 Web 应用 HTML5 多媒体 使用 HTML5 你可以简单的在网页中播放...使用内联 SVG。 使用 CSS3 2D 转换、CSS3 3D 转换。...HTML5 使用 CSS3 新选择器 新属性 动画 2D/3D 转换 圆角 阴影效果 可下载的字体 JavaScript 能够改变 HTML 内容,简单说就是让网页动起来。 实例: 使用Servlet产生动态页面,需要在代码中用out.print()打印输出很多HTML标签返回至客户端浏览器界面进行显示。在Servlet中,不得不将静态显示的内容和动态产生内容的代码混合在一起。...JSP是一种建立在Servlet规范功能之上的动态网页技术。是在通常的网页文件中嵌入脚本代码,用于产生动态内容,在JSP文件中嵌入的是java代码和JSP标记!

    10110

    分层 Blazor 组件

    在 ASP.NET Core 中,可以通过名为标记帮助器的新语言项目,实现前所未有的表达水平。标记帮助器是 C# 类,旨在通过分析给定标记树,将它转换为有效的 HTML5。...它将模式对话框的临时非 HTML 标记转换为 Bootstrap 专用标记(请访问 bit.ly/2RxmWJS)。 输入标记和相应输出之间的任何转换都是通过 C# 代码执行的。...图 1 展示了熟悉的 HTML5 标记树,这是为 Bootstrap(3.x 和 4.x 版本)正常运行所必需。...在获得单击后,此按钮便会立即弹出填充有以下三层的 DIV:页眉、正文和页脚。 必须处理模板化组件和级联参数,才能创建模式对话框所需的嵌套组件。...它定义总体 HTML 布局,并使用模板属性导入标记的详细信息(页眉、页脚和正文标记),这些信息可确保给定对话框是唯一的。由于有了 Blazor 模板,任何实际标记都可以指定为调用方页中的内联内容。

    8.4K10

    (2019)面试题:HTML5语义化标签和新特性

    HTML5经过查阅文章,确切发布时间应该是:2014年10月 (查看此篇文章:http://www.chinaw3c.org/archives/677/ ) CSS3我网上没找到具体的,反正看百度百科...在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏,其中的内容可以是日志串连,其他组的导航,甚至广告,这些内容相关的页面。...footer 网页 或 section 的页脚,通常含有该节的一些基本信息,譬如:作者,相关文档链接,版权资料。 比如迷思雨博客网,这里就是包括在一个footer里面: ?...那么告诉你,在很多低版本浏览器下,根本不支持,如果你要去兼容IEx,那么还是不能使用这个。只能说,等待以后大多数都兼容再说。...DOCTYPE html> 完全支持css3 【所以从这里我们可以看出CSS3先于HTML5发布,那么CSS正式发布就在14年前】 新增video和audio 标签 <audio controls

    1.4K00

    毕毕业论文排版(三)-页眉页脚

    毕业论文排版(三)-页眉页脚 子墨居士 前言 页眉页码的设置上一期讲的不清楚,一般来讲,论文的封面、目录和内容的页眉页码设置是不一样的,小编的论文就如此。因此将分三个步骤来设置:分节、页眉页脚。...下面的四个是分节符: 下一页分节符--分节后下一节的内容从下一页开始 连续分节符--分节后下一节的内容接着上一节的内容在同一页,但却是两个章节。...偶数分节符--同下一页分节符差不多,只是下一章的内容从偶数页开始,例如当前页为2或3,使用偶数分节符后下一节都会从第4页开始。 奇数分节符--和偶数分节符一样的效果,只是下一页为奇数页。...2.1 页眉设置 页眉页脚的设置在章节位置,点击页眉页脚就可以进入设置界面进行设置 即: 页眉在没有设置页码的时候是比较简单的,就使用上一期的方法就可以了,只需要在页眉插入需要的内容即可,图标也可以...2.3 顶部标题页码 有的学校就比较离谱,要求在页眉的位置同时放上单位和页码,单位居中,页码靠右: 这种我的设置方法是先插入页码,在页脚的地方演示,下面是我设置的格式,如果不要求双面的选右侧就好。

    1.6K30

    HTML-CSS基础学习

    HTML5新增元素 结构元素 header 页面或页面中某个区块的页眉,一般为导航信息 footer 页面或页面中某一个区块的页脚 section 页面中的一块区域,通由内容和标题组成,...表示必须输入数值的文本输入框 range 表示必须输入一定范围内数字值的文本输入框 Date Pickers 可供选取日期和时间的新型文本输入框 HTML5废除元素 可以使用CSS代替的元素...和isindex结合 使用pre代替listing 使用code代替xmp 使用GUIDS代替nextid 使用text/plain MIME类型代替plaintext HTML5新增属性 表单属性 autofocus...减少对外部插件的需求 更优秀的错误处理 更多取代脚本的标记 HTML5应该独立于设备 开发进程透明 HTML5开发工具 Dreamweaver CS Nodeped++ HBuilder Sublime...离线应用和Web Workers Geolocation地理位置 CSS3 CSS3概述 CSS结合DIV可以方便地控制页面布局 整个网站可以统一风格,只要整个网站使用统一的CSS文件 网站的风格维护起来简单

    4.8K30

    【前端就业课 第一阶段】HTML5 零基础到实战(一)基础代码结构详解

    1_bit:是的,这个系列一共分为几个阶段,例如 HTML、CSS3、JS、Vue 将会分为几个阶段,这样就比较系统的讲解完整个前端到就业的内容了。 小媛:哇,这么棒。...1_bit:这是这个课程的一节课,咱们将会普及一下概念与技术内容。例如,你知道什么是HTML吗?跟HTML5有什么关系?...咱们在刚刚完成的HTML代码中输入以下内容,其中之间是对应的标题修饰的文本,之间也是对应标题修饰的文本,咱们把这些内容放到这个标签之间:...我们在以上内容中将文本写在 之间,就表示使用了 去“修饰”这一段文本,那么这个时候浏览器先自己“看”了一遍这整个HTML代码内容,看见你使用了去修饰这个文本...1_bit:这节课就上到这,下节课介绍其他的内容。

    74740

    HTML5

    1、HTML5是什么? HTML5是超文本标记语言的第五次重大修改,2014年10月29日标准规范制定完成。 HTML5的设计目的是为了在移动设备上支持多媒体。...2.7 CSS3特性 在不牺牲性能和语义结构的前提下,CSS3中提供了更多的风格和更强的效果。此外,较之以前的Web排版,Web的开放字体格式(WOFF)也提供了更高的灵活性和控制性。...这种标签将有利于搜索引擎的索引整理,同时更好的帮助小屏幕装置和视障人士使用,除此之外,还为其它浏览要素提供了新的功能,如和标记。...,之前的开发者在实现这些功能时一般都是使用div。...注释中使用,定义不支持 ruby 元素的浏览器所显示的内容 section 定义文档中的节(section、区段) time 定义日期或时间 wbr 规定在文本中的何处适合添加换行符 5、如何让低版本的

    4.5K50

    前端面试题-HTML+CSS

    Doctype 作用,HTML5 为什么只需要写 doctype 是一种标准通用标记语言的文档类型声明,目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义(DTD)来解析文档。声明必须是 HTML 文档的第一行,位于 html 标签之前 HTML5 不基于 SGML,所以不需要引用 DTD。在 HTML5 中<!...sessionStorage WebSocket: HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议 6....HTML5 的离线存储怎么使用,解释一下工作原理 HTML5 的离线存储 9. src 与 href 的区别 区别:src 用于替代这个元素,而 href 用于建立这个标签与外部资源之间的关系 <link...为什么要初始化 CSS 样式 因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异 初始化样式会对 SEO 有一定的影响 10

    1K30

    HTML一些标记的认识

    HTML5的一些特性 在HTML5中主要的特性之一就是减少网页对Flash的依赖,很多视频网站和网页游戏都依赖着Flash来运行,很多时候会发现,没有安装Flash就无法打开一些网页,运行Flash对浏览器压力比较大...因为HTML5的许多改进,令CSS3更强大能够做出更加丰富的页面效果,例如画面层叠、图像透明、图片动画等等 。...) 网页缓存 将原本HTML4的一些标记去除了 令CSS3更丰富的做出页面效果 HBuilder工具 HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。...HTML5标记 HTML5是一个超文本标记语言,我们学习html就是学习这些标记,标记里还有许多的属性,但是这些属性在很多标记里都是相通的,有大概70%的相通性。...如果使用UTF-8则不会出现这种问题: ? 运行结果: ?

    1.7K10

    Word 的一些神操作,你都会了吗?

    你是否有这样的经历:毕业要写毕业论文了,论文格式有各种要求:封面不能有页码和页眉,目录的页码要怎么怎么,正文要怎么怎么样..........在这里,先大致说一下页码是怎么插入的。在插入页码的时候,攻略上说,要先插入分节符,然后光标放在此页眉内,点击功能栏的“链接到前一条页眉”,然后在对应的节内进行页码设置。你有思考过这些问题吗?...这个是先解释一下word中功能栏里的“链接到前一条页眉”的含义。 接下来说说空白页的事 在这里,先介绍一个word中的隐蔽功能,能够很好地帮助我们使用word。...在word 里,在“开始”的导航下面的段落里有这样一个标记,如下,红色的线处。 ?...在word里,把鼠标放在那个图标处,会显示“显示/隐藏编辑标记”,然后点击一下这个功能,它会变成黄色,然后在段落里就会出现如下: ? 字符后面的“小黑点”以及“分节符”字样。

    59600
    领券