1.HTML的定义

HTML是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面。HTML文件的后缀名为.html。HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。可以在浏览器中打开HTML文档。

2.HTML开发环境的配置

①开发工具
VS Code
②推荐安装的插件
Auto Close Tag、Auto Rename Tag、Code Runner、IntelliSense for CSS、Material Icon、Open HTML in Browser、Path Intelligence等。

3.HTML文档结构分析

HTML 使用"标记"来注明文本、图片和其他内容，以便于在浏览器中显示。HTML 标记包含一些规定的"元素"。整个HTML文件就是由一个个元素组成，而元素主要是由一对标签构成。
一般元素的组成：开始标签、结束标签、内容。
空元素只含开始标签。
开始标签中可以增加元素的属性，方便我们进行页面设计。其中属性可以是自定义的属性也可以是HTML语言中自带的属性。属性包含元素的额外信息，这些信息不会在浏览器中显示出来。
练习：

<!-- <!DOCTYPE html>: 声明文档类型。出于历史原因需要，现在可有可无。 -->
<!DOCTYPE html>
<!-- <html></html>: <html>元素。这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。 -->
<html lang="en">
<!-- <head></head>: <head>元素。 这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。 -->
<head><!-- <meta charset="utf-8">: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。 --><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- <title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。 --><title>Document</title>
</head>
<!-- <body></body>: <body>元素。 包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。 -->
<body></body>
</html>

4.具体元素的功能

①标题类元素
HTML 提供了从大到小6级标题，分别是：h1 ~ h6
练习：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>这是标题1</h1><h2>这是标题2</h2><h3>这是标题3</h3><h4>这是标题4</h4><h5>这是标题5</h5><h6>这是标题6</h6>
</body>
</html>

②超链接元素
1)a
语法：

<a href="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1083511675,3513652275&fm=26&gp=0.jpg"target="_blank">王一博</a>

属性说明：
href即为要跳转去的地址 URL（Uniform Resorce Locator)
target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self，在本窗口直接打开链接内容）
超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击的
练习：（以图片作为超链接标签内容）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 以图片作为超链接标签内容 --><a href="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1083511675,3513652275&fm=26&gp=0.jpg"target="_blank"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F0312%252F84d37988j00qpusic001tc000j6015km.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618235473&t=b83152d224a7a73daa6481d167cd3322" alt="orange"></a>
</body>
</html>

2)锚点
语法：

<!-- 文档其余部分 -->
<h2 id="homework">作业部分</h2>
<!-- 文档其余部分 -->
<a href="#homework">跳到作业部分</a>
<!-- 文档其余部分 -->

注意点：
元素的id值必须是唯一的，也即页面不能再有其它元素的id值为homework
超链接中的地址需要有#符号
用途：点击“跳到作业部分”的文字，即可跳转到以“作业部分”为首行的页面的位置。

③图片元素及文件路径
1)img
语法：

<img src="./images/orange.ico" alt="orange">

属性说明：
src属性为要显示图片文件的位置 URL，即图片文件的路径
alt属性当获取图片出现问题时显示的文字（占位符）
可为图片指定高宽度，但不建议（可能导致图片变形）
2)文件路径
文件路径可以为绝对路径，即文件在互联网中的地址，也可以为相对路径，上述是相对路径的一种表达方式。
练习：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 相对位置的三种表达方式 --><!-- 该图片文件在当前目录下的images目录中 --><img src="./images/orange.ico" alt="orange" width="200" height="200"><!-- 该图片文件与当前文档在同一目录中 --><img src="orange.ico" alt="orange" width="200" height="200"><!-- 该图片文件在上一级目录中 --><img src="../orange.ico" alt="orange" width="200" height="200">
</body>
</html>

④表格及表格相关元素
1)table
说明：绘制一个表格
2)tr
说明：换行
3)td
说明：行中的单元
4)th
说明：表头的单元（将会加粗显示）

⑤列表元素
1)ul
说明：无序列表使用ul标签，默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。
2)ol
说明：有序列表使用ol标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。

⑥表单元素
1)form
说明：我们使用表单来让用户填写或选择相关信息。

⑦区块元素
说明：区块元素在浏览器显示时，通常会以新行来开始和结束。如：h1, pre, ul, table，div 等。

⑧内联元素
说明：内联元素总是一个接一个进行显示，不会新起一行。如： span, input, td, a, img等。

⑨预设格式元素
1)pre
说明：以预设的格式在浏览器中显示。

⑩特殊字符
说明：正确地显示预留字符，如：“<”、“>”等，须在 HTML 源代码中使用字符实体。

HTML学习内容的总结相关推荐

【JavaScript总结】JavaScript发展与学习内容
发展: 最初浏览器是为大学里浏览文档用,从地址栏输入文档地址,找到文档显示. 后来各种需求(购物网站,个人博客)出现,已有功能不能满足需求. 可人们依旧在努力满足这种需求,但实现后的效果很不尽人意. ...
待办事项优先级开发_如何通过创建主题待办事项确定学习内容的优先级
待办事项优先级开发 by Dan Draper 通过丹·德雷珀(Dan Draper) 如何通过创建主题待办事项确定学习内容的优先级 (How to prioritize what you lear ...
【组队学习】十月组队学习内容详情！（第30期）
第30期 Datawhale 组队学习活动马上就要开始啦! 本次组队学习的内容为: 吃瓜教程--西瓜书+南瓜书李宏毅机器学习(含深度学习) 深入浅出Pytorch 时间序列分析机器学习数学基础树 ...
【组队学习】【25期】Datawhale组队学习内容介绍
第25期 Datawhale 组队学习活动马上就要开始啦! 本次组队学习的内容为: web开发入门教程数据挖掘实战(异常检测) 集成学习(下) 大家可以根据我们的开源内容进行自学,也可以加入我们的组 ...
【组队学习】【24期】Datawhale组队学习内容介绍
第24期 Datawhale 组队学习活动马上就要开始啦! 本次组队学习的内容为: 零基础入门语音识别(食物声音识别) Docker教程数据挖掘实践(智慧海洋) 集成学习(中) 河北邀请赛(二手车价 ...
layui概述||layui的学习内容
概述下载地址 https://www.layui.com/ 下载文件说明 layui.all.js 包含了所有模块的js layui.js 框架如果要使用必须使用 layui.use ...
从0开始接触html--第一天学习内容总结
第一天总结: h1-h6 p 段落 hr br 有序 ol li 无序 ul li 定义列表 dl dt dd 块级元素:独占一行,h1-h6 p hr div 行内元素:共占一行, em和i st ...
Java技术依然备受追捧，主要学习内容有哪些？
Java技术依然备受追捧,主要学习内容有哪些?Java 语言是一门随时代快速发展的计算机语言程序,其深刻展示了程序编写的精髓,加上其简明严谨的结构及简洁的语法编写为其将来的发展及维护提供了保障. 在众 ...
bpmn2.0业务过程模型和符号_IT帮业务架构学习小组学习内容
关于学习内容,担心大家学完的可能不多,所以考虑是先选择一小部分来学.但考虑到业务架构属于组织级学科,本身就要求体系全面,所以还是决定把全套内容放入到本期学习.下面我列举一下我们这8个月在业务架构自主学 ...
大数据之_数据采集Flume_Flume了解_学习内容介绍---Flume工作笔记002
可以看到flume是个海量日志的采集,聚合和传输的系统可以看到比如我们之前用的hive,有大量的日志可以用flume进行采集到hdfs中去然后再看一下flume的具体学习内容.

HTML学习内容的总结

1.HTML的定义

2.HTML开发环境的配置

3.HTML文档结构分析

4.具体元素的功能

HTML学习内容的总结相关推荐

最新文章

热门文章