HTML5学习笔记四:html5新增标签、语义特性-文档声明
myzbx 2024-12-11 15:58 17 浏览
文档声明,定义和用法
声明必须位于 HTML5 文档中的第一行,也就是位于 标签之前。该标签告知浏览器文档所使用的 HTML 规范。
doctype 声明不属于 HTML 标签; 它是一条指令,告诉浏览器编写页面所用的标记的版本。
在所有 HTML 文档中规定 doctype 是非常重要的,这样浏览器就能了解预期的文档类型。
HTML 4.01 中的 doctype 需要对 DTD 进行引用,因为 HTML 4.01 基于 SGML。而 HTML5不基于 SGML,因此不需要对 DTD 进行引用,但是需要 doctype 来规范浏览器的行为(让浏览器按照它们应该的方式来运行。)。
结构性标签
结构性标签(construct tag)主要负责Web的上下文结构的定义,确保 HTML文档的完整性,这类标签包括以下几个:
section。用于表达书的一部分或一章,或者一章内的一节。在Web页面应用中,该标签也可以用于区域的章节表述。
hgroup 对网页或区段(section)的标题进行组合:。
header。页面主体上的头部,注意区别于head标签。这里可以给初学者提供一个判断的小技巧:head标签中的内容往往是不可见的,而header标签往往在一对body标签之中。
footer。页面的底部(页脚)。通常,人们会在这里标出网站的一些相关信息,例如关于我们、法律申明、邮件信息、管理入口等。
nav。是专门用于菜单导航、链接导航的标签,是navigator的缩写。
article。用于表示一篇文章的主体内容,一般为文字集中显示的区域
块级性标签
级块性标签(block tag)主要完成Web页面区域的划分,确保内容的有效分隔,这类标签包括以下几个:
aside。用以表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。从一个简单页面显示上看,就是侧边栏,可以在左边,也可以在右边。从一个页面的局部看,就是摘要。
figure 标签规定独立的流内容,通常与figcaption联合使用。
code。表示一段代码块。
dialog 对话标签 配合dt dd标签使用
行内标签。
行内语义性标签(in-line tag )主要完成Web页面具体内容的引用和表述,是丰富内容展示的基础,这类标签包括以下几个:
meter。表示特定范围内的数值,可用于工资、数量、百分比等 max表示最大值,min表示最小值,value代表当前值。
time。表示时间值,属性datetime强调时间
progress。用来表示进度条
多媒体标签
video。视频标签,用于支持和实现视频(含视频流)文件的直接播放,支持缓冲预载和多种视频媒体格式,例如MPEG-4、OggV和WebM等。
audio。音频标签,用于支持和实现音频(音频流)文件的直接播放,支持缓冲预载和多种音频媒体格式。
列表标签
- datalist 标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。
所有主流浏览器都支持datalist标签,除了internet Explorer 和 Safari。
交互性标签
交互性标签(interactive tag)主要用于功能性的内容表达,会有一定的内容和数据的关联,是各种事件的基础,这类标签包括以下几个:
menu。主要用于交互菜单(这是一个曾被废弃现在又被重新启用的标签)。
command。用来处理命令按钮。
下期预告(假期到了,大家可以先放下编程学习,出去走走,听听Tommy讲讲自己的故事):
一个迷茫大学生进入编程世界的心路历程
番外篇:说说愚人节
其实,对于现在国人过洋节的兴致大于传统节日,我真的没什么好说的。不知道是开放带来的进步,还是我们对文化的失守。Tommy不做愤青,是提倡大家追求洋文化的同时,要做到对自我文化的坚守。
相关推荐
- Fabric.js使用说明详解(fabric nodejs)
-
Fabric介绍简介:Fabric是一款基于HTML5Canvas的开源绘图库,它提供了丰富的API和工具,可以轻松地创建交互式的绘图应用程序和游戏。功能特点:介绍Fabric的核心功能,如图形绘制...
- 如何才能快速将照片变成漫画?(如何才能快速将照片变成漫画风格)
-
本文分享8个超级详细的照片变漫画教程,让你秒变绘画大师,跟着教程就能亲手将自己的照片制作成精美的漫画,快来一起试试吧~1、PS一款专业的图像处理软件,具备出色的图像处理功能,提供了强大的编辑工具和广...
- 很少人知道的20个最好用的免费设计软件
-
不是每个人都能花重金去购置昂贵的软件来装备自己,特别是在刚开始涉足设计这个行业的新手们。我们知道adobe系列软件正版是收费的,而且很贵,虽然说我们国内已经能破解使用,很多人都认为adobe的那些软件...
- 13个免费的信息图表制作软件推荐(如何制作信息表)
-
制作信息图表涉及大量的工作,如:数据收集,数据排列,选择和规划信息图表的格式和设计信息图表。在设计信息图表时,选择适当的制图软件是一个非常艰巨的任务。下面为大家推荐13个最好的免费信息图表制作软件。A...
- 怎么转换图片的格式?(怎么转换图片的格式)
-
我们日常用到最多的图片格式是JPG/JPEG格式的,其他常见的图片格式包括有bmp,png,tif,gif,svg,cdr,ai,raw,webp等,由于图片的使用场景不同,所以要求的具体格式也会有所...
- Adobe的各种图形处理软件分别是做什么的
-
Adobe公司的Ps,Pr,Ae,An,Ai软件分别的用来做什么的?PS:AdobePhotoshop的简称,用于图像处理、编辑、通道、图层、路径综合运用,图像色彩的校正,各种特效滤镜的使用、特效字...
- 前端开发中,对图片的优化技巧有哪些?
-
按照先后顺序有以下:1.去掉无意义的修饰。嗯,我会瞎说吗?除了内容图片,其他的图片的作用是修饰,也就是对于传达信息来说并非本质性的。最大的优化就是压根不要图片!所以在优化之前要做的,首先是确认设计,...
- Adobe软件的最佳Linux替代品有哪些?这几款工具不容错过
-
如果你是一名平面设计工作者,那么估计很多与你职业相同或者是喜欢并正在学习平面设计的小伙伴们,而如果恰巧你们都是Linux用户的话,那么估计很多的小伙伴都在寻找Adobe的Linux替代品吧。但是,...
- 精心收集几个免费绘图、修图与照片编辑软件分享一下
-
本次为大家介绍几款绘图、修图与照片编辑软件,都可以免费授权个人与教育使用,有些开源软件甚至可以在工作上商业使用。其中大多数的绘图软件都是跨平台的,可以在Windows或Mac上安装,对个人照片...
- UI设计入门干货!八大软件+技能+素材网站
-
随着互联网行业的发展,UI设计师越来越多的被提及,UI设计师大火,需求岗位越来越多,也有越来越多的人转行投身UI设计师。UI设计是什么?一般所说的UI设计多指UI视觉设计,主要负责APP、Web、H5...
- 干货!一文读懂10种主流的图片格式
-
JPG、PNG、GIF,这些在我们生活中常见的图片格式,你真的了解它们吗?你知道除了这3种图片格式外,还有十多种主流的图片格式吗?每一种图片格式都有自己的特点和适用场景,选择正确的图片类型不仅能提升视...
- 最佳设计:A-Frame,阅读进度指示器,Colorify.js,交互式讲故事
-
最佳设计和开发好东西的综述以及一些新版本-第44期(2015年最后一期),包括A-Frame,阅读进度指示器,Colorify.js,交互式讲故事的动画地图路径,简单的Ionic侧菜单过渡等。摇滚...
- 当爆火的“粘土风”吹进铁路......
-
展播开始啦⑨<animateattributeName="opacity"begin="0s"dur="0.01"fill="freeze"from="1"to="1"/>&l...
- 日日是好日:书法艺术文字T恤定制,陶冶性情、现代生活新平衡
-
书法,心情和思想都融入文字的意境当中,对眼前或身边发生的不愉快事情视而不见、听而不闻,从而进入既轻松又舒适的状态,没有了妄念和烦恼,精神获得享受。本文节选自《DIYSKU个性化定制设计按需印刷行业出海...
- 从默默无闻到无可替代,Photoshop背后藏着多少不为人知的故事 ?
-
1990年2月推出了photoshop1.0。当时Photoshop只能在Mac计算机上运行,功能上也只有“工具”面板和少量的滤镜。1991年2月推出了photoshop2.0。该版本发行引发了桌...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 中级教程 (30)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)