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

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

2.2 HTML基础

HTML(HyperText 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 文档基本结构


1.TYPE>标签

从1993年6月HTML第一个版本发布到2014年10月W3C正式发布HTML5最新推荐标准,在HTML发展的历史长河中,至少有3个版本的HTML在广泛使用,包括HTML4、XHTML1.0及HTML5。关于HTML4、XHTML1.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

相关文章
|
前端开发 搜索推荐 开发工具
通义灵码与颜色板生成器,为前端开发提供智能配色解决方案
在前端开发中,色彩搭配对用户体验和界面美观至关重要。通义灵码提供的颜色板生成器通过自动推荐配色方案、随机生成颜色组合及支持自定义调整,帮助开发者高效完成配色任务。该工具支持一键导出为 CSS 样式表,并提供简洁的中文指令交互方式,大大提升开发效率,助力开发者打造美观和谐的用户界面。
|
人工智能 前端开发 JavaScript
前端工程化演进之路:从手工作坊到AI驱动的智能化开发
前端工程化演进之路:从手工作坊到AI驱动的智能化开发
1121 19
前端工程化演进之路:从手工作坊到AI驱动的智能化开发
|
XML 前端开发 C#
C#编程实践:解析HTML文档并执行元素匹配
通过上述步骤,可以在C#中有效地解析HTML文档并执行元素匹配。HtmlAgilityPack提供了一个强大而灵活的工具集,可以处理各种HTML解析任务。
512 19
|
监控 前端开发 JavaScript
前端工程化和传统前端开发的区别是什么?
前端工程化相比传统前端开发,在开发模式、代码组织与管理、构建与部署流程、团队协作、性能优化以及技术选型等方面都有了显著的改进和提升,能够更好地应对现代前端应用开发的复杂性和高要求。
|
人工智能 移动开发 前端开发
WeaveFox:蚂蚁集团推出 AI 前端智能研发平台,能够根据设计图直接生成源代码,支持多种客户端和技术栈
蚂蚁团队推出的AI前端研发平台WeaveFox,能够根据设计图直接生成前端源代码,支持多种应用类型和技术栈,提升开发效率和质量。本文将详细介绍WeaveFox的功能、技术原理及应用场景。
8014 68
WeaveFox:蚂蚁集团推出 AI 前端智能研发平台,能够根据设计图直接生成源代码,支持多种客户端和技术栈
|
前端开发 Cloud Native Java
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
1037 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
1164 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
1397 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
Postman 可以将文档导出为 HTML/Markdown 吗?
Postman 没有提供直接将你的文档导出为 HTML 或 Markdown 的途径。太糟糕了

热门文章

最新文章

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