本文详细介绍了HTML的基础知识，包括HTML的超文本概念，文档类型声明，标签结构，常用标签如标题、段落、图片和超链接的使用，以及HTML的语义化标签和转义字符。此外，还提到了代码注释、快捷键和HTML5的简化写法，旨在帮助初学者理解并掌握HTML的基本语法。
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
一、HTML前言
什么是HTML：
HTML（Hyper Text Markup Language）超文本标记语言，使用标签描述内容
什么是超文本：
1. 超文本比纯文本更丰富，更强大。
2. 超文本可以包含颜色，字体大小等样式。
3. 超文本可以包含列表项，段落，表格，表单等高级结构4
4. 超文本可以包含图片，视频，音频
5. 超文本可以包含链接相互跳转
6. 超文本可以描述自身
二、index
<!--注释内容 html
//单行注释 js
/*注释内容*/ css
注释内容： 快捷键 CTRL + /(可空行注释，选中某行注释，多行注释)
注释：是代码的解析文本，被注释的内容或者代码不会执行。
注释作用：
1.为了让他人或者自己阅读代码更方便，便于更好的理解代码
2.将代码注释起来就不会执行，方便删除或者还原代码
3.注释可以当做笔记
快捷键：
HTML：5 生成基本代码块
标签名+TAB/ENTER 快速生成标签
CTRL + s 保存 （可以在开发工具中选择自动保存）
CTRL + a 全选
CTRL + c 复制
CTRL + v 粘贴
CTRL + x 剪切
CTRL + z 撤回
CTRL + y 反撤回
CTRL + b 打开/关闭编辑器资源管理器
CTRL + f 查找
CTRL + h 替换
CTRL + "+" 增大字体
CTRL + "-" 减小字体
alt + z 自动换行
alt + 鼠标左键 多行输入
alt + b 打开浏览器DOCTYPE ： 版本标记，在HTML文件中，第一行都是DOCTYPE;
DOCTYPE：声明文档类型，告诉浏览器以标准模式解析文件
html：html就是告诉浏览器这是一个HTML5文件
<!DOCTYPE html>html： 根标签：是整个html页面的第一个标签，文档的所有内容都在这个标签中
标签的嵌套：形成父子关系，外层为父元素，内层为子元素
标签的属性: 在开始标签内添加的，一般都以 属性名="属性值" 。属性
都是给标签添加解释说明 。
<html lang="en">head：头标签，不会显示在网页上
<head>meta：说明标签
charset ：会在head标签第一行，放在页面出现乱码
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>index</title>style：内部设置css样式，配合选择器使用
<style></style>
</head>body： 设置网页的主体内容
<body></body>script：添加js内容（在body的下面添加或者放置在body标签内的最下方）
<script></script>html文档字符编码&语言设置
1.编码的重要性：编码可以导致浏览器通过IE时候网页乱码，也可以导致css的兼容性Hack。
2.编码的位置:(一般这段网页编码放在html文件的head标签内的第一行)。
3.编码的样式:通过charset="UTF-8"中的UTF-8就可以改变网页编码。
4.编码的种类:国内常用的流行编码格式有UTF-8，gb2312这两种，一般这两种类型就可以满足国内所有的网页编码需求。程序和数据库中也会用到这两种编码类型处理网页和储存数据类型。
</html>三、HTML结构标签
html标签按照标签的构成可以分为单标签和双标签。
单标签的写法：
<xxx> 在html5之前，单标签需要些闭合斜杠，但是html5之后不用这样写
<xxx/>
双标签的写法：
<xxx>YYYYY</xxx>
开始标签 标签的内容 结束标签
<标签名 标签属性 标签属性>标签内容</标签名>
不能自定义标签。
四、HTML常用标签
html标题：
<h1>最大用于显示主标题，<h6>为最小标题
默认样式：标题标签带有上下外边距，撑出元素之间的间距
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>hr创建水平线用于分割，
默认样式：
1px的边框线，8px的上下外边距
<span>普通文本</span>
<hr />
<span>普通文本</span>html段落：
p: 段落标签，块元素
注意：
在文本标签内p标签属于特殊的文本标签，文本标签都是行内元素
默认样式：
文本大小为16px，根据文本大小调整上下外边距。
注意：
浏览器自动添加的段前段后添加空行。
html换行标签：
br：换行标签，空元素
<span>普通文本</span>
<br />
<br />
<span>普通文本</span>html图片插入标签
img： 从网页中插入图片。
html属性：
src：来源，图片的路径（可以使用网络图片，也可以是本地图片）
图片路径查找：
1.相对路径：相对于当前文件的路径
图片跟文件在同级：
直接写图片名；
./ 会关联出同级的所有文件。
图片跟文件是上级的兄弟
../ 会关联出上一级所有文件
2.绝对路径：
包括盘符的路径，叫做绝对路径。
可以直接在网络上复制图片地址。
alt：图片加载失败时的替换文本。
title：图片标题（鼠标移入图片显示标题内容）
<img src="图1.jpg" alt="" />
<img src="./图2.jpg" alt="" />
<img src="../图3.jpg" alt="" />
<img src="images/图4.jpg" alt="" />
<img src="https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF" alt=""/>
<img src="images/图1.jpg" alt="图片加载失败 title="图片名称"/>html超链接标签：
a：超链接标签。
作用：
实现页面的跳转，点击标签的内容，跳转到指定链接上
注意：
当a标签没有添加href属性时是链接占字符（标签内容为普通文本）
html属性：
href：超文本的指向，设置跳转的网页链接地址。
target：目标，设置网页的打开方式，默认在当前网页的链接打开，
_blank：作用，在新窗口打开
title：超链接标题
<a href="https://www.baidu.com/" target="_blank" title="链接标题">百度一下</a>HTML块：
div：标准的块标签。
块元素在没有设置宽高的情况下，宽带默认为父元素的100%，高度靠内容
撑开（如果没有内容，则高度为0）。
<div>你好！</div>HTML文本：
span：普通文本标签，文本默认为16px，靠文本大小撑开
<span>普通文本</span>五、HTML格式化标签
b:加粗文本，没有特殊意义。
strong：加粗文本，具有很强的强调意义，用于表示文本的重要性。
i：斜体文本,没有特殊意义
em：斜体文本，具有很强的强调意义，用于表示文本的重要性。
sup：定义上标。
sub：定义下标。
s：删除线文本，没有特殊意义。
del：删除线文本，具有很强的删除意义，用于表示被遗弃的内容。
u：下划线文本，没有特殊意义。
ins：添加，插入文本，具有很强的添加意义，用于表示新增的内容。
small：小号文本。
<b>加粗文本</b>
<strong>加粗文本</strong>
<br />
<i>斜体文本</i>
<em>斜体文本</em>
<br />
<p>这个是<sup>上标</sup>和<sub>下标</sub></p>
<br />
<s>删除线文本</s>
<del>删除线文本</del>
<br />
<u>下划线文本</u>
<ins>下划线文本</ins>
<br />
<small>小号文本</small>六、HTML语义化标签
HTML语义化标签：
根据内容的结构（内容语义化），选择合适的标签（代码语义化）
便于开发者阅读和方便写出更好的代码；
让浏览器的爬虫和机器很好的解析。
html语义化的好处：
1.为了在没有css的情况下，页面也能呈现出更好的内容结构，代码结构。
2.代码结构清晰，方便阅读，有利于团队开发
3.方便搜索引擎识别页面，有利于搜索引擎优化（SEO）。
4.方便其他页面解析（比如：屏幕浏览器，盲人阅读器，移动设备等），以语义化的方式渲染页面。
<nav>标记导航，仅对页面中重要的链接群使用。</nav>
<header>页眉，通过包括页面的logo，主导航，全站链接以及搜索框。</header>
<main>页面的主要内容，一个页面只能使用一次，如果是一个web应用，则包括其主要功能</main>
<section>定义文档的节点（section，区段），比如：章节。页眉或者文档中的其他部位</section>
<footer>页脚，只有当父元素为body时才是整个页面的页脚</footer>
<aside>定义所有内容之外的部分，如侧边栏，广告等</aside>七、HTML转义字符
在html中，如果需要显示 < 或者 > 等他输字符时，不要直接使用，否则会被误认为是一个标签，需要使用转义字符进行转义。
<； 表示 <
>； 表示 >
<p>在html中，使用<hr>表示水平分割线。</p>
<p>在html中，使用&表示和。</p>
<p>在html中使用 表示中文空格。</p>
<p>在html中使用 表示中文空格。</p>
<p>在html中使用©表示版权。</p>
<p>在html中使用®表示注册商标。</p>
<p>在html中使用¥表示人名币。</p>
<p>在html中使用°表示度。</p>
138
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
