这篇博客主要介绍了HTML的基础知识，包括web的概述，HTML的概念、结构和常用标签，详细讲解了HTML在网页中的作用，以及标签的类型和关系。还涵盖了HTML中的注释、标题、段落、换行、超链接、图像、多媒体、列表和表格等内容。
前言
为了巩固复习整理笔记,欢迎指正!
一、web的概述
1. Internet互联网
Internet互联网是一种系统架构，通过允许世界各地的各种计算机网络互连。Internet服务指的是为用户提供的互联网服务，包括www。
2. web 万维网
“万维网”（World Wide Web）www，也就是我们现在所熟知的Web。万维网链接的方法能非常方便地从互联网上的⼀个站点访问另⼀个站点，从而主动地按需获取信息。万维网中每个站点都存放了许多⽂档（⽂件、多媒体⽂件、图片等），供互联网上的主机查阅。
3. HTML、JS、CSS三者的关系
网页前台分三个层次：内容层，样式层，行为层。
- 内容层用HTML表现
- 样式层用CSS规定
- 行为层用脚本JavaScipt控制
4. 客户端和服务器端
4.1 客户端（浏览器）
在web中是以request对象存在的，发送请求给服务器端处理。
主流浏览器有：
- Chrome
- Firefox
- IE
- Opera
- Safari
4.2 服务器端
客户端发送的请求交给服务器端处理，是以response对象存在的，服务器端处理完毕后反馈给客户端。
二、HTML概述
1. HTML概念
1.1 HTML含义
HTML的英文全称是Hyper Text Markup Language，超文本标记语言。
1.2 HTML和网页
HTML的标签和纯文本按规则的组成为一个“网页”。
1.3 HTML基本结构标签
<!DOCTYPE html>文档类型说明 不是html语言标签，指定了web浏览器关于页面使用哪个html版本进行编写指令，html是html5的版本。<html></html>网页的根标签<head></head>头部标签 配置网页的相关信息<meta charset="utf-8">字符编码设置<title></title>文档标题 显示在浏览器标签栏中<body></body>主体标签 包含所有其他网页中显示的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
1.4 标签的类型
1.4.1 双标签
例如：<html></html>，成对出现，可以包裹其他标签和文本
1.4.2 单标签（自结束标签）
例如：<meta/>，单独出现，不能包裹其他标签和文本，依靠属性使用
1.5 标签的关系
1.5.1 并列关系
是同级的兄弟关系，例如<head></head>与<body></body>
1.5.2 嵌套关系
是包含祖先和后代之间的关系，例如<head><meta></head>
标签嵌套规则：
- 块元素可以包含内联原神或某些块元素，但内联元素却不能包含块元素，它只能包含其他的内联元素
- 块级元素不能放在
<p>里面，<p>标签是段落标签。 - 有几个特殊的块级元素，它们的内部只能包含内联元素，不能再包含块级元素
<h1>~<h6>（标题）、<p>（段落）、<dt>（列表标题） - 空行和空格在页面上都代表一个空格的大小
- 标签缩进可以让结构更加清晰，也是书写规范。
三、常用标签
1. 注释标签
<!--可以用于隐藏代码，提示，划分区域-->
2. 标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
- 用于书写标题，双标签，可以包裹文本
- 属于块级元素，在浏览器中独占一行
- 数字越小级别越大
- 浏览器自行渲染时标题标签和其他标签保持一定的上下距离，并有自定义的加粗效果
3. 段落标签
<p>这是一句话</p>
- 用于书写段落或大片文字，双标签，可以包裹文本
- 属于块级元素，在浏览器中独占一行
- 数字越小级别越大
- 浏览器自行渲染时p标签和其他标签保持一定的上下距离
4. 换行标签
<p>
床前明月光，<br>
疑是地上霜。
</p>
<br>标签用于换行，单标签- 块级元素自占一行
- 在html5标准中可以省略/
5. 分隔符
<hr>是一条水平线，单标签- 块级元素自占一行
6. 格式化文本标记
<b>定义粗体</b>
<i>定义斜体</i>
<u>定义下划线</u>
<del>定义删除线</del>
<sup>定义上标</sup>
<sub>定义下标</sub>
<strong>定义着重文字，粗体</strong>
<em>定义加重语气，斜体</em>
<mark>高亮显示文本</mark>
- 具有一定格式的文本标记，专门用于修饰文字
- 均为双标签，内联元素，不自占一行
7. 按钮标签
<button>按钮</button>
- 双标签，内联元素，不自占一行，可以设置宽高
8. 分区元素
8.1 div标签
<div>可以直接写一段文字</div>
<div>
<h1>这是一个标题</h1>
<p>这是一个段落</p>
</div>
- 双标签，可以包裹任何标签和文本，经常作为容器和分区域的包裹标签使用，在布局中应用广泛
- 块级元素，自身没有任何样式
8.2 span标签
<span>123</span>
<p>html的重要性 评论人数：<span style="color:red;">10</span></p>
- 双标签，常常、作为容器使用，用于包裹特殊的文字和图标
- 内联元素，自身没有任何样式
9. 超链接
<a href=""></a>
<a></a>标签,定义超链接,用于从一个页面连接到另一个页面- 双标签,内联元素,不自占一行
- 最重要的属性时href属性是必填属性,它指示连接的目标。href属性可以填写多种路径和其他目标方式。
9.1 href属性
- href表示超文本引用，用来建立当前元素和文档之间的链接。
- 绝对URL路径，指向一个站点，如
href="https://www.baidu.com"，点击时会直接跳转到这个链接的页面。 - 相对URL路径，指向站点内的某个文件，如
href="./2.html"，当浏览器可以识别并打开该文件时，则会直接打开窗口展现（图片文件、html文件、视频音频文件、txt文件等）。 - 当href属性的路径浏览器不能识别并显现时，那么点击时就会下载该文件（zip、exe、dmg等文件）
- 锚URL，此时指向页面中的锚，如
href="#top"，点击时就会到当前页面中id="top"的这个锚点，实现当前页面的跳转。
9.2 空连接
a标签存在默认事件，点击时会发生跳转，如果不需要它发生跳转，可以采用以下方法：
<a href="#"></a>点击后网页返回到页面的最顶端<a href="javascript:void(0);"></a>void是一个操作符，void(0)返回undefined，网页不发生跳转<a href="javascript:;"></a>执行了一条空的js命令。
9.3 target属性
target属性规定在何处打开链接文档。常用的有_blank和_parent
<!-- _blank新窗口打开 -->
<a href="https://www.baidu.com" target="_blank">百度⾸⻚blank</a>
<!-- _parent当前窗⼝打开 -->
<a href="http://www.baidu.com" target="_parent">百度⾸⻚parent</a>
10. 图像
<img src="">单标签，特殊的内联元素（可以设置宽高），内联块，不自占一行- img标签有两个默认属性：src和alt。src是必要属性代表图片路径，alt代表图片描述可以省略。
- 常见的图片后缀名有：.png、.jpg、.jpeg 、.gif
11. 多媒体
<video src="视频路径"></video>
<audio src="音频路径"></audio>
- 均为双标签，块级元素自占一行
- controls属性提供播放、暂停和音量的控件
- loop属性提供循环播放
- width属性可以直接控制多媒体文件的宽度
12. 列表标签
12.1 有序列表
<ol>
<li></li>
<li></li>
</ol>
<ol></ol>有序列表标签，第一层只能嵌套<li></li>，单独存在没有意义- 列表项前默认有数字顺序，type类型有1、A、a、i、I
12.2 无序列表
<ul>
<li></li>
<li></li>
</ul>
<ul></ul>无序列表标签，第一层只能嵌套<li></li>，单独存在没有意义- 列表项前默认有实心圆点，type类型有：disc（默认的）、square（空心圆点）、circle（小正方形）
12.3 自定义列表
<dl>
<dt>国内电影</dt>
<dd>流浪地球</dd>
<dd>来电狂想</dd>
<dd>疯狂外星⼈</dd>
<dt>国外电影</dt>
<dd>阿丽塔</dd>
<dd>惊奇队⻓</dd>
<dd>美国队⻓</dd>
</dl>
<dl></dl>自定义列表不仅仅是一列项目，还是项目及其注释的组合。双标签，块级元素<dt></dt>包裹列表标题，<dd></dd>包裹文本和元素。
12.4 嵌套列表
当需要多级目录或多级列表时，可采取列表嵌套的方法。
<ol>
<li>女装
<ul>
<li>流行趋势
<ol type="i">
<li>小黑裙</li>
<li>芭比裤</li>
<li>森系连衣裙</li>
</ol>
</li>
<li>女裙</li>
<li>上装</li>
<li>女裤</li>
</ul>
</li>
<li>母婴</li>
<li>数码</li>
<li>厨具</li>
</ol>
13. 表格
<table></table>表格标签，双标签，块级元素<caption></caption>标题标签，块级元素，可以省略不写，如书写一定在<table></table>标签内嵌套的第一行。<thead></thead>表头标签，可不写<tbody><tbody>表体表签，可不写<tfoot></tfoot>表尾标签，可不写。tfoot标签出现在caption和thead元素之后，tbody和tr元素之前<tr></tr>行标签，只包裹列标签和加粗列标签。<th></th>加粗列标签，一般放在表头，当做列标题使用<td></td>表格单元列标签
<table border="1px">
<caption>月收入表</caption>
<thead>
<tr>
<th>月</th>
<th>收入</th>
</tr>
</thead>
<tfoot>
<tr>
<td>总和</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>一月</td>
<td>$100</td>
</tr>
<tr>
<td>二月</td>
<td>$80</td>
</tr>
</tbody>
</table>
| 属性 | 属性值 | 说明 |
|---|---|---|
| border | 像素 | 表格边框宽度 |
| height | 像素、百分比 | 表格整体高度 |
| width | 像素、百分比 | 表格整体宽度 |
| border-collapse | collapse | 除去缝隙，需要写在style样式中 style="border-collapse:collapse;" |
| cellpadding | 像素、百分比 | 边框与单元格的距离 |
| cellspacing | 像素、百分比 | 单元格边框宽度 |
| align | left、center、right | 对齐方式 |
| bgcolor | 英文、16进制、rgba | 表格的背景图片 |
| background | url | 表格的背景图片 |
| 属性 | 属性值 | 说明 |
|---|---|---|
| width | 像素、百分比 | 设置单元格的宽 |
| height | 像素、百分比 | 设置单元格的高 |
| align | left、center、right | 水平移动 |
| 属性 | 属性值 | 说明 |
|---|---|---|
| colspan | 数字（占据的列数） | 合并列（左右相邻合并） |
| rowspan | 数字（占据的行数） | 合并行（上下相邻合并） |
900
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
