1、什么是HTML
全称Hyper Text Markup Language，超文本标记语言，用于创建网页。
超文本标记语言中的标记指的是标签。标签用于定义和描述网页的结构和内容，例如标题、段落、链接、图片等。HTML文档是由一系列的标签组成的，这些标签用于告诉浏览器如何呈现网页的内容。
2、标准文档结构
使用编译工具HBuilderX
官网下载安装-注册登录-按提示设置-新建项目-新建HTML文件（默认结构），显示如下HTML标准文档结构：
<!DOCTYPE html> <!--声明该文档使用的是HTML5-->
<html> <!--文档的根元素，所有其他元素都包裹在其中。浏览器据此读取文档的开始点和结束点-->
<head> <!--所有头部元素的容器：里面存放页面的配置信息，如标题、字符集、样式表和脚本等。-->
<meta charset="UTF-8"> <!-- 字符集为utf-8 -->
<title>页面标题</title> <!-- 定义网页的标题，显示在浏览器的标题栏或标签页上。 -->
</head>
<body> <!--主体：里面放的就是页面上展示出来的内容，如文本、图片、超链接、表格等-->
<!-- 这里是网页的主体内容 -->
</body>
</html>3、重点在标签
标签：由尖括号包围起来的关键词
分类：双标记标签/封闭类型标签，如<p></p>
单标记标签/非封闭类型标签，如<br/>
学习HTML就是学习各种标签，然后组成一个页面，这个页面可以被浏览器解析并展示。
3.1）头部元素容器<head></head>中的标签
这些标签在<head>标签中用于提供文档的元信息和样式表、脚本等资源链接，使得浏览器能够正确地呈现和交互页面的内容。
标签
- <title></title>：定义文档的标题，显示在浏览器的标题栏或标签页上。
- <meta>：用于定义元数据，如字符集、页面描述等。
- <link>：用于链接外部资源，如样式表、图标等。
- <style></style>：用于包含文档的内部样式表（CSS）。
- <script></script>：用于包含客户端脚本，如JavaScript代码（JS）。
- <base>：用于指定页面中所有相对URL的基础URL（案例）。
应用举例
- 页面标题：百度一下，你就知道
<title>百度一下，你就知道</title>- 设置页面的编码为utf-8，防止乱码现象
<meta charset="utf-8"/>
<!--用meta标签，charset="utf-8" 这是属性，以键值对的形式给出，key=value 告诉浏览器用utf-8来解析这个html文档-->
<!--繁写形式（了解）-->
<!--<meta http-equiv="content-type" content="text/html;charset=utf-8" />-->- 页面刷新效果：3秒后跳转到 https://www.baidu.com
<meta http-equiv="refresh" content="3;https://www.baidu.com" />- 页面作者：作者名及联系方式
<meta name="author" content="sheldon;12342234@qq.com" />- 设置页面搜索的关键字：
<meta name="keywords" content="如愿;把你唱成歌"/>- 页面描述
<meta name="description" content="想把我唱给你听，趁现在年少如花"/>- link标签引入外部资源：rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon"
<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon" />
3.2）主体元素容器<body></body>中的标签
在<body>标签中，可以使用以下标签：
3.2.1）文本标签
- <h1></h1>到<h6></h6>：定义六个级别的标题，<h1>最大，<h6>最小，自占一行。
- <hr>：定义一个水平线。width:设置宽度，align：设置位置left、center、right，默认center
- <p></p>：定义一个段落。段落中文字自动换行，段落和段落之间有空行。
- <b></b>：加粗
<i></i>：倾斜
<u></u>：下划线
<del></del>：中划线 - <pre></pre>：预编译：在页面上显示原样效果
- <br>：插入一个换行符，快捷键 shift+enter。
- <font></font>：字体标签，颜色、字号、字体（属于样式，用CSS）
应用举例：
加入h1标题
<h1>愿你所愿的笑颜</h1>横线标签：设置固定宽度300px，居中
<hr width="300px" align="center"/>
<!--300px ：固定宽度
30%：页面宽度的百分比，会随着页面宽度的变化而变化 -->加入段落
<p> 你是 岁月长河</p>
<p> 星火燃起的天空</p>
<p> 我是仰望者 就把你唱成歌</p>加粗、倾斜、下划线、中划线
<b>加粗</b>
<i>倾斜</i>
<u>下划线</u>
<del>中划线</del>
<i><u><b>加粗倾斜下划线</b></u></i>加入一段文本，原样显示
<pre>
public static void main(String[] args){
System.out.println("预编译");
}
</pre>加入换行
好想告诉你<br />告诉你我没忘记设置字体
<font color="#397655" size="7" face="宋体">世间所有路 都将与你相逢</font>
<!--颜色（可直接选，也可以用取色器）字号（1-7号）字体 --> 3.2.2）多媒体标签
图片、音频、视频可以引用自本地，也可以引用网络资源。
本地：项目中自带img文件夹用于存放图片，新建文件夹music、video存放音频、视频文件，本地资源直接粘贴到相应文件夹中即可。
<img>：引入图片
<embed></embed>：引入音频或视频
- 引入图片
<img src="img/ss6.jpg" width="300px" title="时光情诗" alt="图片加载失败"/>
<!--引入本地图片 -->
<img src="https://img2.baidu.com/it/u=1814561676,2470063876&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500.jpg" />
<!--引入网络图片 -->
<!--src:引入图片的位置 width:设置宽度 height:设置高度 （一般高度和宽度只设置一个即可，另一个会按照比例自动适应）
title:鼠标悬浮在图片上的时候的提示语 alt:图片加载失败的提示语（如未设置，加载失败显示title的内容）-->- 引入音频
<embed src="music/moonlight.mp3"></embed> - 引入视频
<embed src="video/时光情诗.mp4" width="500px" height="500px"></embed>
<!--本地视频-->
<embed src="//player.video.iqiyi.com/38913f9ed7358c0933e82a03d9b26ec1/0/0/v_19rv8qeokk.swf-albumId=9194699400-tvId=9194699400-isPurchase=0-cnId=undefined" allowFullScreen="true" quality="high" width="480" height="350" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
<!--去视频网站：打开一个视频，点击分享，里面有个html代码，直接复制粘贴进来即可不用修改 -->
<!--刷新如果看不到，网页设置允许flash--> 3.2.3）超链接标签
超链接（Hyperlink），又称为锚链接，是一个指向目标地址的连接关系，这个目标可以是另一个网页、同一网页上的不同位置、一张图片、一个电子邮件地址、一个文件，甚至是一个应用程序。
在网页中插入超链接元素，当点击已经链接的文字、图片或其他HTML元素时，浏览器会自动跳转到目标地址，并根据目标的类型来打开或运行。除了基础的文本超链接，还可以通过JavaScript等技术实现交互式的超链接效果。
超链接是网页中非常重要的元素之一，是互联网的基础，它使得用户可以方便地导航到其他网页或资源的特定部分，同时也可以通过超链接建立不同网页之间的联系。
定义超链接
<a href=" "></a>
- 设置超链接：跳转到本地资源、跳转到自身页面、跳转的目标找不到、跳转到网络资源（在当前页面打开）、跳转到网络资源（blank新的页面打开）、给图片设置超链接
<a href="文本标签.html">这是一个超链接01</a>
<!--跳转到本地资源 href里面选择本项目的一个html-->
<a href="">这是一个超链接02</a>
<!--跳转到自身页面 href里面什么都不写-->
<a href="abc">这是一个超链接03</a>
<!--跳转的目标找不到，提示找不到资源-->
<a href="https://www.baidu.com" target="_self">这是一个超链接04</a>
<!--跳转到网络资源 target设置目标页面 _self 当前页面打开-->
<a href="https://www.baidu.com" target="_blank">这是一个超链接05</a>
<!--跳转到网络资源 _blank新的页面打开-->
<a href="https://www.baidu.com" target="_blank"><img src="img/ss.jpg" /></a>
<!--点击图片跳转到页面-->
<!--超链接标签：实现页面的跳转功能 href:控制跳转的目标位置
target: _self 在自身页面打开 （默认效果） _blank 在空白页面打开-->
锚点
锚点是一种特殊的超链接，用来快速定位到指定的位置。通过点击锚点，用户可以直接跳转到页面的某个部分，而不必手动滚动或搜索。可用于导航（页面内容多）、长页面拆分（分为多个部分）、内容区域定位（如商品详情）、返回特定位置（如填写表单后返回顶部）等。在使用锚点时，需要将其与特定位置的元素关联起来，使点击锚点时能够正确地跳转到对应的位置。可用于同页面不同位置跳转，也可用于其他页面的跳转。
设置锚点并用超链接访问的方法如下：
第一步：设置锚点：在需要设置锚点的位置创建一个标签，如<a name="锚点名称"></a>。锚点名称可以是任何文本或字母，用于标识该位置。
<a name="图书区"></a> 第二步：创建超链接：在需要跳转到锚点的地方，使用<a href="#锚点名称"></a>标签创建超链接。href属性的值应与锚点名称相同，以标识要跳转到的位置。
访问锚点：点击超链接时，页面会自动滚动到指定锚点的位置。
<a href="#图书区">跳转到图书区</a>
<!--同页面访问锚点-->
<a href="商品分类.html#图书区">跳转到商品分类页面的图书区</a>
<!--其他页面访问锚点：页面文件名拼接锚点名-->3.2.4）列表标签
无序列表: <ul></ul> 与<li></li>一起使用（包含项目符号（如圆点）的列表项）
有序列表: <ol></ol>与 <li></li>一起使用（包含数字或字母的有序列表项）
举例：
<ul type="square">
<li>JAVASE</li>
<li>MYSQL</li>
</ul>
<!--无序列表: type:默认实心圆点 可以设置circle空心圆 square方形-->
<ol type="A" start="3">
<li>JAVASE</li>
<li>MYSQL</li>
</ol>
<!--有序列表: type:可以设置列表的标号：1,a,A,i,I start:设置起始标号-->
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
