HTML

HTML基础

作者：IT王小二
博客：https://itwxe.com

HTML是什么

HTML 是超文本标记语言 HyperText Markup Language 的简称，是一种用于创建网页的标准标记语言。可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。简单来说，HTML就是用来定义网页结构以及内容的。

HTML结构

一个标准的HTML文档通常包含以下几个部分：

<!DOCTYPE>声明：声明文档类型和版本。
<html>元素：HTML文档的根元素，包含了整个HTML文档的内容。
<head>部分：网页头部，包含了文档的元数据，用来存放给浏览器看的信息，如标题、字符编码、CSS等。
<body>部分：网页主体，用来存放给用户看的信息，例如图片、文字等。

一个简单的HTML文档结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>我的第一个HTML网页</title>
</head>
<body>
  <h1>欢迎来到我的博客！</h1>
  <p>这是我的第一个HTML网页，我很兴奋能够与大家分享我的学习经验。</p>
</body>
</html>

HTML注释

注释是对代码的解释和说明，能够提高程序的可读性，方便理解，注释不会再浏览器界面中显示，可在 F12 中查看到。

<!-- 我是一个 HTML 注释 -->

字符实体

在 HTML 中，空格、大于、小于等字符不能正常按代码展示时，需要使用字符实体。

描述	界面显示结果	实体名称
空格		` `
大于	`>`	`<`
小于	`<`	`>`

标题标签

HTML提供了六个级别的标题标签，分别是 <h1> 到 <h6>，用于定义不同级别的标题，如新闻标题、文章标题、网页区域名称、产品名称等。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

特点：

文字加粗，突出标题重要性。
字号逐渐减小，反映标题层级关系。
独占一行，与其他内容分隔明确。

经验建议：

合理使用<h1>标签：<h1>标签在一个网页中应该仅使用一次，通常用来放置最重要的标题，如新闻标题或网页的 LOGO。
充分利用<h2>到<h6>标签：这些标签没有使用次数的限制，可以根据文档的结构和内容需要自由使用，但应保持逻辑清晰，符合内容层次结构。

标题标签的适当使用不仅提升了网页的可读性和搜索引擎优化，也使得文档结构更加清晰易懂。因此，在设计网页结构时，务必合理选择和使用标题标签。

段落标签

一般用在新闻段落、文章段落、产品描述信息等等。

<p>段落</p>

特点：

独占一行。
段落之间存在间隙。

换行和水平线标签

换行：<br>

水平线：<hr>

文本格式化标签

为文本添加特殊格式，以突出重点，常见的文本格式：加粗、倾斜、下划线、删除线。

标签	标签	效果
`<strong>加粗</strong>`	`<b>加粗</b>`	加粗
`<em>倾斜</em>`	`<i>倾斜</i>`	倾斜
`<ins>下划线</ins>`	`<u>下划线</u>`	下划线
`<del>删除线</del>`	`<s>删除线</s>`	~~删除线~~

strong、em、ins、del 标签自带强调含义。

图片标签

图片标签用于向网页中插入图片。

<img src="图片的url" alt="图片找不到时候的替换文字" title="鼠标悬停在图片上面时候显示的文字" width="图片的宽度，值为数字没有单位" height="图片的高度，值为数字没有单位">

src alt title width height 称为图片标签的属性，语法为属性名="属性值"，属性写在尖括号的标签后面，标签名和属性之间、属性与属性之间用空格隔开，不区分先后顺序。

相对路径和绝对路径

路径指的是查找文件时，从起点到终点经历的路线。

路径分类：

相对路径：从当前文件位置出发查找目标文件。
绝对路径：从盘符出发查找目标文件。

相对路径

从当前文件位置出发查找目标文件的路径。

/ 表示某个文件夹。
. 表示当前文件所在的文件夹。
.. 表示当前文件的上一级文件夹。

绝对路径

从电脑根目录查找目标文件的路径，例如<img src="/itwxe/product/web.png">。

需要注意的是 Windows 默认的路径是 \，其他系统是 /，建议统一写成 /。

超链接标签

超链接的作用是用于页面跳转。

<a href="https://itwxe.com">跳转到IT王小二</a>

<!-- 新窗口打开 -->
<a href="https://itwxe.com" target="_blank">新窗口跳转到IT王小二</a>

<!-- 跳转到本地文件，相对路径查找 -->
<a href="./超链接跳转.html" target="_blank">超链接跳转本地页面</a>

<!-- 空链接 -->
<a href="#">空链接</a>

href 属性值时跳转的地址，target="_blank" 代表的是在新窗口跳转页面。

开发初期 href 的属性值可写为 #，表示空链接，页面不会跳转，仅在当前页面刷新一次。

音频标签

音频标签用于往网页中插入音频。

<audio src="音频的URL" controls loop autoplay></audio>

属性	作用	说明
src	音频URL	支持 mp3, ogg, wav 格式
controls	显示音频控制面板
loop	循环播放
autoplay	自动播放	此属性通常不使用，通常会禁用自动播放功能

如果属性名和属性值相同，可以简写为一个单词，例如上述的 controls 是 controls="controls" 的缩写。

视频标签

音频标签用于往网页中插入视频。

<video src="视频的URL" controls loop autoplay muted></video>

属性	作用	说明
src	音频URL	支持 mp3, ogg, wav 格式
controls	显示音频控制面板
loop	循环播放
autoplay	自动播放	此属性通常不使用，通常会禁用自动播放功能
muted	静音播放

列表标签

列表用于布局内容排列整齐的区域，分为无序列表、有序列表、定义列表。

无序列表

布局排列整齐的不需要规定顺序的区域。

<ul>
  <li>第1项</li>
  <li>第2项</li>
  <li>第3项</li>
</ul>

ul 标签里面只能包裹 li 标签。
li 标签里面可以包裹任何内容。

有序列表

布局排列整齐的需要规定顺序的区域。

<ol>
  <li>第1项</li>
  <li>第2项</li>
  <li>第3项</li>
</ol>

ol 标签里面只能包裹 li 标签。
li 标签里面可以包裹任何内容。

定义列表

定义列表包含标题和列表内容。

<dl>
  <dt>列表标题</dt>
  <dd>列表描述/详情</dd>
  <dd>列表描述/详情</dd>
  <dd>列表描述/详情</dd>
</dl>

dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述/详情。
dl 里面只能包含 dt 和 dd 。
dt 和 dd 里面可以包含任何内容。

表格标签

基本使用

表格与 office 中的 Excel 类似，用于展示网页表格数据。

<table border="1">
  <thead>
  <tr>
    <th>姓名</th>
    <th>数学</th>
    <th>语文</th>
    <th>英语</th>
    <th>总分</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>张三</td>
    <td>100</td>
    <td>90</td>
    <td>100</td>
    <td>290</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>90</td>
    <td>100</td>
    <td>90</td>
    <td>290</td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
    <td>学科最高分</td>
    <td>100</td>
    <td>100</td>
    <td>100</td>
    <td>290</td>
  </tr>
  </tfoot>
</table>

表格默认没有边框线，border 属性可以为表格添加边框线。

标签	说明
`<table></table>`	表格声明
`<thead></thead>`	表格头部内容，结构标签，可省略
`<tbody></tbody>`	表格主题内容，结构标签，可省略
`<tfoot></tfoot>`	表格底部内容，结构标签，可省略
`<tr></tr>`	表格行
`<th></th>`	表头
`<td></td>`	表格内容单元格

合并单元格

跨行合并：rowspan

<table border="1">
  <thead>
  <tr>
    <th>姓名</th>
    <th>数学</th>
    <th>语文</th>
    <th>英语</th>
    <th>总分</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>张三</td>
    <td>100</td>
    <td>90</td>
    <td>100</td>
    <td rowspan="2">290</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>90</td>
    <td>100</td>
    <td>90</td>
<!--    <td>290</td>-->
  </tr>
  </tbody>
  <tfoot>
  <tr>
    <td>学科最高分</td>
    <td>100</td>
    <td>100</td>
    <td>100</td>
    <td>290</td>
  </tr>
  </tfoot>
</table>

跨列合并：colspan

<table border="1">
  <thead>
  <tr>
    <th>姓名</th>
    <th>数学</th>
    <th>语文</th>
    <th>英语</th>
    <th>总分</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>张三</td>
    <td>100</td>
    <td>90</td>
    <td>100</td>
    <td rowspan="2">290</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>90</td>
    <td>100</td>
    <td>90</td>
<!--    <td>290</td>-->
  </tr>
  </tbody>
  <tfoot>
  <tr>
    <td>学科最高分</td>
    <td colspan="3">100</td>
<!--    <td>100</td>-->
<!--    <td>100</td>-->
    <td>290</td>
  </tr>
  </tfoot>
</table>

需要注意的是不能跨表格结构标签(thead、tbody、tfoot)合并单元格。

表单标签

表单标签用于收集用户输入信息。

`input`标签

标签名为 input ，type 属性不一样则功能不一样。

<input type="..." placeholder="提示信息">

text 文本输入框，用于输入单行文本。
password 密码框。
radio 单选框。
checkbox 多选框。
file 上传文件。

账户名：<input type="text" placeholder="请输如你的账号名"><br>
密码：<input type="password" placeholder="请输如你的密码"><br>

<!-- name自定义名称，名称一样的为同一组；checked表示默认选中-->
性别：
<input type="radio" name="sex" checked> 男
<input type="radio" name="sex"> 女
<input type="radio" name="sex"> 保密
<br>

爱好：
<input type="checkbox" checked> 敲后台代码
<input type="checkbox"> 敲前端代码
<input type="checkbox"> 敲爬虫代码
<br>

上传头像：<input type="file">

下拉菜单

用于下拉选择信息，selected 代表默认选中

出生城市：
<select>
  <option selected>北京</option>
  <option>上海</option>
  <option>广州</option>
  <option>深圳</option>
</select>

文本域

用于输入多行文本的表单控件。

个人简介：
<textarea>输入你的个人简介，不低于10个字(默认提示文字)</textarea>

`label`标签

某个标签的说明文本，用于增大表单控件的点击范围，支持 label 标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等。

<!-- 写法一 -->
<input type="radio" name="sex" id="man">
<label for="man">男</label>
<!-- 写法二 -->
<label><input type="radio" name="sex"> 女</label>

按钮

button 和 form 表单配合提交数据。

<form action="htpps://itwxe.com">
  账户名：<input type="text" placeholder="请输如你的账号名"><br>
  密码：<input type="password" placeholder="请输如你的密码"><br>

  <!-- name自定义名称，名称一样的为同一组；checked表示默认选中-->
  性别：
  <!-- 写法一 -->
  <input type="radio" name="sex" id="man">
  <label for="man">男</label>
  <!-- 写法二 -->
  <label><input type="radio" name="sex"> 女</label>
  <label><input type="radio" name="sex"> 保密</label>
  <br>

  爱好：
  <input type="checkbox" checked> 敲后台代码
  <input type="checkbox"> 敲前端代码
  <input type="checkbox"> 敲爬虫代码
  <br>

  上传头像：<input type="file">
  <br>

  出生城市：
  <select>
    <option selected>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option>深圳</option>
  </select>
  <br>

  个人简介：
  <textarea>输入你的个人简介，不低于10个字(默认提示文字)</textarea>
  <br>

  <!-- 如果type不写，默认是submit -->
  <button type="submit">提交</button>
  <button type="reset">重置</button>
  <button type="button">普通按钮</button>
</form>

语义化

有语义的布局标签：用于布局网页，划分网页区域。

div：独占一行
span：不换行

<div>
  div标签独占一行
</div>
<span>
  span标签不换行
</span>

有语义的布局标签：

header 网页头部
nav 网页导航
footer 网页底部
aside 网页侧边栏
section 网页区块
article 网页文章