本文介绍了HTML的基础，包括HTML是什么，HEAD元素中的title和meta，文本元素、文档结构元素、列表元素的使用，div与span标签的功能，URL的简介，图像标签<img>的属性，以及超链接<a>的使用，如文本链接、锚点链接和target属性。
文章目录
前言
通过浏览器可以访问服务器上的信息，包括文本数据以及图片、声音、视频等多媒体数据。而HTML的出现，能有效的帮助浏览器传递过来的信息，有好的形式呈现给用户。
一、HTML概述
1、HTML是什么？
- HTML（Hyper Text Markup Language）就是超文本标记语言，是Internet上编写网页的主要语言。
- 顾名思义，它不是一种编程语言，而是一种描述性标记语言，用来描述页面内容的显示方式。
- HTML的基本组成单位是元素，HTML文档结构是由html、head、body三大元素组成。
二、HEAD元素
- HTML中的 < head >元素包含有很多标签，比如title、meta、base、link、script、style等等，主要作用就是向浏览器提供整个页面的基本信息。
1、title 元素
- 标签内是页面的标题，也可以包含任何字符或者实体。
- 标题在大多数浏览器中可以作为默认快捷方式或者收藏夹的名称，还可以作为搜索引擎结果中的页面标题。
- 所以应该为每一个网页添加相应的标题，尽量与页面内容有关，比较简洁易懂。
<!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>页面的标题</title>
</head>
<body>
</body>
</html>
2、meta 元素
- 是用来向用户的浏览器传递信息的，不用来显示内容。并且一个head标签中可以有多个meta标签。
- 主要可以分为两大类：一类是对页面进行设置，一类针对搜索引擎进行设置；
三、文本元素
1、标题标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于标题标签</title>
</head>
<body>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签 与默认文本大小基本相同</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
</body>
</html>
2、文本修饰标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于语义标签</title>
</head>
<body>
<p>你好</p>
<p><strong>你好</strong></p>
<p><em>你好</em></p>
<p><del>你好</del></p>
<p><ins>你好</ins></p>
<p>HTML 语言是一门 <ins>""</ins> 的语言</p>
</body>
</html>
3、转义字符
- 为什么需要转义字符？ 类似于 < 或者 > 这类字符时，HTML中已经有作用，所以如果想显示这类字符就需要转义。
- 基本格式就是&…;的形式，例如空格就是 
- 可以查阅使用 链接：常用转义字符 查询
四、文档结构元素
1、段落标签< p>
- < p>标签，段落与段落之间保持一定的间距
- 注意：在HTML页面中，字符之间的一个或多个连续的空格，只能显示为一个空格。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于段落</title>
</head>
<body>
<!-- 所有的 空格包括 \t 还有 \n；最终在浏览展示中都被视为一个空白 -->
<p>Click
Duplicate
The
Duplicate
button
on
the
toolbar.
A
new template item is added to the same group as the original, and selected.</p>
<p>Click Duplicate The Duplicate button on the toolbar. A new template item is added to the same group as the original, and selected.</p>
</body>
</html>
2、换行标签< br />
- < br />是空标签，br 和 / 之间存在一个空格
- 从效果来看，br标签只是换行功能，而p标签会在段落之间形成一定距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于段落</title>
</head>
<body>
<!-- 所有的 空格包括 \t 还有 \n；最终在浏览展示中都被视为一个空白 -->
<p>Click
Duplicate
The
Duplicate<br>
button<br>
on
the
toolbar.
A
new template item is added to the same group as the original, and selected.</p>
<p>Click Duplicate The Duplicate button on the toolbar. A new template item is added to the same group as the original, and selected.</p>
</body>
</html>
3、水平线标签< hr />
<!-- 用来标识 H5 版本的 HTML 格式，建议都带上 -->
<!DOCTYPE html>
<html>
<head>
<title>你好世界</title>
</head>
<body>
<h1>我去春游</h1>
<p>我玩得<em>很开心</em></p>
<p>明天接着去!</p>
<hr>
</body>
</html>
五、列表元素
1、有序列表< ol>
- 通过数字或者字母进行编号
- type属性可以指定编号样式，1 阿拉伯数字，a 小写字母， A 大写字母，i / I 小写/大写罗马数字
- start属性指定列表序号的开始位置
<h1>有序列表</h1>
<ol>
<li>cc</li>
<li><a href="https://www.baidu.com/">百度</a></li>
<li><img src="cc.jpg" height="120"></li>
</ol>
2、无序列表< ul>
- 图形符号，而不是编号
- type属性可以指定图形，circle圆，disc点，square方形，none等类型，缺少type时，大多数浏览器默认是disc
<h1>无序列表</h1>
<ul>
<li>cc</li>
<li><a href="https://www.baidu.com/">百度</a></li>
<li><img src=".jpg" height="120"></li>
</ul>
3、自定义列表< dl>
- 使用< dl>标签来实现
- 每一小块都是由标题 dt 和描述 dd 成对出现
- 与dt标签相比，dd标签内容通常向后缩进一定的空间
<h1>自定义列表</h1>
<dl>
<dt>标题</dt>
<dd>项1</dd>
<dd>项2</dd>
<dd>项3</dd>
</dl>
六、div与span标签
- div标签属于块级元素
- span’标签属于行内元素，当句子或者段落中某一部分需要分组，就可以使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于 div 和 span</title>
</head>
<body>
<!-- 每个 div 都是独立的，结束后必须跟换行 -->
<div>111</div><div>222</div>
<!-- span 不换行 -->
<span>AAA</span>
<span>BBB</span>
<span>CCC</span>
</body>
</html>
七、URL简介
- URL：Uniform Resource Locator 唯一资源定位符,俗称网址。每一个资源都有唯一的URL
- 网络上电脑众多，如何确定唯一主机，例如192.168.1.3/127.0.0.1
- 主机上有很多程序（进程），如何确定唯一程序，端口号 :3306 :80（http默认）
- 怎么确定是具体的哪个资源，资源路径 /login
八、图像标签
- < img />有两个常用属性 src 和 url
- src属性值是指向图片的URL地址，可以是绝对路径，可以是相对路径
- alt属性是图像的文本描述，当图片无法显示时会显示该文本内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于图片</title>
</head>
<body>
<!-- 浏览器取到的资源还是原图资源，只是最终显示的时候缩放 -->
<img src="cc.jpg" height="300" alt="这是一个头像">
</body>
</html>
九、超链接标签< a>
1、文本链接
<a href="target.html">本地的一个资源页</a>
<a href="https://www.baidu.com/">在当前页打开百度</a>
2、锚点链接
- 相当于这篇博客的目录，点击想看的内容就可以定位；
- 步骤一：创建锚点时，a标签必须附带id属性，用于指定锚点名称
- 步骤二：在页面中，a标签的href属性由 # + 锚点名称 两部分构成，例如
<a href="#">空链接</a>回到页面顶部 - 由于太占篇幅，有兴趣的同学可以自己在文章最后的推荐的网站去尝试；
3、target 属性
- 默认链接会在当前窗口打开，target属性可以改变目标文档的显示窗口。
<a href="https://www.baidu.com/" target="_blank">在一个新的页面打开百度</a>
总结
主要记住一些常用的标签，如标题系列、段落、换行等文本标签以及一些语义标签还有重要的图片标签等，在使用过程中可以查看W3school网站、mdn文档使用。
22万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
