《智能前端技术与实践》——第 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

相关文章
|
3月前
|
移动开发 HTML5
HTML5的基本结构
HTML5的基本结构。
40 5
|
2月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
77 7
|
2月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
50 6
|
2月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
52 5
|
2月前
|
机器学习/深度学习 移动开发 自然语言处理
HTML5与神经网络技术的结合有哪些其他应用
HTML5与神经网络技术的结合有哪些其他应用
40 3
|
2月前
|
机器学习/深度学习 移动开发 自然语言处理
HTML5与神经网络技术的结合有哪些
HTML5与神经网络技术的结合有哪些
42 2
|
3月前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
3月前
|
移动开发 HTML5
一个最简单的 HTML 页面结构如下:
HTML 是一种标记语言,用于描述网页结构。通过 `&lt;html&gt;`, `&lt;head&gt;`, `&lt;body&gt;` 等标签构建页面,支持文本、图像、链接、表格等多种元素。本文介绍了 HTML 基础,包括常用标签及创建简单网页的实例,帮助初学者快速入门。
97 0
|
4月前
|
数据采集 存储 JavaScript
如何使用Cheerio与jsdom解析复杂的HTML结构进行数据提取
在现代网页开发中,复杂的HTML结构给爬虫技术带来挑战。传统的解析库难以应对,而Cheerio和jsdom在Node.js环境下提供了强大工具。本文探讨如何在复杂HTML结构中精确提取数据,结合代理IP、cookie、user-agent设置及多线程技术,提升数据采集的效率和准确性。通过具体示例代码,展示如何使用Cheerio和jsdom解析HTML,并进行数据归类和统计。这种方法适用于处理大量分类数据的爬虫任务,帮助开发者轻松实现高效的数据提取。
如何使用Cheerio与jsdom解析复杂的HTML结构进行数据提取
|
3月前
|
移动开发 前端开发 JavaScript
HTML与现代Web开发的不同技术
【10月更文挑战第11天】HTML与现代Web开发的不同技术
41 0
下一篇
开通oss服务