1 Html5语义标签

1 html初始文档

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>Title</title>  
</head>  
<body>  

</body>  
</html>
  • 文档类型 <!DOCTYPE html>
    HTML5 的文档类型声明，它告诉浏览器当前页面是使用 HTML5 规范编写的
  • html元素 <html lang="en"> </html>
    这个元素包裹了页面中所有的内容,有时被称为根元素在HTML中，lang 用于声明网页的主要语言，帮助浏览器、搜索引擎等正确处理页面内容。
    en代表英语，这意味着该页面的主要语言是英语
    zh-CN代表是中文。
    Pasted image 20250918203611.png
  • head元素 <head> </head>
    头部元素。包含了文档的元（meta）数据。
    主要保存供机器处理的信息，而非人类可读信息。
  • 字符集 <meta charset="UTF-8">
    该文档的字符集设置为 UTF-8
    UTF-8 包括绝大多数人类书面语言的大多数字符。
    有了这个设置，页面现在可以处理它可能包含的任何文本内容，如果
    不加这句话可能会引起乱码。
  • 移动端页面适配 <meta name="viewport" content="width=device-width, initial-scale=1.0">
    开发者能确保网页在移动设备上以最佳状态呈现，提升用户浏览体验。
  • title元素 <title>Title</title>
    这设置了页面的标题，也就是出现在该页面加载的浏览器标签中的内容
  • body元素 <body> </body>
    包含了页面所有显示在页面上的内容，包含文本、图片、视频、游戏、可播放音频轨道等等

2 标签

2.1 标签关系

  • 并列关系：<head> 和 <body>
  • 嵌套关系：<head> 和 <title>

2.2 标签分类

块级元素

  • 块级元素独占一行
  • 它可以嵌套其他所有元素
  • 常见的比如p、h、div等

内联元素

  • 可以一行放多个，通常与文本一起使用

  • 不能嵌套块级元素，可以嵌套其他内联元素。

  • 常见比如 strong、em、a等

  • 但是元素分类不是一直不可更改的，css可以通过display改变他们显示模式。

2.3 基本标签

  • 语义化：指根据内容的结构和含义选择恰当的HTML元素
2.3.1 标题与段落标签
标题标签 h
<h1>震惊，pink老师竟然...</h1>  
<h2>惊叹，pink老师如此...</h2>  
<h3>标题3</h3>  
<h4>标题4</h4>  
<h5>标题5</h5>  
<h6>标题6</h6>
  • h1 - h6
  • 标题文字会加粗显示，并且每行只显示一个
  • h1 唯一性：最好只对每个页面使用一次 <h1>
  • 在现有的六个标题层次中，除非觉得有必要否则应该争取每页使用不超过三个
段落标签 p
<p>  
  段落文本段落文本段落文本段落文本段落文本段落文本段落
</p>
  • 每行只显示一个，文字显示不开会自动换行
  • 段落的相关样式请用CSS设置。
2.3.2 强调与重要性标签
  • 加粗 <strong></strong> <b></b>
  • 倾斜 <em></em> <i></i>
  • 下划线 <ins></ins> <u></u>
  • 删除线 <del></del> <s></s>
2.3.3 注释标签
<!-- 注释内容 -->
2.3.4 图片标签
<img src="1.png" alt="猪爸爸" width="300" title="猪爸爸">
<img src="2.webp" alt="">  
<img src="3.avif" alt="">  
<img src="4.gif" alt="">  
<img src="5.png" alt="">
  • 是单标签（空元素）：默认包含两个属性：src 和 alt
  • 属性：
    1. 属性采取键值对形式。 属性="值"
    2. 属性之间没有必要的先后顺序
    3. 但是属性之间必须有空格分隔
属性 作用
src 指向要插入到页面的图像地址
alt 备选文本，用于在图片无法显示或者因为网速慢情况下显示的文字
width 图像标题。鼠标悬停显示的文本
height 设置图片宽度（建议css修改，宽度高度修改一个即可等比例修改）
title 设置图片高度（建议css修改）
  • 图片类型选择
    • 网页优化：优先WebP/AVIF，备选JPEG/PNG（兼容更多浏览器）。
    • 透明图像：PNG（静态）或WebP（动态）。
    • 动画：WebP/GIF（简单动画）。
    • 其他格式：图片还有其他格式，比如svg、HEIC等
    • 开发中设计师提供图片，我们直接使用即可。
2.3.5 视频标签
<video src="./media/yu7.mp4" width="400" controls autoplay muted loop poster="./media/yu7.jpg"></video>
属性
属性 作用
src 指向要插入到页面的图像地址
controls 显示浏览器自带播放控件
width height 设置视频的宽度和高度
autoplay 自动播放
loop 循环播放
muted 静音
poster 预览图像（视频封面）
  • 如果属性的键和值是相同的，则可以省略值，故以下两种都可以
<video src="./media/yu7.mp4" width="400" controls="controls"></video>
<video src="./media/yu7.mp4" width="400" controls></video>
视频标签兼容性写法
浏览器 MP4 WebM Ogg
Internet Explorer YES
 NO
 NO
Chrome
 YES
 YES
 YES
Firefox
 YES
 YES
 YES
Safari
 YES
 NO
 NO
Opera
 YES (从 Opera 25 起)
 YES
 YES
 
<video width="400" controls muted loop poster="poster.jpg">
	<source src="video.mp4"type="video/mp4">
	<source src="video.0gg"type="video/ogg">
	<source src="video.webm"type="video/webm">
	<p>您的浏览器不支持HTML 5 Video标签，请升级浏览器。</p></video>
  1. 将 src 属性放在几个单独的 <source> 元素当中，这些元素分别指向各自的资源。
  2. 浏览器会检查 <source> 元素，并且播放第一个与其自身相匹配的媒体。
  3. 每个 <source> 元素都含有 type 属性，浏览器也会通过检查这个属性来迅速的跳过那些不支持的格式。如果你没有添加 type 属性，浏览器会尝试加载每一个文件，直到找到一个能正确播放的格式，但是这样会消耗掉大量的时间和资源。
2.3.6 音频标签
<audio src="./media/ldh.mp3" controls autoplay></audio>
音频标签兼容性写法
浏览器 MP3
 Wav
 Ogg
Internet Explorer 9+
 YES
 NO
 NO
Chrome 6+
 YES
 YES
 YES
Firefox 3.6+
 YES
 YES
 YES
Safari 5+
 YES
 YES
 NO
Opera 10+
 YES
 YES
 YES
 
<audio autoplay>
	<source src="audio.mp3"type="audio/mp3">
	<p>您的浏览器不支持HTML 5 Audio标签，请升级浏览器。</p></audio>
2.3.7 超链接
<!-- 1. 内部链接 -->  
<a href="./11-音视频标签.html">音视频</a>  
<!-- 2. 外部链接 -->  
<a href="https://www.deepseek.com/" title="deepseek" target="_blank">deepseek</a>  
<!-- 3. 空连接 -->  
<a href="#">产品介绍</a>  
<!-- 4. 下载链接 -->  
<a href="./download.zip">下载软件</a>  
<!-- 5. 邮件链接 -->  
<a href="mailto:123@qq.com">联系我们</a>
属性
属性 作用
href 也称为超文本引用或目标，包含一个网址，来创建一个基本链接。
title 鼠标悬停的提示文字
target 打开页面的方式：
_self 当前窗口打开(默认)
_blank 新窗口打开
锚点链接
  • 锚点链接允许用户在同一个页面内跳转到指定位置。
  • 非常适合长页面导航
  1. 定义锚点目标
    使用 id 属性创建锚点目标，比如：
    <h2 id="1">第一部分</h2>
  2. 创建跳转链接
    使用 # 标记锚点目标，比如：
    <a href="#1">跳转到第一部分</a>
页面滑动效果
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>锚点链接</title>  
  <!-- 这里复制代码  让页面实现滑动效果 -->  
  <style>  
    html {  
      scroll-behavior: smooth;  
    }  
  </style>  
</head>
2.3.8 其他标签
  • 分割线 <hr>
  • 换行 <br>

2.4 布局标签

2.4.1 网站结构标签

<header>网页头部标签</header>  
<nav>导航栏标签</nav>  
<main>  
  <aside>侧边栏标签</aside>  
  <article>主要内容区域标签</article>  
</main>  
<footer>页面底部标签</footer>  
<section>区块标签</section>

这些标签受浏览器兼容性问题影响，PC端根据公司需求，移动端放心使用

标签
 作用
<header>
 网页页眉(头部）
<main> 网页内容。每个页面只能有一个
<nav> 导航栏
<article> 文章相关
<section> 分块
<aside> 侧边栏
<footer> 页面页脚(底部）

Pasted image 20250919151819.png

2.4.2 无语义标签

  • div标签
    1. 块级元素：默认独占一行，前后会自动换行。
    2. 通常用于布局结构，作为其他元素的容器。
    3. 可以包含其他块级或行内元素。
    4. 默认没有语义。
  • span标签
    1. 行内元素：不会换行，仅包裹内容的一部分。
    2. 用于对文本或行内元素的局部样式或操作。
    3. 默认没有语义。

2.4.3 列表标签

无序列表 ul：顺序无关紧要的列表
<ul>  
  <li>佩奇</li>  
  <li>猪爸爸</li>  
  <li>猪妈妈</li>  
  <li>乔治</li>  
</ul>
  • <ul>
    • 定义列表的容器
    • 只能包含 <li> 元素
  • <li>
    • 定义列表的选项
    • 里面可以放其他html元素
有序列表 ol：顺序有关紧要的列表
<ol>  
  <li>看视频</li>  
  <li>写代码</li>  
  <li>做笔记</li>  
  <li>多复习</li>  
</ol>
  • 有序列表在我们布局中较少。了解即可，实际开发即使有顺序，我们一般也是用其他替代。
  • <ol>
    • 定义列表的容器
    • 只能包含 <li> 元素
  • <li>
    • 定义列表的选项
    • 里面可以放其他html元素
描述列表 dl：标记一组项目及相关描述
<dl>  
  <dt>家电</dt>  
  <dd>电视</dd>  
  <dd>洗衣机</dd>  
  <dd>冰箱</dd>  
</dl>
  • 描述列表在我们布局中主要是在页面底部。比如：
    Pasted image 20250919201153.png
  • <dl>
    • 定义列表的容器
    • 只能包含 <dt> 和 <dd> 元素
  • <dt>
    • 定义被描述的术语
    • 通常显示为左对齐或加粗
    • 一个 <dt> 可以对应多个 <dd>
  • <dd>
    • 包含术语的定义或描述
    • 通常显示为缩进形式
    • 可以包含段落、图片、链接等其他

2.5 表格标签

  • 表格作用： 以结构化方式展示行列数据，使信息清晰、易读且便于对比。
  • 网页场景： 主要用于数据展示或者后台管理系统的信息展示。

2.5.1 标签

<!-- border后期使用css来写，这里只是看效果 -->
<!-- th 表头单元格，可以让里面的文字加粗、水平和垂直居中显示，一般用于第一行或者第一列-->  
<table border="1">  
  <tr>  
    <th>姓名</th>  
    <th>年龄</th>  
    <th>成绩</th>  
  </tr>  
  <tr>    
	<td>张三</td>  
    <td>18</td>  
    <td>100</td>  
  </tr>  
  <tr>    
	<td>李四</td>  
    <td>20</td>  
    <td>90</td>  
  </tr>  
</table>
  • <table>：表格容器标签
  • <tr>：行标签
  • <td>：单元格标签
  • <th>：表头单元格
    Pasted image 20250919203638.png

2.5.2 表格结构标签：增强表格语义，让表格结构更加清晰

<table border="1">  
  <thead>  
    <tr>  
      <th>姓名</th>  
      <th>年龄</th>  
      <th>成绩</th>  
    </tr>  
  </thead>  
  <tbody>    
	<tr>  
      <td>张三</td>  
      <td>18</td>  
      <td>100</td>  
    </tr>  
    <tr> 
	  <td>李四</td>  
      <td>20</td>  
      <td>90</td>  
    </tr>  
    <tr>      
	  <td>王五</td>  
      <td>22</td>  
      <td>80</td>  
    </tr>  
  </tbody>  
</table>
  • <thead>：定义表格的头部区域
  • <tbody>：定义表格的主体内容
  • <tfoot>：定义表格的底部区域

2.5.3 合并单元格

<table border="1">  
  <tr>  
    <th>姓名</th>  
    <th>年龄</th>  
    <th>性别</th>  
    <th>爱好</th>  
    <th>居住地</th>  
  </tr>  
  <tr>
    <td>李四</td>  
    <td>20</td>  
    <td>女</td>  
    <td>篮球</td>  
    <td rowspan="2">深圳</td>  
  </tr>  
  <tr>    
	<td>王五</td>  
    <td>22</td>  
    <td>男</td>  
    <td>篮球</td>  
  </tr>  
  <tr>    
	<td>日期</td>  
    <td colspan="4"></td>  
  </tr>  
</table>
  • 表格开发中很少使用合并，因为会导致表格难以维护，且可能影响响应式适配（尤其在移动端）。如果特殊情况，可以借助于AI。
  • 原理：
    1. 确定是跨行(rowspan)还是跨列合并(colspan)
    2. 找到目标单元格（左上原则），写合并数量
    3. 删除多余单元格

2.6 表单

  • 表单：是用于收集用户输入数据，并将数据提交到后端进行处理。
  • 场景
    • 用户登录/注册
    • 搜索框
    • 问卷调查
    • 订单支付
    • 文件上传
  • 组成
    • 表单容器 <form>
    • 表单控件 <input>, <textarea>, <select>, <button>
    • 辅助标签 <label>

2.6.1 表单容器 <form>

<form action=""></form>
  • 定义表单的容器，包裹所有表单控件。
  • action属性：定义了在提交表单时，应该把所收集的数据送给谁（URL）去处理。

2.6.2 表单控件 <input>, <textarea>, <select>, <button>

1 input
  • 通用输入控件
  • type 定义了输入框的类型
type属性值 说明
text 单行文本框
password 密码框
radio 单选框
checkbox 复选框
file 文件域
1）单行文本框和密码框（text/password）
<ul>  
  <li>  
    <label>  
      账号： <input type="text" placeholder="请输入账号" name="username" accesskey="s" autocomplete="off"> 
    </label>  
  </li>  
  <li>    
    密码： <input type="password" placeholder="请输入密码" name="pwd" maxlength="6">  
  </li>
</ul>
其他属性 说明
placeholder 提示信息
name 元素的名称
maxlength 允许的最大字符数
accesskey 使元素获得焦点的快捷键（windos下面 Alt+设置的键可以快速跳过去，mac下是Control+Option+设置的键）
autocomplete 用于控制表单的自动填充行为，帮助浏览器决定是否根据用户历史输入自动填充字段值
取值 on / off
2）单选框和复选框（radio/checkbox）
<li>  
  性别：  
  <input type="radio" name="gender" value="0" checked>  
  <input type="radio" name="gender" value="1">  
</li>
<li>  
  爱好：  
  <input type="checkbox" name="hobby" value="0" checked> 足球  
  <input type="checkbox" name="hobby" value="1"> 篮球  
  <input type="checkbox" name="hobby" value="2"> 双色球  
</li>
其他属性 说明
value 表单值
name 元素的名称，还能实现分组效果
checked 是否默认选中
3）文件域（file）
<li>  
  头像：  
  <input type="file" name="file" multiple accept=".exe,.jpg">  
</li>
其他属性 说明
multiple 允许选择多个文件
accept 规定选择的文件类型，多个类型中间用逗号分隔
2 textarea
<textarea name="msg" cols="30" rows="10" placeholder="请输入留言"></textarea>
  • <textarea> 元素是一个多行纯文本编辑控件，适用于允许用户输入大量自由格式文本的场景，例如评论或反馈表单。
  • textarea 多行文本框也称为文本域
属性
常见属性
 说明
name
 表单名称
placeholder
 提示信息
rows
 文本行数，正整数，默认为2
cols
 文本列数，正整数，默认20
3 select
<select name="city" id="">  
  <option value="北京">北京</option>  
  <option value="上海" selected>上海</option>  
  <option value="广州">广州</option>  
</select>
  • <select> 元素表示一个提供选项菜单的控件
  • <select> 元素是容器， <option> 是每一个选项标签，每个选项要跟一个值
  • 要想默认选中一个选项，可以添加 selected 属性。
  • 因为select很难修改为好看的效果，大部分下拉列表可以通过其他标签模拟实现
4 button
<button disabled>注册</button>
  • <button> 标签定义一个按钮。元素内部可以放置内容，比如文本或图像
  • disabled 属性可以禁用按钮，无法点击

2.6.3 辅助标签 <lable>

  • <label> 表示用户界面中某个元素的说明。提升可访问性（点击标签可聚焦输入框）
  • 2种使用方式
    1. 利用 for 和 id 相关联
    2. 直接包含
// 1
<label for="nan"> 男 </label>
<input type="radio" id="nan" name="sex">

// 2
<label> 男
	<input type="radio" name="sex">
</label>

2.7 字符实体

  • 字符实体是一段以连字号（&）开头、以分号（;）结尾的文本（字符串）。
  • 常用于显示保留字符和不可见的字符（如“不换行空格”）
    Pasted image 20250920173220.png
Built with MDFriday ❤️