《HTML5开发手册》——第1章 HTML5中新的结构元素 第1章 HTML5中新的结构元素

简介:

本节书摘来自异步社区《HTML5开发手册》一书中的第1章,第1.1节,作者: 【美】Chuck Hudson , 【英】Tom Leadbetter 更多章节内容可以访问云栖社区“异步社区”公众号查看。

第1章 HTML5中新的结构元素

HTML5并不是一种具有JavaScript API和酷炫视频的交互式巫术。它有20多个新的元素,可以用来开发Web页面、添加语义以交付容易访问的可重用内容。

在后面章节,我们将学习新的HTML5表单控件和多媒体元素。本章主要讲解新的结构元素,如header、hgroup、nav、footer、article、section和aside。你将知道何时以及如何单独或组合使用这些新元素。实际上,你还将学会利用这些新元素创建一个基本的网站模板,如图1.1所示。


232eeed0f8ac03752695f1ac560539bb6c0bd8ea

1.1 初学者“菜谱”:建立HTML5初始文件

现在我们开始HTML5的旅程,让我们先从HTML文件最上面的声明部分说起。虽然在这一区域的内容并不包含新的元素,但是它现在有一种新的书写方式,在我们开始进入正题之前要知道这一点。

1.1.1 doctype
看起来很眼熟么?


<a href=https://yqfile.alicdn.com/8785f92993387b1cad78e6325559b90bf7f2ce14.png"

doctype称作文档类型声明(Document Type Definition),它总是作为HTML文件的第一行。doctype是Web标准要求的一部分,用来告诉浏览器如何处理文档,这也就是将其放在HTML文档第一行的原因所在。所以,如果你不在第一行使用doctype,或者是在doctype前面添加其他代码,浏览器将进入怪异模式(quirks mode),由此导致你编写的代码在某些浏览器下无法正常运行。

你肯定也不愿意去记忆前面出现的这个doctype,是吧?要想记住它太困难了。现在,HTML5提供了一个很好的而且容易记忆的doctype:


<a href=https://yqfile.alicdn.com/b50c7209b2a0d102a48ae19e2e98f3ff5e87505d.png" >

老实讲,就这么多。你只需要它,就可以告诉浏览器应处于标准模式下。即使某个浏览器尚未实现HTML5,页面仍然可以继续工作。如果使用,很有可能再次触发浏览器的怪异模式。无论最新的HTML语言版本是多少,选择使用doctype,就能在浏览器中正常运行。

1.1.2 字符编码

在head标记中的第一行需要包含的是charset(字符集)声明,它告诉浏览器应该如何解释这个文件。在本例中,我们想要发送一个HTML文档到浏览器中。

在HTML 4中,它应该如下所示:


c991057be59aa60f0e380a09931d900932d349f8

但是,在HTML5中,它会像doctype一样非常简洁:


835934031a1d4e9564841d86c16ede48ceae104f

太简单了!记住,你的页面需要字符编码和doctype声明。

1.1.3 JavaScript和CSS链接

我们会快速讲解本节内容。HTML5有助于降低页面中的大量标记(markup),还可以简化对JavaScript(和其他客户端脚本文件)与CSS的调用。在HTML 4中,script和link元素需要使用type属性,如下所示:


63a5b81a323f602c030d03ce2e802d9776fd39e1

但在HTML5中,上面这些代码如下所示:


ce9ea1f210584e92723b4873726909b1eff1260b

你可能会有疑问:“为什么现在可以这样做?”因为HTML5的一个初衷是在你编写代码时,让代码更加容易理解。所以,如果你想要链接某个脚本,浏览器会假设它是JavaScript文件。并且如果使用rel=stylesheet,它只表示你是链接一个CSS文件。当然,不使用type属性也不会对老版本的浏览器造成影响。

1.1.4 语法编写风格

在HTML5中,对于上面的代码示例,可以使用略微不同的方式书写。

可以全部使用大写:


f6764c0015596cdcc371dfa9aa320574c2fb0a03

可以不使用引号:


a7f18b6d34a464039b9d7de5c035899ead644da4

可以忽略闭合斜杠:


<a href=https://yqfile.alicdn.com/3f999d889e26eaf0a4da3e318078fce4228ca9f9.png" >

或者可以混合使用:


8d85f65b6f7403723927b9f9cff9ae13a95ff29e

这些都可以使用,不过还是强烈建议使用前后一致的编码规范。这样不仅对你有所帮助,而且对打算使用你的代码的开发人员来说,也大有益处。语法风格也将是固定的。我们都曾使用过XHTML,所以应当做到闭合所有标记,使用小写字母,并使用引号将属性括起来。

将前面的代码整合起来便得到HTML5初始页面,如代码1.1所示。


<a href=https://yqfile.alicdn.com/1e46654cc66867ef8a4d5eeb42efce7059f9645f.png" >

将页面保存为.htm(或.html)文件,现在你可以使用大量的内容来填充该页面。

提示:
验证是一种很有用的工具,它可以检查事情可能出错的原因,在开发过程中它是很重要的一个步骤。不过,由于HTML5还在开发当中,所以还没有官方的验证器服务。W3C 验证器可以检查你的页面与HTML5的一致性,但是也会警告这只是实验性功能。

相关文章
|
5月前
|
移动开发 HTML5
HTML5的基本结构
HTML5的基本结构。
54 5
|
2月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
151 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
2月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
64 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
4月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
148 7
|
5月前
|
移动开发 HTML5
一个最简单的 HTML 页面结构如下:
HTML 是一种标记语言,用于描述网页结构。通过 `&lt;html&gt;`, `&lt;head&gt;`, `&lt;body&gt;` 等标签构建页面,支持文本、图像、链接、表格等多种元素。本文介绍了 HTML 基础,包括常用标签及创建简单网页的实例,帮助初学者快速入门。
144 0
|
6月前
|
移动开发 JavaScript 前端开发
Twaver-HTML5基础学习(5)告警元素(Alarm)的告警位置(偏移量以及定位理解)
本文介绍了在Twaver HTML5中如何设置告警元素(Alarm)的位置,包括Node和Link网元的告警位置偏移量以及定位理解。通过示例代码展示了如何在不同类型网元上设置告警位置,并解释了如何通过百分比来确定告警在Link网元上的位置。
65 0
Twaver-HTML5基础学习(5)告警元素(Alarm)的告警位置(偏移量以及定位理解)
|
Web App开发 前端开发 容器
HTML元素定位
一切皆为框 div、h1 或 p 元素常常被称为块级元素(block element)。这意味着这些元素显示为一块内容,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”(inline element),这是因为它们的内容显示在行中,即“行内框”。 块元素的盒子模型(box model of block element) 块级元素:块状元
1082 0
|
1月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
45 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
2月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
70 34