《Web前端开发最佳实践》——3.2 标准的HTML页面结构

简介:

本节书摘来自华章计算机《Web前端开发最佳实践》一书中的第3章,第3.2节,作者:党 建 更多章节内容可以访问云栖社区“华章计算机”公众号查看。

3.2 标准的HTML页面结构

每个HTML文档都会包括两个部分:“head”和“body”。head部分是以< head

开始并以 head >结束的,而body部分是以< body >开始并以 body >结束的。这两个部分由一对< html >… html >包含在一起,可见一个基本的HTML文档结构就是:


<html>
    <head>
    </head>
    <body>
    </body>
</html>

head部分包含整个文档的一些基本信息,如网站的编码格式、网站的标题、网站引用的样式和脚本等。body部分包含用户在浏览器中看到的内容。
为了使得HTML文档能兼容标准格式,还需要给文档添加一个文档类型声明(DTD),当浏览器解析HTML文档时会遵循指定的类型声明标准。
HTML4的规范中定义了多个规范的文档声明,如下是一个典型的使用示例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

在HTML5的规范中简化了文档类型声明,省略了DTD的引用,表明文档以标准模式解析,示例代码如下:

<!DOCTYPE html>

因为浏览器可以识别HTML5规定的这种声明,所以只要HTML文档的内容够规范就不用担心浏览器是否能识别。
head部分包含文档的标题,文档的标题是作为站点的名称和简短描述显示在浏览器的标题栏上的,示例代码如下:

网站标题
如果引用JavaScript和CSS外部文件,则需要把外部文件的链接添加到head部分。
示例代码:
<link rel="stylesheet" type="text/css" href="my_style.css" />

此外,head部分还会包含一些必要的meta标签,是对HTML文档内容的描述,用来表明文档的编码、关键字、介绍、作者等信息。
示例代码:

<meta name="keywords" content="HTML, web" />
<meta name="description" content="一个展示HTML页面的例子" />

body部分则包含所有在浏览器上展示的内容,如文本、图片、表格、音视频等。
示例代码:

<a href="/news">News</a>
<img src="green.jpeg" alt="Green" />
<video src="tgif.vid" autoplay onerror="failed(event)"></video>

综合这些页面的主要组成部分来看,一个稍微完善的页面会具有如下类似的
结构:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Sample page</title>
        <link rel="stylesheet" href="my_style.css" />
    </head>
    <body>
        <h1>Sample page</h1>
        <p>This is a <a href="demo.html">simple</a> sample.</p>
        <!-- this is a comment -->
    </body>
</html>
相关文章
|
10月前
|
JavaScript 前端开发 安全
Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
每日激励:“如果没有天赋,那就一直重复”。我是蒋星熠Jaxonic,一名执着于代码宇宙的星际旅人。用Vue 3与TypeScript构建高效、可维护的前端系统,分享Composition API、状态管理、性能优化等实战经验,助力技术进阶。
1279 1
Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
|
前端开发 Cloud Native Java
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
1289 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
数据采集 数据处理
将html_table2结果转化为tibble的最佳实践
本文介绍了如何使用 `html_table2` 和 `tibble` 进行网页表格数据的采集和处理。通过结合代理 IP 技术,展示了如何高效地从汽车之家网站(https://www.autohome.com.cn/)抓取汽车品牌和价格信息,并将其转化为适合分析的 `tibble` 格式。文章详细讲解了数据清洗和转换的最佳实践,提供了完整的代码示例。
337 11
将html_table2结果转化为tibble的最佳实践
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
516 6
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
310 5
|
存储 前端开发 JavaScript
前端中对象的深度应用与最佳实践
前端对象应用涉及在网页开发中使用JavaScript等技术创建和操作对象,以实现动态交互效果。通过定义属性和方法,对象可以封装数据和功能,提升代码的组织性和复用性,是现代Web开发的核心技术之一。
|
前端开发 数据管理 测试技术
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第27天】本文介绍了前端自动化测试中Jest和Cypress的实战应用与最佳实践。Jest适合React应用的单元测试和快照测试,Cypress则擅长端到端测试,模拟用户交互。通过结合使用这两种工具,可以有效提升代码质量和开发效率。最佳实践包括单元测试与集成测试结合、快照测试、并行执行、代码覆盖率分析、测试环境管理和测试数据管理。
696 2
|
前端开发 JavaScript 数据可视化
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第26天】前端自动化测试在现代软件开发中至关重要,Jest和Cypress分别是单元测试和端到端测试的流行工具。本文通过解答一系列问题,介绍Jest与Cypress的实战应用与最佳实践,帮助开发者提高测试效率和代码质量。
724 2
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js