HTML入门完全指南：从零开始构建你的第一个网页

IsLand1314

发布于 2025-03-08 09:45:54

7300

代码可运行

文章被收录于专栏：学习之路学习之路

运行总次数：0

代码可运行

一、HTML 基本骨架

1. 认识 HTML 标签

HTML 代码是由 “标签” 构成的.

形如：

<body>hello</body>

标签名 (body)放到<>中
大部分标签成对出现，<body> 为开始标签，</body>为结束标签
少数标签只有开始标签，称为 “单标签”
开始标签和结束标签之间，写的是标签的内容(hello)
开始标签中可能会带有"属性". id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码)

<body id="myID">hello</body>

2. 基本结构

<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
       hello world
    </body>
</html>

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上写

标签名	定义	说明
<html> </html>	HTML 标签	页面中最大的标签 – 根标签
<head></head>	文档头部	注意：在head 标签必须要设置的标签是 title
<title> </title>	文档标题	让页面拥有自己的网页标题
<body> </body>	文档主体	元素包含文档的所有内容

注意：HTML 文档的后缀名必须是 .html 或者 .htm

浏览器的作用：读取HTML 文档，并以网页形式显示

3. 标签层次结构

① 父子关系

② 兄弟关系

<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
       hello world
    </body>
</html>

其中:

head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)
title 是 head 的子标签，head 是 title 的父标签
head 和 body 之间是兄弟关系,

可以使用 chrome 的开发者工具查看页面的结构 F12 或者右键审査元素, 开启开发者工具,切换到 Elements 标签, 就可以看到页面结构细节,

上面标签之间的结构关系，构成了一个 DOM 树

DOM 是 Document Object Mode (文档对象模型) 的缩写

4. 快速生成代码框架

在 VS 或者 IDEA 中创建文件 xxx.html , 直接输入 ! , 按 tab 键, 此时能自动生成代码的主体框架，如下：

生成代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 
</body>
</html>

细节解释: (了解即可,不必深究)

<!DOCTYPE htm1> 称为 DTD (文档类型定义),描述当前的文件是一个 HTML5 的文件
<htm1 lang="en"> 其中 lang 属性表示当前页面是一个"英语页面".这里暂时不用管.(有些浏览器会根据此处的声明提示是否进行自动翻译).
<meta charset="uTF-8"> 描述页面的字符编码方式,没有这一行可能会导致中文乱码
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- name="viewport" 其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区域.
- content="width=device-width，initial-scale=1.0” 在设置可视区和设备宽度等宽,并设置初始缩放为不缩放(这个属性对于移动端开发更重要一些).

3. 网页开发工具

3.1 文档声明类型

<!DOCTYPE> ：文档类型声明，告诉浏览器用哪种 HTML 版本来显示网页

3.2 lang 语言种类

用来定义当前文档显示语言

en 定义语言为英语
zh-CN 定义语言为中文

简单来说，定义为 en 就是英文网页，定义为 zh-CN 就是中文网页

3.3 字符集

字符集（Character set）是多个字符集合，以便计算机能够识别和存储各种文字

在标签内，可以通过标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码

<meta charset = "UTF-8">

二、HTML 常见标签

1. 基本概述

标签的主要部分有:

**开始标签(Opening tag)：**包含元素的名称(本例为 p)，被左、右角括号所包围。表示元素从这里开1始或者开始起作用 – 在本例中即段落由此开始。
**结東标签(Closing tag)：**与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 – 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
**内容(Content)：**元素的内容，本例中就是所输入的文本本身。

补充：注释标签

注释不会显示在界面上. 目的是提高代码的可读性.

<!--我是注释-->

ctrl + / 快捷键可以快速进行注释/取消注释

注释的原则： 1. 要和代码逻辑一致. 2. 尽量使用中文. 3. 不要传递负能量.

2. 标题标签: h1 - h6

<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>

h1 标签在一个网页中只能用一次，一般用来放新闻标题和网页的 logo
h2 ~ h6 没有使用次数的限制

3. 段落标签: p

把一段比较长的文本粘贴到 html 中, 会发现并没有分成段落. 例如以下文本：

css中的1px并不等于设备的1px
   在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像
素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css
中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同
的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的
移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确
实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，
苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着
同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是
这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五
花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。
   还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中
1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。关于
这点，在文章后面的部分还会讲到。
   在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的
定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 /
   独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该
设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，
也就是说1个css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在
些许的兼容性问题，所以我们现在还并不能完全信赖这个东西，具体的情况可以看下这篇文章

结果如下：

p 标签表示一个段落.

<p>这是一个段落</p>

现在我们使用 p 标签来改进上述代码，如下：

<p>css中的1px并不等于设备的1px</p>

<p>
在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像
素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css
中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同
的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的
移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确
实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，
苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着
同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是
这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五
花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。
</p>
<p>
   还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中
1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。关于
这点，在文章后面的部分还会讲到。
</p>
<p>
   在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的
定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 /
   独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该
设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，
也就是说1个css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在
些许的兼容性问题，所以我们现在还并不能完全信赖这个东西，具体的情况可以看下这篇文章。
</p>

结果如下：

段落标签的显示效果

独占一行
段落之间会有间隙

注意：

p 标签之间存在一个空隙
当前的 p 标签描述的段落, 前面还没有缩进. (未来 CSS 会学)
自动根据浏览器宽度来决定排版.
html 内容首尾处的换行, 空格均无效.
在 html 中文字之间输入的多个空格只相当于一个空格.
html 中直接输入换行不会真的换行，而是相当于一个空格

4. 换行标签: br

br 是 break 的缩写. 表示换行

br 是一个单标签(不需要结束标签)
br 标签不像 p 标签那样带有一个很大的空隙.
<br/>是规范写法，不建议写成<br>

【案例】：

<p>
   在css中我们一般使用px作为单位，<br/>
   在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，
那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不
同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我
们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，
如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随
着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，
分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，
这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素
密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八门，安卓设备上的一个css像素相
当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。
</p>

结果如下：

**注意：**在代码中直接敲 Enter，在浏览器中无换行效果，因为浏览器不识别回车键换行

5. 文本格式化标签

作用：为文本添加特殊格式，以突出重点，常见的文本格式：**加粗**、*倾斜*、<u>下划线</u>、~~删除线~~ 等

标签名	标签名	效果
strong	b	加粗
em	i	倾斜
ins	u	下划线
del	s	删除线

两边标签名区别：strong、em、ins、del 标签自带强调含义（语义）

<b>加粗</b>
<strong>加粗</strong>

<u>下划线</u>
<ins>下划线</ins>
   
<i>倾斜线</i>
<em>倾斜线</em>
   
<s>删除线</s>
<del>删除线</del>

6. 图像标签: src

img 标签必须带有 src 属性. 表示图片的路径.

<img src="rose.jpg">

注意：此时要把 rose.jpg 这个图片文件放到和 html 中的同级目录中.

img 标签的属性：

属性名	作用
src	用于指定图像的位置和名称，是 <img> 的必须属性
alt	替换文本 --图片无法显示的时候就会显示一个替换的文字
title	提示文本 – 鼠标悬停在图片上显示文字
width 和 height	控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡
border	边框, 参数是宽度的像素. 但是一般使用 CSS 来设定

【案例】：

<img src="rose.jpg" alt="鲜花" title="这是一朵鲜花" width="500px" height="800px" border="5px">

注意:

属性可以有多个，不能写到标签之前
属性之间用空格分割，可以是多个空格,也可以是换行
属性之间不分先后顺序
属性使用"键值对" 的格式来表示,

关于目录结构：

对于一个复杂的网站,页面资源很多,这种情况可以使用目录把这些文件整理好. （1）相对路径：以 html 所在位置为基准,找到图片的位置.

同级路径：直接写文件名即可(或者 ./ )
下一级路径： image/1.jpg
上一级路径：../image/1.jpg

（2）绝对路径：一个完整的磁盘路径，或者网络路径。如下：

磁盘路径：D:\rose.jpg
- Windows 电脑从盘符出发
- Mac 电脑从根目录 (/) 出发
网络路径： http://www/cn.hnust

【案例】：

① 使用相对路径: 创建一个 image 目录和 html 同级,并放入一个 rose2.jpg

<img src="D:/HTML%20+CSS/%E7%AC%94%E8%AE%B0/image/rose2.jpg" alt="">

② 使用相对路径2:在 image 目录中创建一个 html,并访问上级目录的 rose.jpg

<img src="../rose.jpg" alt="">

③ 使用绝对路径1：最好使用/，不要使用\

<img src="D:/rose.jpg" alt="">

④ 使用绝对路径2：使用网络路径

<img src="https://images0.cnblogs.com/b10g/130623/201407/300958475557219.png" alt="">

7. 超链接标签: a

href：必须具备, 表示点击后会跳转到哪个页面.
target：打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.

<a href="http://www.baidu.com">百度</a>

链接的几种形式，如下：

① 外部链接：href 引用其他网站的地址

<a href="http://www.baidu.com">百度</a>

② 内部链接：网站内部页面之间的链接. 写相对路径即可.

在一个目录中, 先创建一个 1.html, 再创建一个 2.html

<!-- 1.html -->
我是 1.html
<a href="2.html">点我跳转到 2.html</a>
<!-- 2.html -->
我是 2.html
<a href="1.html">点我跳转到 1.html</a>

③ 空链接：使用 # 在 href 中占位.

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

④ 下载链接：href 对应的路径是一个文件. (可以使用 zip 文件)

<a href:"test.zip">下载文件</a>

⑤ 网页元素链接：可以给图片等任何元素添加链接(把元素放到 a 标签中)

<a href="http://www.sogou.com">
    <img src="rose.jpg" alt="">
</a>

⑥ 锚点链接：

<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>
<p id="one">
   第一集剧情 <br>
   第一集剧情 <br>
   ...
</p>
<p id="two">
   第二集剧情 <br>
   第二集剧情 <br>
 ...
</p>
<p id="three">
   第三集剧情 <br>
   第三集剧情 <br>
 ...
</p>

禁止 a 标签跳转: <a href = "javascript:void(0);"> 或者 <a href = "javascript:;">:

8. 多媒体标签

在现代网页中，多媒体元素是提升用户体验的重要组成部分。HTML 提供了一系列多媒体标签，如 <audio>, <video>, <iframe>, <canvas> 等使得网页能够呈现音频、视频、外部页面以及绘制图形等多种形式的内容。本博客将介绍这些多媒体标签，让你更好地利用它们来丰富你的网页

8.1 audio

<audio> 标签用于嵌入音频文件，提供了在网页中播放音频的能力

<audio controls>
  <source src="test.mp3" type="audio/mp3">
</audio>

controls 属性：提供了一个音频播放器，让用户可以控制播放、暂停、音量等
source 元素：用于指定音频文件的来源和类型

执行效果如下：

8.2 video

<video> 标签类似于 <audio>，用于嵌入视频文件，让用户在网页中观看视频`

<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

执行效果如下：

音频和视频具有的属性如下：

属性名	作用
src	音频路径
controls	显示播放的控件，允许用户控制视频的播放和暂停
autoplay	自动播放【部分浏览器不支持】muted静音播放，有些浏览器允许静音播放
loop	循环播放

【案例】：

<audio src="音频的URL" controls autoplay loop></audio>  <!--音频-->
<video src="音频的URL" controls autoplay loop></audio>  <!--视频-->

注意：

音频标签现在支持三种格式：mp3 Wav Ogg
视频标签目前支持三种格式：MP4 WebM Ogg

8.3 iframe

<iframe> 标签用于嵌入其他网页，将外部页面嵌套到当前页面中

<iframe src="https://blog.csdn.net/island1314?type=blog" width="600" height="400"></iframe>

src 属性定义了嵌入页面的 URL
width 和 height 属性指定了 iframe 的宽度和高度

效果如下：

8.4 canvas

<canvas> 标签允许通过 JavaScript 脚本在网页上绘制图形、动画等内容

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>

通过 JavaScript 脚本，你可以获取 Canvas 上下文并在上面绘制图形，创建交互性丰富的图形界面

【案例】：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0, 0, 150, 75);
</script>

效果如下：

9. 列表标签

主要使用来布局的，使内容排列整齐好看.

列表分类如下：

无序列表[重要]：ul li
有序列表[用的不多] ：ol li
自定义列表[重要]： dl (总标签) dt (小标题) dd (围绕标题来说明) ，比如：上面有个小标题, 下面有几个围绕着标题来展开的. 自定义列表(参考小米官网下方)

注意

元素之间是并列关系
ul / ol 中只能放 li 不能放其他标签，dl 中只能放 dt 和 dd
li 中可以放其他标签.
列表带有自己的样式，可以使用 CSS 来修改. (例如前面的小圆点都会去掉)

8.1 无序列表

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

标签：ul 嵌套 li，ul 是无序列表，li 是列表条目

ul无序列表整体 ul标签中只允许包含li标签，列表中的每一项前默认显示圆点标记

【案例】：

<ul>
    <li>榴莲</li>
    <li>香蕉</li>
    <li>苹果</li>
</ul>

效果如下：

榴莲
香蕉
苹果

8.2 有序列表

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

标签：ol 嵌套 li，ol 是无序列表，li 是列表条目

ol表示有序列表整体 ol标签中只允许包含li标签,列表中的每一项前默认显示序号标记

【案例】：

<ol>
   <li>掌声</li>
   <li>迷惑</li>
</ol>

效果如下：

掌声
迷惑

补充： li表示列表中的每一项，可以包含任意内容

8.3 定义列表

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

标签：**dl 嵌套 dt 和 dd，dl 是定义列表，dd 是定义列表标题，dd 是定义列表的描述 **

【案例】：

    <dl>
        <dt>帮助中心</dt>
        <dd>账号管理</dd>
        <dd>购物指南</dd>
    </dl>

效果如下：

帮助中心账号管理购物指南

注意：

dl表示自定义列表整体，只允许包含dt和dd标签
dt表示自定义列表的主题
dd表示自定义列表分针对主题的每一项内容而且 dd会默认显示缩进效果

10. 表格标签

10.1 表格结构

标签：table 嵌套 tr， tr 嵌套 td / th

标签名	说明
table	表格
tr	行
th	表头单元格
td	内容单元格
thead	表格的头部区域(注意和 th 区分, 范围是比 th 要大的
tbody	表格得到主体区域.

案例如下：

在网页中以行 + 列的单元格的方式整齐展示数据
table 要包含tr（tr会自动换行），tr包含 td / th ，td包含内容

表格标签有一些属性, 可以用于设置大小边框等. 但是一般使用 CSS 方式来设置.

这些属性都要放到 table 标签中

align ：是表格相对于周围元素的对齐方式，align=“center” (不是内部元素的对齐方式)
border ：表示边框. 1 表示有边框(数字越大, 边框越粗), “” 表示没边框.
cellpadding：内容距离边框的距离, 默认 1 像素
cellspacing：单元格之间的距离. 默认为 2 像素
width / height：设置尺寸.

注意：这几个属性，vscode 都提示不出来.

【案例】：

<table border="1" width="200" height="200">
    <tr>
        <td>姓名</td>
        <td>成绩</td>
        <td>评语</td>
    </tr>
    <tr>
        <td>帅哥</td>
        <td>100分</td>
        <td>真棒</td>
    </tr>
    <tr>
        <td>小明</td>
        <td>150分</td>
        <td>真牛</td>
    </tr>
</table>

效果如下：

姓名	成绩	评语
帅哥	100分	真棒
郭德纲	150分	真牛

10.2 合并表格

将水平或者垂直单元格合成一个单元格

rowspan 跨行合并（把多行合并为一行)
colspan 跨列合并（把多列合成一行）
属性值均为数字，代表合成单元格的个数

合并单元格步骤：

明确合并哪些单元格
通过左上原则，上下合并（只保留最上的），左右合并（只保留最左边的）
删除多余单元格

注意；只有同一个结构标签的单元格可以合并，不能跨结构标签合并（不能跨tfoot tbody tfoot）

<table border="1" width="200" height="200">
    <caption><strong>成绩单</strong></caption> 
    <thead>
        <tr>
            <td>姓名</td>
            <td>成绩</td>
            <td>评语</td>
        </tr>
    </thead>
   <tbody>
    <tr>
        <td>帅哥</td>
        <td rowspan="2">100分</td>
        <td>真棒</td>
    </tr>
    <tr>
        <td>郭德纲</td>
        <td>真牛</td>
    </tr>
   </tbody>
    <tfoot>
        <tr>
            <td>总结</td>
            <td colspan="2">郎才女貌</td>
        </tr>
    </tfoot>
</table>

注意：上面的 caption 表示表格名

效果如下：

姓名	成绩	评语
帅哥	100分	真棒
郭德纲	100分	真牛
总结	郎才女貌

注意事项：

cellpadding 属性规定单元边沿与其内容之间的空白。

**注释：**请勿将该属性与 cellspacing 属性相混淆，cellspacing 属性规定的是单元之间的空间。

从实用角度出发，最好不要规定 cellpadding，而是使用 CSS 来添加内边距

 <table border="1" width="200" height="200" align="center" cellpadding="5">

11. 表单标签

表单是让用户输入信息的重要途径，分成下面两个部分:

表单域: 包含表单元素的区域. 重点是 form 标签.
表单控件: 输入框, 提交按钮等. 重点是 input 标签.

11.1 form 标签

<form action="test.html">
   ... [form 的内容]
</form>

描述了要把数据按照什么方式, 提交到哪个页面中.

备注：action 发送数据地址

关于 form 需要结合服务器 & 网络编程来进一步理解. 后面再详细研究.

11.2 Input 标签

<input> 标签定义输入字段，用户可以在其中输入数据

<input> 元素是最重要的表单元素

<input> 元素可以以多种方式显示，具体取决于 type 属性

type 属性值	说明
text	文本框，用于输入单行文本
password	密码框
radio	单选框
checkbox	多选框
button	按钮
file	上传文件

其他属性：

name：给 input 起了个名字. 尤其是对于单选按钮(radio), 具有相同的 name 才能多选一.
value：给 input 的默认值
checked：默认被选中（用于单选按钮和多选按钮）
maxlength：设定最大长度

<!---1、文本框-->
<input type="text">

<!-- 2、密码框: 书写的内容变成圆点 -->
<input type="password">

<!---3、单选框: 单选框之间必须具备相同的 name 属性, 才能实现 多选一 效果-->
性别：
<input type="radio" name="sex">男 
<input type="radio" name="sex" checked>女

<!---4、多选框-->
爱好:<input type="checkbox" checked> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox"> 打游戏

<!---5、普通按钮-->
<input type="button" value="我是个按钮">
	当前点击了没有反应. 需要搭配 JS 使用(后面会重点研究). 
	<input type="button" value="我是个按钮" onclick="alert('hello')">


<!---6、提交按钮: 提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送-->
<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>


<!---7、清空按钮: 清空按钮必须放在 form 中. 点击后会将 form 内所有的用户输入内容重置-->
<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
    <input type="reset" value="清空">
</form>

<!---8、选择文件: 点击选择文件, 会弹出对话框, 选择文件. -->
<input type="file">
<input type="file" multiple> <!--上传多个文件-->

一般我们在登录账户密码的时候，会发现输入的文本框会有提示符，因此我们来看看 input 标签占位文本

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

<input type="text" placeholder="请输入用户名">
<input type="password" placeholder="请输入密码">

补充：在 <form> 中的按钮标签，如下：

<button type=""> 按钮 </button>

type 属性值	说明
submit	提交按钮。点击后可以提交数据到后台（默认）
reset	重置按钮，点击之后将表单控件恢复默认值
button	普通按钮，默认无功能，之后配合js添加功能

<!-- form 表单区域，一般按钮都会在 form 里面使用 -->
    <form action="">
    <!-- (同input按钮系列) -->
    <!-- 谷歌浏览器button默认是提交按钮 -->
    <button>我是按钮</button>
    <button type="submit">提交按钮</button>
    <button type="reset"></button>
    <button type="button">普通按钮，没有任何功能</button>
        
<!--input 按钮， 用 value 属性值 来在框内加显示文字 -->
    <input type="submit">
    <input type="reset" value = "重置"> 重置
    <input type="button" >     
</form>

11.3 下拉菜单 – select

下拉菜单：

select 嵌套 option，select 是下拉菜单整体，option 是每一项
option 中定义 selected=“selected” 表示默认选中

<select>
    <option selected>--请选择城市--</option>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option>深圳</option>  
</select>

注意：可以给的第一个选项, 作为默认选项

11.4 文本域

作用：多行输入文本的表单控件

标签：textarea （双标签）

<!-- 属性 cols：规定了文本域可见宽度  rows：规定了文本域内可见行数 -->
<!-- 注意点：右下角可以拖拽改变大小 -->
<textarea cols="60" rows="30">我爱你</textarea>

文本域中的内容就是默认内容，注意：空格也会有影响
rows 和 cols 也都不会直接使用 , 都是用 css 来改的

11.5 label 标签

搭配 input 使用，点击 label 也能选中对应的单选/复选框, 能够提升用户体验.

for 属性：指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的)
用 label 标签来绑定文字和表单控件的关系，增大表单控件的点击范围

   <!-- 点字就可以选中，不用必须点进圆圈内，增大点击范围 -->

<!--使用方法1  -->
 <!-- 使用label标签把内容（如文本）包起来 ，在表单标签上添加id属性，在label标签的for属性中设置对应的id属性值-->
 <input type="radio" name="sex" id="male"> <label for="male">男</label>

<!-- 使用方法2 -->
 <!-- 直接使用label把内容和表单标签一起包起来 ，不需要属性-->
 <label><input type="radio" name="sex">女</label>

12. 语义化标签

无语义标签：

div 标签 , division 的缩写 , 含义是分割；
span 标签, 含义是跨度

就是两个盒子.用于网页布局

div 是独占一行的，是一个大盒子
span 不独占一行，是一个小盒子,

作用：布局网页（划分网页区域）

<!-- 以下是无语义布局标签 -->
<!-- div 大盒子， span 小盒子-->
    <div>这是div标签</div>
    <span>这是span标签</span>

<!--以下是有语义标签 -->
    <header>网页头部</header>
    <nav>网页导航</nav>
    <footer>网页底部</footer>
    <aside>侧边栏</aside>
    <section>网页区块</section>
    <article>网页文章</article>

div 标签和 span 标签区别

div标签是块级元素，每个div标签都会从新行开始显示，占据一行；div标签内可以添加其他的标签元素（行内元素、块级元素都行）
- div标签可以通过css样式来设置自身的宽度（也可省略，当没有使用css自定义宽度时，div标签的宽度为其的容器的100%）、高度，且还可以设置标签之间的距离（外边距和内边距）；
- 还可以在div标签中，使用其他标签（行内元素、块级元素都行），比如：span标签，p标签，也可以是div标签
span标签是行内元素，会在一行显示；span标签内只能添加行内元素的标签或文本
- span标签的宽度、高度都无法通过css样式设置，它的宽高受其本身内容（文字、图片）控制，随着内容的宽高改变而改变；
- span标签无法控制外边距和内边距，虽然可以设置左右的外边距和内边距，但上下的外边距和内边距无法设置
- span标签里只能容纳文本或者是其他的行内元素，不能容纳块级元素。

三、Emmet 快捷键

① 快速输入标签

input[tab]

② 快速输入多个标签

div*3[tab]

③ 标签带 id

div#sex[tab]

④ 标签带类名

div.sex[tab]

⑤ 标签带子元素

ui>li*3[tab]

⑥ 标签带兄弟元素

span+span

⑦ 标签带内容

div{hello}
<!---带编号-->
div{$.hello}

四、HTML 特殊字符

有些特殊的字符在 html 文件中是不能直接表示的

作用：在网页中显示预留字符

比如：网页不认识多个空格，只认识一个，在段落前想缩进两个文字的空格，使用空格的字符实体：&nbsp

实体名称	描述
	空格
<	小于号
>	大于号
&	按位与

注：html 标签就是用 < > 表示的. 因此内容里如果存在 < > , 就会发生混淆

v 标签和 span 标签区别

div标签是块级元素，每个div标签都会从新行开始显示，占据一行；div标签内可以添加其他的标签元素（行内元素、块级元素都行）
- div标签可以通过css样式来设置自身的宽度（也可省略，当没有使用css自定义宽度时，div标签的宽度为其的容器的100%）、高度，且还可以设置标签之间的距离（外边距和内边距）；
- 还可以在div标签中，使用其他标签（行内元素、块级元素都行），比如：span标签，p标签，也可以是div标签
span标签是行内元素，会在一行显示；span标签内只能添加行内元素的标签或文本
- span标签的宽度、高度都无法通过css样式设置，它的宽高受其本身内容（文字、图片）控制，随着内容的宽高改变而改变；
- span标签无法控制外边距和内边距，虽然可以设置左右的外边距和内边距，但上下的外边距和内边距无法设置
- span标签里只能容纳文本或者是其他的行内元素，不能容纳块级元素。

三、Emmet 快捷键

① 快速输入标签

input[tab]

② 快速输入多个标签

div*3[tab]

③ 标签带 id

div#sex[tab]

④ 标签带类名

div.sex[tab]

⑤ 标签带子元素

ui>li*3[tab]

⑥ 标签带兄弟元素

span+span

⑦ 标签带内容

div{hello}
<!---带编号-->
div{$.hello}

四、HTML 特殊字符

有些特殊的字符在 html 文件中是不能直接表示的

作用：在网页中显示预留字符

比如：网页不认识多个空格，只认识一个，在段落前想缩进两个文字的空格，使用空格的字符实体：&nbsp

实体名称	描述
	空格
<	小于号
>	大于号
&	按位与

注：html 标签就是用 < > 表示的. 因此内容里如果存在 < > , 就会发生混淆

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-03-07，如有侵权请联系 cloudcommunity@tencent.com 删除

入门

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！