《智能前端技术与实践》——第 2 章 前端开发基础 ——2.2 HTML基础——2.2.1 HTML 文档基本结构(上)

简介: 《智能前端技术与实践》——第 2 章 前端开发基础 ——2.2 HTML基础——2.2.1 HTML 文档基本结构(上)

2.2 HTML基础

HTMLHyperText Markup Language,超文本标记语言)是一种用于描述网页结构的标记语言,它使用特殊的语法或符号来组织有关页面的信息并将其提供给浏览器,元素两侧通常具有开始和结束标签。例如,我们可以在文本周围放置不同的标签来显示它是标题、段落还是列表,如代码清单2-1所示。

代码清单2-1

<h1>大家好,我是石璞东</h1>欢迎访问我的开源作品:
<ol><li>个人网站(https://www.shipudong.com)</li><li>个人微信公众号(hahaCoder)</li><li>个人微信小程序(hahaAI)</li><li>Github(https://github.com/hahaDong?tab=repositories)</li></ol>

运行结果如图 2-1 所示。

image.png


接下来,我们查看百度首页的源代码,如图 2-2 所示。


image.png


图2-2 百度首页的源代码


2-2中所标记的即为创建一个基本的HTML文档所必需的4个标签(DOCTYPE><html>ead>ody>)。接下来,详细介绍相关标签。


2.2.1 HTML 文档基本结构


1TYPE>标签

19936HTML第一个版本发布到201410W3C正式发布HTML5最新推荐标准,在HTML发展的历史长河中,至少有3个版本的HTML在广泛使用,包括HTML4XHTML1.0及HTML5。关于HTML4XHTML1.0的声明,这里不再赘述。我们重点关注HTML5的声明方法,如代码清单2-2所示。


代码清单 2-2


<!DOCTYPE html>

值得注意的一点,该标签没有结束标签且不区分大小写。图2-3所示即为DOCTYPE>标签在网页中的实际应用。


image.png



由于HTML目前至少有3个版本在广泛使用,因此需要在网页的最上方添加一个YPE>声明来告诉浏览器网页的版本。另外,添加该标签后还可以避免浏览器通过怪异模式解析网页。


2标签

标签是除PE>标签以外的其他标签(包括、ody>等)的容器,它表示一个文档中HTML部分内容的开始,如代码清单2-3所示。


代码清单2-3

<!DOCTYPE html><html>大家好,我是石璞东。这里是 html 部分的内容。
</html>

标签具有结束标签。图2-4所示即为标签在网页中的实际应用。


image.png


《智能前端技术与实践》——第 2 章 前端开发基础 ——2.2 HTML基础——2.2.1    HTML 文档基本结构(中) https://developer.aliyun.com/article/1228354?groupCode=tech_library

相关文章
|
13天前
|
自然语言处理 开发者 Python
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易,而且功能比纯文本更强。
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易,而且功能比纯文本更强。
|
7天前
|
编解码 前端开发 UED
现代前端开发中的响应式设计技术探索
随着移动设备的普及和屏幕多样化的挑战,现代前端开发中的响应式设计技术显得尤为重要。本文探讨了响应式设计的基本原理及其在实际项目中的应用,涵盖了流体网格布局、媒体查询、弹性图片等关键技术,并结合实例详细展示了如何构建适应不同设备的用户界面。
|
7天前
|
编解码 前端开发 JavaScript
现代Web开发中的前端技术趋势与挑战
随着互联网的迅猛发展,现代Web开发中前端技术正日益成为关注的焦点。本文探讨了当前前端技术的主要趋势和面临的挑战,从性能优化到跨平台适配,为开发者提供了深入的洞见和解决方案。
|
29天前
|
前端开发
技术经验分享:html生成印章
技术经验分享:html生成印章
29 1
|
14天前
|
Unix Linux Shell
Sphinx是一个Python文档生成工具,它可以解析reStructuredText或Markdown格式的源代码注释,并生成多种输出格式,如HTML、LaTeX、PDF、ePub等。
Sphinx是一个Python文档生成工具,它可以解析reStructuredText或Markdown格式的源代码注释,并生成多种输出格式,如HTML、LaTeX、PDF、ePub等。
|
15天前
|
前端开发 JavaScript PHP
技术心得:前端点击按钮,导入excel文件,上传到后台,excel接收和更新数据
技术心得:前端点击按钮,导入excel文件,上传到后台,excel接收和更新数据
17 0
|
19天前
|
机器学习/深度学习 人工智能 前端开发
跨界融合:前端技术与人工智能的奇妙联盟
在技术的世界里,前端开发不再是孤岛。本文探讨了前端技术如何与人工智能领域结合,为用户体验与功能提升开辟了新的可能性。从机器学习到智能推荐系统,我们将看到这些技术如何在前端应用中发挥其 ultimate 的作用。
|
22天前
|
开发框架 前端开发 JavaScript
若依怎样看开发文档,域名搜这个就行ruoyi.vip,建链接点击在线文档,有前端手册和后端手册,若依文档里有项目扩展,项目扩展有大量的开源的软件
若依怎样看开发文档,域名搜这个就行ruoyi.vip,建链接点击在线文档,有前端手册和后端手册,若依文档里有项目扩展,项目扩展有大量的开源的软件
|
25天前
|
前端开发 JavaScript API
只会用插件可不行,这些前端动画技术同样值得收藏-JavaScript篇(下)
只会用插件可不行,这些前端动画技术同样值得收藏-JavaScript篇(下)
18 0
|
25天前
|
监控 JavaScript 前端开发
只会用插件可不行,这些前端动画技术同样值得收藏-JavaScript篇(上)
只会用插件可不行,这些前端动画技术同样值得收藏-JavaScript篇(上)
20 0