html学习笔记#

近期学习了html，做了一些笔记，拿出来分享一下，学过的同学可以拿来查漏补缺，没有学过的同学也可以作为入门参考。

目录#

开发工具-Trae AI编辑器
浏览器和调试工具
HTML初体验
- 01 创建项目文件夹
- 02 快速编写代码
- 03 浏览器预览
常用配置设置
- 编辑器字体大小
- 代码字体大小
- 设置字符缩进
- 保存自动格式化代码
html简介
- 什么是HTML?
- 标签语法
html文档
- 文档类型
- html元素
- <head> 元素
- 字符集
- 移动端页面适配
- title元素
- body元素
标签关系以及AI工具排错
- 标签关系
- AI工具排错
标题和段落标签以及语义化
- html的标题和段落
- 语义化介绍
强调重要性标签
注释标签
块级元素和内联元素
- 块级元素
- 内联元素
图像标签以及常见格式
- 图像标签 img
- 常见图片格式
路径分类
- 相对路径
- 绝对路径
音视频标签
- 视频标签
- 音频标签
创建超级链接以及锚点链接
- 语法
- 其他属性
- 最佳链接实践
- 锚点链接
布局标签
- 网站结构标签
- 无语义标签
列表标签
- 无序列表 ul
- 有序列表 ol
- 描述列表 dl
表格标签和AI合并单元格
- 表格语法
- 表格合并单元格
表单
- 表单容器
- 表单控件
- 辅助标签-label
字符实体

开发工具-Trae AI编辑器#

字节跳动旗下的AI代码编辑器。

Trae与AI深度集成，提供:

智能问答
代码自动补全
基于Agent的AI自动编程能力等

现阶段主要是AI辅助开发:

根据提示自动生成代码
根据错误检查修复代码
代码解读和分析
生成注释和代码优化
AI技术测评
……

浏览器和调试工具#

在浏览器中打开调试工具:

右击页面空白处 → 检查。
快捷键 F12

HTML初体验#

01 创建项目文件夹#

所有相关素材都放到这个文件夹里面，这个文件夹也称为 根目录

02 快速编写代码#

快捷生成代码并编写，可以使用编辑器自带的Emmet语法

03 浏览器预览#

通过浏览器插件 live Server 在编辑器中直接打开浏览器预览效果

常用配置设置#

编辑器字体大小#

ctrl + + 放大
ctrl + - 缩小

代码字体大小#

文件→首选项→设置（ctrl+,）→Editor设置→Font Size

设置字符缩进#

常用设置→ tabSize
为了和后面Vue衔接，tab缩进2个字符。

保存自动格式化代码#

文本格式化→格式化→Format on Save

html简介#

什么是HTML?#

超文本标记语言 ---- HyperText Markup Language，是一种用来告知浏览器如何组织页面的标记语言。

知识点：#

HTML 由一系列的标签组成。
标记也称为标签（元素）。
大小写都可以，建议小写。

简单说，学习HTML就是学习标签

标签语法#

标签组成#

符号：标签用 <> 尖括号表示
组成：开始标签、结束标签和内容
别称：标签也称为元素

标签分类#

大部分都是双标签
少数单标签

开发技巧#

Trae编辑器中直接写标签，然后按Tab或者回车即可

html文档#

文档类型#

1
<!DOCTYPE html>

HTML5 的文档类型声明，它告诉浏览器当前页面是使用 HTML5 规范编写的

html元素#

1
<html>

在元素中，lang用于声明网页的主要语言，帮助浏览器、搜索引擎等正确处理页面内容。

en代表英语，这意味着该页面的主要语言是英语
zh-CN代表中文。

`<head>` 元素#

头部元素。包含了文档的元（meta）数据。
主要保存供机器处理的信息，而非人类可读信息

字符集#

1
<meta charset="UTF-8">

该文档的字符集设置为UTF-8

UTF-8 包括绝大多数人类书面语言的大多数字符。

有了这个设置，页面现在可以处理它可能包含的任何文本内容，如果不加这句话可能会引起乱码。

移动端页面适配#

1
<meta name="viewport" content="width=device-width,initial-scale=1.0">

开发者能确保网页在移动设备上以最佳状态呈现，提升用户浏览体验。

title元素#

这设置了页面的标题，也就是出现在该页面加载的浏览器标签中的内容

body元素#

包含了页面所有显示在页面上的内容，包含文本、图片、视频、游戏、播放音频轨道等等

标签关系以及AI工具排错#

标签关系#

并列关系#

也称为兄弟关系

1
<head></head>
2
<body></body>

嵌套关系#

也称为父子关系

1
<head>
2
  <title></title>
3
</head>

AI工具排错#

实际开发中多层嵌套最容易出问题。
但是我们可以利用小技巧或者AI工具帮助我们理清标签的关系

标题和段落标签以及语义化#

html的标题和段落#

标题标签 h#

场景：在新闻和文章的页面中，都离不开标题，用来突出显示文章主题

语法#

1
<h1>一级标题</h1>
2
<h2>二级标题</h2>
3
<h3>三级标题</h3>
4
<h4>四级标题</h4>
5
<h5>五级标题</h5>
6
<h6>六级标题</h6>

显示特点#

显示特点 标题文字会加粗显示，并且每行只显示一个

h1 唯一性 最好只对每个页面使用一次
<h1>——这是顶级标题
如：新闻的标题、网页的logo部分

层次性 在现有的六个标题层次中，除非觉得有必要否则应该争取每页使用不超过三个

段落标签 p#

HTML 元素表示文本的一个段落。

语法：

1
<p>里面是段落文本</p>

每行只显示一个，文字显示不会自动换行

段落的相关样式请用 CSS 设置。

语义化介绍#

指根据内容结构和含义选择恰当的html元素 语义化的好处：

更清晰的代码结构
对搜索引擎更友好
更好的可访问性…

语义性：

HTML 的主要工作之一是赋予文本结构，使浏览器能够按照开发者的意图显示 HTML 文档。本文介绍了如何使用 HTML 通过定义标题和段落来提供基本的页面结构。

实现结构所涉及的元素具体代表什么，完全取决于作者编辑的内容，只要层次结构是合理的。在创建此类结构时，只需要记住一条最佳实践。

为什么我们需要结构化？这是因为元素有素给内容结构，所以浏览器不知道什么是标题，什么是段落。

用户在阅读网页时，往往会快速浏览以查找相关内容，经常是阅读开头的标题（我们通常在一个网页上会花费很少的时间）。如果用户不能在几秒内看到一些有用的内容，他们很可能会感到沮丧并离开。

为什么我们需要语义？我们需要确保使用了正确的元素来给予内容正确的含义、作用以及外形。在这里，h1 元素也是一个语义元素。它所包裹的文本具有“页面上的顶级标题”的作用（或意义）。

一般来说，浏览器会给它一个更大的字形来让它看上去像个标题。更重要的是，它的语义将以多种方式被使用，比如通过上文提到的搜索引擎和屏幕阅读器。

强调重要性标签#

HTML 也提供了相应的标签，使其具有加粗、倾斜、下划线等效果，来着重强调某些文字。

带有语义现在更推荐使用

标签	作用
`<strong></strong>`	加粗
`<em></em>`	倾斜
`<ins></ins>`	下划线
`<del></del>`	删除线

无语义，不推荐使用，除非特殊情况

标签	作用
`<b></b>`	加粗
`<i></i>`	倾斜
`<u></u>`	下划线
`<s></s>`	删除线

注释标签#

在 HTML 中，注释标签用于添加不会在浏览器中显示的注释或说明。

语法：

1
<!-- 这里是注释内容 -->

快捷键：ctrl + /

特点：

注释内容不会显示在网页上
可以跨越多行
常用于代码说明、临时禁用代码或给其他开发者留言

块级元素和内联元素#

HTML标签分类：
在 HTML 中有两种元素类别：
块级元素和内联元素。
分类不同决定着展示形式不一样。

块级元素#

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

内联元素#

可以一行放多个，通常与文本一起使用
不能嵌套块级元素，可以嵌套其他内联元素
常见比如 strong、em、a 等

注意事项：
p里面不能嵌套其他块级元素
段落里面主要放文字相关，比如内联元素

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

图像标签以及常见格式#

图像标签 img#

作用：在网页中显示图片
语法：

1
<img src="图片路径" alt="图片描述">

语法说明: 单标签（空元素）

默认包含两个属性：src 和 alt

src 属性

指向要插入到页面的图像地址

alt 属性

备选文本，用于在图片无法显示或者因为网速慢情况下显示的文字

注意：

属性采取键值对形式：属性=“值”
属性之间没有必要的先后顺序
但是属性之间必须有空格分隔

其他属性：

属性	作用
width	设置图片宽度（建议css修改）
height	设置图片高度（建议css修改）
title	图像标题。鼠标悬停显示的文本

图片属性总结：

属性	作用
src	指向要插入到页面的图像地址
alt	备选文本。图片无法显示提示的文字
width	设置图片宽度（建议css修改）
height	设置图片高度（建议css修改）
title	图像标题。鼠标悬停显示的文本

注意：

属性采取键值对形式：属性=“值”
属性之间没有必要的先后顺序，但属性之间必须有空格分隔

常见图片格式#

常见图片格式对照表#

格式	特点	适用场景
jpeg / jpg	有损压缩技术，放大会变得模糊或有锯齿	摄影照片、网页图片（非透明背景）
png	无损压缩，支持透明度	Logo、网页图形、需要透明度的图像
gif	支持动画，最多256色（索引色）；支持简单动画和透明背景	简单动画、表情包、低色彩图形
webp	Google 开发的现代格式；支持有损/无损压缩、透明度和动画	网页优化（替代 JPEG/PNG/GIF），代表：淘宝等
avif	基于 AV1 视频编码，支持高压缩率和 HDR；压缩效率优于 WebP	未来网页优化，需高性能编码的场景（B站、京东等）

路径分类#

路径：
在html中，路径用于指定文件（如图像，样式表现或其他网页）的位置
白话：图片相对于html文件的位置，html怎么找到图片

相对路径#

相对于当前文件位置的路径

图片路径引用#

1.同一目录

说明：直接使用文件名即可，./ 表示当前文件夹（可省略）
示例：

1
<img src="pig.jpg" alt="这是佩奇">
2
<img src="./pig.jpg" alt="这是佩奇">

2.下级子目录

说明：使用 目录名/文件名 的形式
示例：

1
<img src="img/pig.jpg" alt="这是佩奇">

3.上级目录

说明：使用 ../ 返回上一级目录
示例：

1
<img src="../pig.jpg" alt="这是佩奇">

绝对路径#

绝对路径是从根目录开始的完整路径，包含完整的URL地址

图片路径引用#

1.从盘符开始（本地绝对路径）
适用于本地文件的完整路径，直接写盘符开头的文件位置。
示例：

1
<img src="E:\HTML5\代码\pic.jpg" alt="示例图片">

2.完整网络地址（URL）
适用于互联网上的图片，直接写完整的 HTTP/HTTPS 地址。
示例：

1
<img src="https://www.example.com/images/pic.jpg" alt="示例图片">

音视频标签#

视频标签#

使网页变得更加丰富多彩，吸引用户语法：

1
<video src=""></video>
2
<video src="video.mp4" controls width="300"></video>

核心属性：

src 属性：指向要插入到页面的视频地址
controls：显示浏览器自带播放控件
width/height 属性：设置视频的宽度和高度

视频标签其他属性：

属性	作用
autoplay	自动播放
loop	循环播放
muted	静音
poster	预览图像

视频标签兼容性写法：

不同浏览器支持的视频格式有所差异

浏览器	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

为了视频尽可能兼容不同浏览器，建议使用以下兼容性写法：

1
<video controls controls muted loop poster="poster.jpg">
2
  <source src="video.ogg" type="video/ogg">
3
  <source src="video.mp4" type="video/mp4">
4
  <source src="video.webm" type="video/webm">
5
  <p>您的浏览器不支持 HTML 5 Video 标签，请升级浏览器。</p>
6
</video>

核心原理：

将 src 属性放在几个单独的 <source> 元素当中，这些元素分别指向各自的资源。
浏览器会检查 <source> 元素，并且播放第一个与其自身相匹配的媒体。
每个 <source> 元素都含有 type 属性，浏览器也会通过检查这个属性来迅速跳过那些不支持的格式。如果没有添加 type 属性，浏览器会尝试加载每一个文件，直到找到一个能正确播放的格式，但这样会消耗大量的时间和资源。

音频标签#

使网页变得更加丰富多彩，吸引用户
语法：

1
<audio src=""></audio>
2
<audio src="audio.mp3" controls></audio>

核心属性：

src 属性：指向要插入到页面的音频地址
controls：显示浏览器自带播放控件

音频标签其他属性：

属性	作用
autoplay	自动播放
loop	循环播放
muted	静音

音频标签兼容性写法：

不同浏览器支持的音频格式有所差异

浏览器	MP3	WAV	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	NO	NO
Opera	YES (从 Opera 25 起)	YES	YES

音频标签其他兼容性写法：

1
<audio controls controls muted loop>
2
  <source src="audio.mp3" type="audio/mpeg">
3
  <source src="audio.wav" type="audio/wav">
4
  <source src="audio.ogg" type="audio/ogg">
5
  <p>您的浏览器不支持 HTML 5 Audio 标签，请升级浏览器。</p>
6
</audio>

核心原理：和视频标签的兼容性写法类似，只是将视频标签的 <source> 元素替换为音频标签的 <source> 元素。

创建超级链接以及锚点链接#

超链接使我们能够将我们的文档链接到任何其他文档（或其他资源），也可以链接到文档的指定部分。

语法#

1
<a href=""></a>
2
<a href="https://www.deepseek.com/">DeepSeek官网</a>

核心属性：

href 属性（也称为超文本引用或目标）：它将包含一个网址，用来创建一个基本链接。

链接内容：
链接可以包含除了自身之外的其他元素，比如文字、标题、图片、视频等。

其他属性#

title 属性

作用：鼠标悬停时的提示文字
示例：

1
<a href="https://www.example.com/" title="这是示例网站">示例链接</a>

target 属性

作用：控制链接打开的页面方式
常用取值：
- _self：当前窗口打开（默认值）
- _blank：新窗口打开
- _parent：父窗口打开
- _top：顶部窗口打开

最佳链接实践#

空连接#

在HTML中，空连接通常指的是没有实际指向目标的超链接，符号是#

1
<a href="#">商品列表</a>

下载链接#

如果是exe或者压缩包点击是下载

1
<a href="download.exe">下载window版本</a>

邮件链接#

某些简单场景或个人使用情况下使用。
公司或者流量大的网站慎用，有垃圾邮件等风险，其他方案替代。

1
<a href="mailto:pig@mozilla.org">给我发邮件</a>

锚点链接#

锚点链接允许用户在同一个页面内跳转到指定位置。
非常适合长页面导航。

锚点链接实现步骤#

定义锚点目标
使用id属性创建锚点目标
比如：

1
<h2 id="1">第一部分</h2>

创建跳转链接
使用#标记锚点目标
比如：

1
<a href="#1">跳转到第一部分</a>

多学一招#

想要点击链接之后，页面具有滑动效果。
请在<head>标签中添加一下css代码。

1
<style>
2
html {
3
  scroll-behavior: smooth;
4
}
5
</style>

布局标签#

网站结构标签#

网页的外观多种多样，但是大概都包含：页眉、导航栏、主内容、侧边栏、页脚等

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

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

无语义标签#

没有合适语义标签时，在进行一些布局时候可以选择：div 和 span 标签

div标签#

特点：

块级元素：默认独占一行，前后会自动换行。
通常用于布局结构，作为其他元素的容器。
可以包含其他块级或行内元素。
默认没有语义。

span标签#

特点：

行内元素：不会换行，仅包裹内容的一部分。
用于对文本或行内元素的局部样式或操作。
默认没有语义。

列表标签#

HTML 列表是网页内容组织的重要元素。可以让我们显示内容更加整齐有序（后面的笔记会有详细内容）

列表标签#

无序列表 ul#

顺序无关紧要的列表
无序列表是我们布局中非常常用，常用于一些整齐对齐的模块中使用

场景

基本语法#

1
<ul>
2
  <li>猪爸爸</li>
3
  <li>猪妈妈</li>
4
  <li>佩奇</li>
5
  <li>乔治</li>
6
</ul>

渲染效果

猪爸爸
猪妈妈
佩奇
乔治

标签说明
<ul>

定义列表的容器
只能包含 <li> 元素

<li>

定义列表的选项
里面可以放其他HTML元素

有序列表 ol#

顺序有关紧要的列表
有序列表再布局中较少，了解即可，实际开发即使有顺序，我们一般也是用其他属性

有序列表ol#

基本语法#

1
<ol>
2
  <li>看视频</li>
3
  <li>写代码</li>
4
  <li>做笔记</li>
5
  <li>多复习</li>
6
</ol>

渲染效果

看视频
写代码
做笔记
多复习

标签说明
<ol>

定义列表的容器
只能包含 <li> 元素

<li>

定义列表的选项
里面可以放其他HTML元素

描述列表 dl#

标记一组项目及相关描述
描述列表再我们布局中主要是在页面底部

场景

描述列表dl#

基本语法#

1
<dl>
2
  <dt>家电</dt>
3
  <dd>电视</dd>
4
  <dd>冰箱</dd>
5
  <dd>空调</dd>
6
  <dd>烟灶</dd>
7
</dl>

渲染效果
家电电视冰箱空调烟灶

标签说明
<dl>

定义列表的容器
只能包含 <dt> 和 <dd> 元素

<dt>

定义被描述的术语
通常显示为左对齐或加粗
一个 <dt> 可以对应多个 <dd>

<dd>

包含术语的定义或描述
通常显示为缩进形式
可以包含段落、图片、链接等其他HTML元素

表格标签和AI合并单元格#

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

场景

表格语法#

表格基本语法

1
<table border="1">
2
  <!--border属性：表格边框属性(现阶段用来看效果，后期用css替代)-->
3
    <tr>
4
      <th>姓名</th>
5
      <th>年龄</th>
6
    </tr>
7
    <tr>
8
      <td>佩奇</td>
9
      <td>6</td>
10
    </tr>
11
</table>

表格基本组成

标签	作用
`<table>`	表格容器标签
`<tr>`	行标签
`<td>`	单元格标签
`<th>`	表头单元格（可以让里面的文字水平和垂直居中）
`<border>`	表格边框属性(现阶段用来看效果，后期用css替代)

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

标签	作用
`<thead>`	定义表格的头部区域
`<tbody>`	定义表格的主体内容
`<tfoot>`	定义表格的底部区域

示例：

1
<table border="1">
2
  <!--border属性：表格边框属性(现阶段用来看效果，后期用css替代)-->
3
  <thead>
4
    <!--thead标签：定义表格的头部区域-->
5
    <tr>
6
      <th>姓名</th>
7
      <th>年龄</th>
8
    </tr>
9
  </thead>
10
  <tbody>
11
    <!--tbody标签：定义表格的主体内容-->
12
    <tr>
13
      <td>佩奇</td>
14
      <td>6</td>
15
    </tr>
16
  </tbody>
17
  <tfoot>
18
    <!--tfoot标签：定义表格的底部区域-->
19
    <tr>
20
      <td colspan="2">合计1人</td>
21
      <!--colspan属性：合并列单元格-->
22
    </tr>
23
  </tfoot>
24
</table>

表格合并单元格#

表格开发中很少使用合并，因为会导致表格难以维护，且可能影响响应式适配（尤其在移动端）。如果特殊情况，可以借助于AI。

表格合并原理

确定合并类型：跨行（rowspan）或跨列（colspan）
遵循左上原则，找到目标单元格并填写合并数量
删除合并后多余的单元格

示例：

1
<table border="1">
2
  <tr>
3
    <th>姓名</th>
4
    <th>年龄</th>
5
    <th>性别</th>
6
    <th>爱好</th>
7
    <th>居住地</th>
8
  </tr>
9
  <tr>
10
    <td>张三</td>
11
    <td>18</td>
12
    <td>男</td>
13
    <td>足球</td>
14
    <td>北京</td>
15
  </tr>
16
  <tr>
17
    <td>李四</td>
18
    <td>20</td>
19
    <td>女</td>
20
    <td>篮球</td>
21
    <td></td>
22
  </tr>
23
  <tr>
24
    <td>王五</td>
25
    <td>22</td>
26
    <td>男</td>
27
    <td>篮球</td>
28
    <td>深圳</td>
29
  </tr>
30
  <tr>
31
    <td colspan="5">日期：2023年10月1日</td>
32
  </tr>
33
</table>

渲染效果

表单#

表单：是用于收集用户输入数据，并将数据提交到后端进行处理场景：

用户登录/注册
搜索框
联系表单
问卷调查
订单支付
文件上传

表单的核心标签有三部分组成：

表单容器
<form>：

定义表单的容器，包裹所有表单控件。
默认包含action属性

表单控件

包含 <input> 通用输入控件、<textarea>：多行文本输入框 <select> 下拉选择框、<button>：自定义按钮等

辅助标签
<label>：

关联输入控件的文本标签，提升可访问性（点击标签可聚焦输入框）
更好的提高表单的用户体验

表单容器#

form 标签 作用：定义表单的容器，包裹所有表单控件。

1
<form action=""></form>

action 属性定义了在提交表单时，应该把所收集的数据送给谁（URL）去处理。

目前我们还不涉及数据交互，所以这里暂且为空即可

表单控件#

input表单：通用输入控件，包含输入框、单选框、复选框等 textarea表单：多行文本输入框 select下拉表单：下拉选择框 button按钮：自定义按钮

表单控件-input#

输入标签<input>是最常用的表单元素之一，它可以创建文本输入框、密码框、单选框、复选框等。
type属性定义了输入框的类型

type属性值	说明
text	单行文本框
password	密码框
radio	单选框
checkbox	复选框
file	文件域

1.单行文本框和密码框(text/password)

场景

type属性值

type属性值	说明
text	单行文本框
password	密码框

其他属性

其他属性	说明
placeholder	提示信息
name	元素的名称
maxlength	允许的最大字符数
accesskey	使元素获得焦点的快捷键(按下指定的键组合，即可将焦点移动到该元素) win系统：alt+键值 mac系统：option+键值
autocomplete	用于控制表单的自动填充行为，帮助浏览器决定是否根据用户历史输入自动填充字段值取值 on / off

示例

1
<form action="">
2
  <ul>
3
    <li>
4
    账号：<input type="text" name="username" placeholder="请输入账号" accesskey="u">
5
    <!--accesskey属性：使元素获得焦点的快捷键(win系统：alt+键值，mac系统：option+键值)-->
6
    </li>
7
    <li>
8
    密码：<input type="password" name="password" placeholder="请输入密码" maxlength="12">
9
    </li>
10
  </ul>
11
</form>

2.单选框和复选框(radio/checkbox)

场景

type属性值

type属性值	说明
radio	单选框
checkbox	复选框

其他属性

其他属性	说明
name	表单名称实现分组
value	表单值
checked	是否默认选中

示例

1
<form action="">
2
  <ul>
3
    <!-- 2. 单选框 复选框和文件域 -->
4
    <li>
5
      性别:
6
      <input type="radio" name="gender" value="0" checked> 女
7
      <input type="radio" name="gender" value="1"> 男
8
    </li>
9
    <li>
10
      爱好:
11
      <input type="checkbox" name="hobby" value="0" checked> 足球
12
      <input type="checkbox" name="hobby" value="1"> 篮球
13
      <input type="checkbox" name="hobby" value="2"> 双色球
14
    </li>
15
  </ul>
16
</form>

3.文件域(file)

场景

type属性值

type属性值	说明
file	文件域

其他属性

其他属性	说明
multiple	允许选择多个文件
accept	规定选择的文件类型，多个类型中间用逗号分割

示例

1
<form action="">
2
  <ul>
3
    <li>
4
      头像:
5
      <input type="file" name="file" multiple accept=".jpg,.png,.webp">
6
    </li>
7
  </ul>
8
</form>

accept常用属性值补充

accept属性值	说明
image/*	只允许选择图片文件
audio/*	只允许选择音频文件
video/*	只允许选择视频文件
application/*	只允许选择应用程序文件

表单控件-textarea#

<textarea> HTML 元素是一个多行纯文本编辑控件，适用于允许用户输入大量自由格式文本的场景，例如评论或反馈表单。
textarea 多行文本框也称为文本域。

场景

基本语法

1
<textarea></textarea>

常见属性

常见属性	说明
name	表单名称
placeholder	提示信息
rows	文本行数，正整数，默认为2
cols	文本列数，正整数，默认20

文本域textarea利用CSS来设定样式，比如宽高边框等

示例

1
<form action="">
2
  留言:
3
  <textarea name="msg" cols="30" rows="10" placeholder="请输入留言"></textarea>
4
</form>

表单控件-select#

HTML<select>元素表示一个提供选项菜单的控件

场景

语法示例

1
<select name="" id="">
2
  <option value="北京">北京</option>
3
  <option value="深圳">深圳</option>
4
  <option value="上海" selected>上海</option>
5
  <option value="广州">广州</option>
6
</select>

<select> 元素是容器，<option>是每一个选项标签，每个选项要跟一个值
要想默认选中一个选项，可以添加 selected 属性。

因为select很难修改为好看的效果，大部分下拉列表可以通过其他标签模拟实现

表单控件-button#

HTML <button> 标签定义一个按钮，元素内部可以放置内容，比如文本或图像

场景

语法示例

1
<!--中间文字写什么，按钮就显示什么-->
2
  <button>搜索</button>
3
  <button>登录</button>

disabled属性可以禁用按钮，禁用后的按钮不能点击，如下图

辅助标签-label#

<label> 表示用户界面中某个元素的说明，提升可访问性（点击标签可聚焦输入框）

场景

两种使用方式：

方式一： 利用for和id相关联

1
<label for="nan">男</label>
2
<input type="radio" id="nan" name="sex">

方式二： 直接包含

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

通过label标签也可以实现单击标签就可以锁定输入框的效果
示例

1
<label>
2
  用户名:
3
  <input type="text" name="username">
4
</label>

字符实体#

字符实体是一段以连字号（&）开头、以分号（;）结尾的文本（字符串）。
常用于显示保留字符和不可见的字符（如“不换行空格”）

常用字符实体对照表#

字符	实体	说明
`&`	`&`	与符号
`<`	`<`	小于号
`>`	`>`	大于号
`"`	`"`	引号
	` `	不换行空格
`–`	`–`	短破折号
`—`	`—`	长破折号
`©`	`©`	版权符号
`®`	`®`	注册商标符号
`™`	`™`	商标符号
`≈`	`≈`	近似等于符号
`≠`	`≠`	不等于符号
`£`	`£`	英镑符号
`€`	`€`	欧元符号
`°`	`°`	度符号

有你在的今天

html学习笔记#

目录#

开发工具-Trae AI编辑器#

浏览器和调试工具#

HTML初体验#

01 创建项目文件夹#

02 快速编写代码#

03 浏览器预览#

常用配置设置#

编辑器字体大小#

代码字体大小#

设置字符缩进#

保存自动格式化代码#

html简介#

什么是HTML?#

知识点：#

标签语法#

标签组成#

标签分类#

开发技巧#

html文档#

文档类型#

html元素#

<head> 元素#

字符集#

移动端页面适配#

title元素#

body元素#

标签关系以及AI工具排错#

标签关系#

并列关系#

嵌套关系#

AI工具排错#

标题和段落标签以及语义化#

html的标题和段落#

标题标签 h#

语法#

显示特点#

段落标签 p#

语义化介绍#

强调重要性标签#

注释标签#

块级元素和内联元素#

块级元素#

内联元素#

图像标签以及常见格式#

图像标签 img#

常见图片格式#

常见图片格式对照表#

路径分类#

相对路径#

图片路径引用#

绝对路径#

图片路径引用#

音视频标签#

视频标签#

音频标签#

创建超级链接以及锚点链接#

语法#

其他属性#

最佳链接实践#

空连接#

下载链接#

邮件链接#

锚点链接#

锚点链接实现步骤#

多学一招#

布局标签#

布局标签#

网站结构标签#

无语义标签#

div标签#

span标签#

列表标签#

列表标签#

无序列表 ul#

基本语法#

有序列表 ol#

有序列表ol#

`<head>` 元素#