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

相关文章
|
2月前
|
移动开发 HTML5
HTML5的基本结构
HTML5的基本结构。
37 5
|
1月前
|
监控 前端开发 JavaScript
前端工程化和传统前端开发的区别是什么?
前端工程化相比传统前端开发,在开发模式、代码组织与管理、构建与部署流程、团队协作、性能优化以及技术选型等方面都有了显著的改进和提升,能够更好地应对现代前端应用开发的复杂性和高要求。
|
4月前
|
前端开发 JavaScript API
解锁高效应用构建:Vuex与后端交互的前端状态同步策略,让数据流动如行云流水,紧跟前端开发的热点趋势
【8月更文挑战第27天】本文深入探讨了Vue框架下的前端状态管理库Vuex与后端服务交互时的状态同步策略。通过剖析Vuex的核心机制——状态(State)、变异(Mutation)、动作(Action)及模块(Module),文章展示了如何优雅地将后端数据加载并更新至前端状态中。特别地,借助示例代码解释了Action处理API调用、Mutation更新状态的过程,并介绍了如何通过模块化和命名空间提高状态管理的准确性和时效性。此外,还讨论了组件如何利用`mapState`和`mapActions`简化状态访问与操作的方法。遵循这些策略,开发者可以在构建复杂应用时显著提升性能与用户体验。
54 0
|
4月前
|
数据采集 移动开发 前端开发
HTML代码的革命:语义化标签的魅力,让你的网页结构焕然一新!
【8月更文挑战第26天】本文探讨了Web前端开发中的语义化标签概念及其重要性。语义化标签通过使用具有明确含义的HTML标签来构建页面结构,提升了网页的可访问性及搜索引擎优化效果,并增强了代码的可读性和维护性。文章还讨论了实际开发中遇到的问题及未来发展趋势。
64 0
|
23天前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
48 7
|
23天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
32 6
|
1月前
|
前端开发 JavaScript 开发者
前端小白逆袭记:从零开始,如何快速掌握前端开发精髓?
本文从一个前端小白的视角,分享了快速掌握前端开发核心技能的逆袭之路。通过学习HTML、CSS和JavaScript,逐步接触前端框架如Bootstrap、Vue.js和React,克服挑战,最终实现从入门到精通的蜕变。
30 4
|
1月前
|
机器学习/深度学习 移动开发 自然语言处理
HTML5与神经网络技术的结合有哪些其他应用
HTML5与神经网络技术的结合有哪些其他应用
35 3
|
1月前
|
机器学习/深度学习 移动开发 自然语言处理
HTML5与神经网络技术的结合有哪些
HTML5与神经网络技术的结合有哪些
32 2
|
1月前
|
设计模式 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
51 4
下一篇
DataWorks