《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>
相关文章
|
12月前
|
JavaScript 前端开发 Java
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
865 72
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
|
移动开发 前端开发 JavaScript
前端web创建命令
本项目使用 Vite 搭建 Vue + TypeScript 开发环境,并基于 HTML5 Boilerplate 提供基础模板,快速启动现代前端开发。
260 2
超好看的404提示页面HTML源码
超好看的404提示页面HTML源码
769 77
|
JSON 人工智能 前端开发
用markdown语法制作一个好看的网址导航页面(markdown-web-nav)
这是一篇关于创建网址导航页面的工具分享文章。作者介绍了从手动编写HTML代码到开发可视化工具 *markdown-web-nav* 的历程,旨在简化网址管理与导航页面生成的过程。该工具支持新增、编辑和删除网址数据,通过导入/导出JSON文件、实时预览Markdown效果以及一键复制等功能,让用户轻松制作美观的网站导航页面。文章还提供了详细的操作步骤及常见问题解答,如还原数据、获取网站图标链接等,适合不同技术水平的用户使用。
845 28
|
移动开发 前端开发 JavaScript
H5 页面与 Web 页面的制作方法
H5页面制作利用HTML5、CSS3和JavaScript技术,结合H5编辑器或框架(如Adobe Dreamweaver、Ionic),注重移动设备兼容性与响应式布局。Web页面制作则基于传统HTML、CSS和JavaScript,借助文本编辑器或IDE完成开发。两者区别在于技术版本、交互性和浏览器支持:H5更互动、现代,但可能不兼容旧浏览器;Web页面更静态、兼容性广。根据需求选择:高交互选H5,广泛兼容选Web。
1935 6
简约404错误页面HTML源码
简约404错误页面HTML源码
505 12
|
前端开发 Cloud Native Java
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
|
移动开发 前端开发 安全
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
1279 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
320 34

热门文章

最新文章

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