《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>
相关文章
|
7月前
|
JavaScript 前端开发 Java
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
695 72
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
414 3
|
9月前
|
移动开发 前端开发 JavaScript
前端web创建命令
本项目使用 Vite 搭建 Vue + TypeScript 开发环境,并基于 HTML5 Boilerplate 提供基础模板,快速启动现代前端开发。
148 2
|
12月前
|
前端开发 Cloud Native Java
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
375 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
数据采集 数据处理
将html_table2结果转化为tibble的最佳实践
本文介绍了如何使用 `html_table2` 和 `tibble` 进行网页表格数据的采集和处理。通过结合代理 IP 技术,展示了如何高效地从汽车之家网站(https://www.autohome.com.cn/)抓取汽车品牌和价格信息,并将其转化为适合分析的 `tibble` 格式。文章详细讲解了数据清洗和转换的最佳实践,提供了完整的代码示例。
246 11
将html_table2结果转化为tibble的最佳实践
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
368 6
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
223 5
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    874
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    400
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    305
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    271
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    399
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    582
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    602
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    186
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    527
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    343