Web前端基础(20)HTML5基本结构

基本HTML结构

每个HTML文档都应该包含一下几个组成部分:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

</body>
</html>

<!DOCTYPE html> 是声明页面为HTML5文档,在HTML4和XHTML1.0时代,有好几种DOCTYPE,每一种都会指明HTML的版本,以及使用的是过度型还是严格型模式,太难记了,所以每次都需要复制黏贴进来,现在所有浏览器都理解这种简单的HTML5的DOCTYPE,所以可以忘记过去复杂繁琐的DOCTYPE了。

<html lang=”en”> 是声明了页面默认语言。

&ltmeta charse=”UTF-8”> 是声明了文档的字符编码。

分级标题

HTML提供了六级标题用于创建页面信息的层级关系,使用h1,h2,h3,h4,h5或h6元素对各级标题进行标记。

1
2
3
4
<body>
<h1>大标题</h1>
<h2>子标题</h2>
</body>

对任何页面来说,分级标题都是重要的HTML元素,由于标题传达的是页面的主题,所以,搜索引擎对标题赋予很高的权重,但这样并不是说标题越多越好。

页面构成

按照从页面顶端向下的顺序,页面通过header,nav,main,article,section,aside,footer来定义页面的结构,用通用容器div来添加额外元素,除了div这些元素都是HTML5中退出的标签。

页眉

一个页眉可以有任意数量的header元素,它们的含义可以根据上下文而有所不同。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title></title>
</head>

<body>
<header role="banner">
/*网站标识、导航等*/
</header>
<main role="main">
<article>
<header>
<h1>第二个header</h1>
<nav role="navigation">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
</header>

<article>
<h2>第二个header对应的内容标题</h2>
<p></p>
<p></p>
<p></p>
</article>
</article>
</body>

</html>

role=”banner”可选,显式的指明了该页眉为整个页面的页眉。

标记导航

在HTML5中使用nav来代表页面中的导航区域,nav和header一样自身并没有样式,只是一种文档元素含义的标记。

标记页面主要区域

大多数网页的页面上都有不同的区块,不过,一个页面只有一个部分代表主要内容。可以将这样的内容包在main中,该元素在页面只使用一次。

创建文章

article元素表示文档、页面、应用或者网站中一个独立的容器,我们可以将article嵌套在另一个article中,一个article可以包含一个或多个section元素。

定义区块

section元素代表文档或者应用的一个一般区块,通常包含一个主题。和div不同的是section的语义标记的是页面中特定的区域,而div不传达任何语义。section是定义具有相似主题的一组内容的,section和article的区别在于,section在本质上组织性和结构性更强,而article代表的是自包含的容器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<body>
<main role="main">
<h1>Latest World News</h1>

<section>
<h2>Breaking News</h2>
<ul>
<li><a href="#">Headline 1</a></li>
<li><a href="#">Headline 2</a></li>
<li><a href="#">Headline 3</a></li>
</ul>
</section>

<section>
<h2>Business</h2>
<ul>
<li><a href="#">Headline 1</a></li>
<li><a href="#">Headline 2</a></li>
<li><a href="#">Headline 3</a></li>
</ul>
</section>

<section>
<h2>Arts</h2>
<ul>
<li><a href="#">Headline 1</a></li>
<li><a href="#">Headline 2</a></li>
<li><a href="#">Headline 3</a></li>
</ul>
</section>
</main>
</body>

指定附注栏

有时候页面有一部分内容与主体内容相关性没那么强,但可以独立存在,可以使用aside元素。比如侧栏、引述、相关文章、广告、友链等等。

在HTML中应该将aside放在main的内容之后,出于SE0和可访问性的目的,最好将重要的内容放在前面。

创建页脚

footer和header类似,不仅仅可以用在页面的底部,还可以用在其他地方。整个页面的页脚一般放在body内。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<body>

<main role="main">
<article>
<h1>The Diversity of Papua New Guinea</h1>

<p>Papua New Guinea is home to more than 800 tribes and languages ...</p>

<p>... [rest of story content] ...</p>

<!-- the article's footer, not the page's -->
<footer>
<p>Leandra Allen is a freelance journalist who earned her degree in anthropology from the University of Copenhagen.</p>

<address>
You may reach her at <a href="mailto:leandra@therunningwriter.com">leandra@therunningwriter.com</a>.
</address>
</footer>
<!-- end article footer -->
</article>
</main>

<!-- the page footer -->
<footer role="contentinfo">
<p>... [copyright and so on] ...</p>
</footer>
</body>

创建通用容器

有时候需要在一段内容外围包一个容器,从而可以为其应用css样式或JavaScript效果。div并不是唯一没有语义的元素,span是与div对应的一个元素,div是块级内容的无语义容器,而span则是短语内容的无语义容器。

在上面的标签元素中,div是除了h1~h6以外唯一早于HTML5出现的元素,在HTML5之前,div是包围大块内容(如页眉、页脚、主要内容、插图等),从而可以为之添加css样式,之前div没有任何语义,现在也一样。

使用ARIA改善可访问性

WAI-ARIA(Web Accessibility Initiative’s Accessible Rich Internet Applicaitions) 无障碍网页倡议-无障碍的富互联网应用,简称ARIA.它是一种规范,使用属性来填补一些语义上的空白。

地标角色

地标角色来帮助识别页面的区域,这些区域用role属性来标记。

地标角色解释如何使用及何时使用
role=”banner”(横幅)面向全站的内容,通常包含网站标志,网站赞助者标志,全站搜索工具等。横幅通常显示在页面顶端,而且通常横跨整个页面的宽度。将其添加到页面级的header元素,每个页面只用一次
role=”navigation”(导航)文档内不同部分或相关文档的导航性元素(通常为链接)的集合。与nav元素是对应的,应将其添加到每个nav元素,或其他包含导航性链接的容器。每个页面可以使用多次。
role=”main”(主题)文档的主要内容。与main元素是对应关系。也可以添加到div,每个页面仅用一次。
role=”complementary”(补充性内容)文档中作为主体内容补充的支撑部分。它对主体内容是有意义的。与aside元素是对应关系。应将其添加到aside或div元素,一个页面可以包含多个。
role=”contentinfo”(内容信息)包含关于文档的信息的大块可感知区域这类信息的例子包括版权声明和指向隐私权声明的链接等。将其添加至整个页面的页脚(通常为footer元素)。每个页面仅使用一次。

文本标记

p是最常用的文本标记之一,要在网页中表示段落就需要用p标签。

small和strong

small表示细则一类旁注,通常包括免责声明、注意事项、法律版本、版权信息等。small通常是行内文本中的一小块,而不是包含多个段落或其他元素的大块文本。

1
2
3
4
5
6
7
<p>Order now to receive free shipping. <small>(Some restrictions may apply.)</small></p>

<p>...</p>

<footer>
<p><small>&copy; 2013 The Super Store. All Rights Reserved.</small></p>
</footer>

strong表示内容的重要性,而em表示内容的着重点。根据内容需要,这两个元素可以单独使用,也可以一起使用。

1
2
<p><strong>Warning: Do not approach the zombies <em>under any circumstances</em></strong>. They may <em>look</em>
friendly, but that's just because they want to eat your arm.</p>

浏览器通常将strong文本以粗体显示,而将em文本以斜体显示,如果em是strong的子元素,将同时显示粗体和斜体。

注意:不用使用b元素代替strong,也不要使用i元素代替em。尽管他们在浏览器中显示的样式是一样的,但是含义却不一样。可以在strong中嵌套strong,em中嵌套em,来说明更加重要。

创建图

HTML5中引入了figure和figcaption来表示页面上的图。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<article>
<h1>2013 Revenue by Industry</h1>

<p>. . . [report content] . . .</p>

<figure>
<figcaption><b>Figure 3:</b> Breakdown of Revenue by Industry</figcaption>

<img src="img/chart-revenue.png" width="180" height="143" alt="Revenue chart: Clothing 42%, Toys 36%, Food 22%" />
</figure>

<p>As Figure 3 illustrates, . . . </p>

<p>. . . [more report content] . . .</p>
</article>

这个figure只有一个图表,不过放置多个图像或其他类型的内容(如数据表格,视频等)也是允许的。figcaption元素并不是必须的,但如果包含他就必须是figure的第一个元素或者最后一个元素。

指明引用或参考

使用cite元素可以对内容的引用或参考进行指明,例如、戏剧、脚本或图书的标题,歌曲、电影、照片或雕塑的名称,演唱会、音乐会,报纸、法律文件等。

引述文本

blockqute元素表示单独存在的引述。

指定时间

我们可以使用time元素标记时间、日期或时间段。

1
<time>2018-10-21</time>

图像

在img标签内,在src属性和值的后面添加alt=””来为图像添加描述文本,当图片显示失败的时候就会显示这段文本。

可以使用width=”x” 和height=”y”来设置图片显的宽高。

关于文本标签还有很多,可以参考w3c school的详细解释。更多HTML5和CSS3知识请参考《HTML5与CSS3基础教程》和《CSS3速查手册》点击下载

评论

Ajax Android AndroidStudio Animation Anroid Studio AppBarLayout Banner Buffer Bulma ByteBuffer C++ C11 C89 C99 CDN CMYK COM1 COM2 CSS Camera Raw, 直方图 Chrome ContentProvider CoordinatorLayout C语言 DML DOM Dagger Dagger2 Darktable Demo Document DownloadManage Element Error Exception Extensions File FileProvider Fresco GCC Git GitHub GitLab Gradle Groovy HTML5 Handler HandlerThread Hexo Hybrid I/O IDEA IO ImageMagick IntelliJ Intellij Interpolator JCenter JNI JS Java JavaScript JsBridge Kotlin Lab Lambda Lifecycle Lint Linux Looper MQTT MVC MVP Maven MessageQueue Modbus Momentum MySQL NDK NIO NexT Next Nodejs ObjectAnimator Oracle VM Permission PhotoShop Physics Python RGB RS-232 RTU Remote-SSH Retrofit Runnable RxAndroid RxJava SE0 SSH Spring SpringBoot Statubar Task Theme Thread Tkinter UI UIKit UML VM virtualBox VS Code ValueAnimator ViewPropertyAnimator Web Web前端 Workbench api apk bookmark by关键字 compileOnly css c语言 databases demo hexo hotfix html iOS icarus implementation init jQuery javascript launchModel logo merge mvp offset photos pug query rxjava2 scss servlet shell svg tkinter tomcat transition unicode utf-8 vector virtual box vscode 七牛 下载 中介者模式 串口 临潼石榴 主题 书签 事件 享元模式 仓库 代理模式 位运算 依赖注入 修改,tables 光和色 内存 内核 内部分享 函数 函数式编程 分支 分析 创建 删除 动画 单例模式 压缩图片 发布 可空性 合并 同向性 后期 启动模式 命令 命令模式 响应式 响应式编程 图层 图床 图片压缩 图片处理 图片轮播 地球 域名 基础 增加 备忘录模式 外观模式 多线程 大爆炸 天气APP 太白山 头文件 奇点 字符串 字符集 存储引擎 宇宙 宏定义 实践 属性 属性动画 岐山擀面皮 岐山肉臊子 岐山香醋 工具 工厂模式 年终总结 开发技巧 异常 弱引用 恒星 打包 技巧 指针 插件 摄影 操作系统 攻略 故事 数据库 数据类型 数组 文件 新功能 旅行 旋转木马 时序图 时空 时间简史 曲线 杂谈 权限 枚举 架构 查询 标准库 标签选择器 样式 核心 框架 案例 桥接模式 检测工具 模块化 模板引擎 模板方法模式 油泼辣子 泛型 洛川苹果 浅色状态栏 源码 瀑布流 热修复 版本 版本控制 状态栏 状态模式 生活 留言板 相册 相对论 眉县猕猴桃 知识点 码云 磁盘 科学 笔记 策略模式 类图 系统,发行版, GNU 索引 组件 组合模式 结构 结构体 编码 网易云信 网格布局 网站广播 网站通知 网络 美化 联合 膨胀的宇宙 自定义 自定义View 自定义插件 蒙版 虚拟 虚拟机 补码 补齐 表单 表达式 装饰模式 西安 观察者模式 规范 视图 视频 解耦器模式 设计 设计原则 设计模式 访问者模式 语法 责任链模式 贪吃蛇 转换 软件工程 软引用 运算符 迭代子模式 适配器模式 选择器 通信 通道 配置 链表 锐化 错误 键盘 闭包 降噪 陕西地方特产 面向对象 项目优化 项目构建 黑洞
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×