HTML零基础入门教学

小灵蛇

发布于 2024-12-18 17:01:03

29900

代码可运行

文章被收录于专栏：文章部文章部

运行总次数：0

代码可运行

此篇博客讲解如何零基础入门HTML。干货满满！！！

一. HTML语言

HTML是超文本标记语言。

超文本：文本、图片、声音、视频、表格、链接等等。 标记：由许许多多的标签组成。

二. HTML结构

HTML 代码是由 "标签" 构成的。

形如:

<body>hello</body>

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

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

三. HTML文件基本结构

下面我们来看看一个基本的HTML文件结构式什么样的。打开记事本，新建一个文件，写上下面的代码：

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

然后保存这个文件，文件后缀为.html。

双标签：有开始有结束

html 标签是整个 html 文件的根标签(最顶层标签)
head 标签中写页面的属性。
body 标签中写的是页面上显示的内容
title 标签中写的是页面的标题。

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

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

所有的标签都是HTML的子标签。head与body是兄弟标签，head和title是父子标签。

每一个标签相当于是一个对象，程序员可以通过代码拿到这些对象，拿到之后可以对这些对象进行增删查改。

我们双击运行上面的html后缀文件，就可以打开浏览器如下：

按下F12就可以出现上图右边的代码显示。

四. 准备开发环境

在企业中我们习惯于使用VsCode软件来进行Web开发。还没有安装VsCode的小伙伴可以移步我这篇文章（vscode配置C/C++环境（保姆级详细教程）_vscode配置c++环境-CSDN博客）。

我们这里主要讲一下如何搭建Web开发的配置。我们点击VsCode左侧扩展图标：

在里面搜索安装三个扩展，分别是：

好勒。环境配置完毕，下面可以开始进行第一份正式代码编写了！！！

五. 快速生成代码框架

直接输入！+回车即可生成以下代码：

这里讲一下浏览器解码规则：

假如我们设置编码规则为 UTF-8：

那么打开网页效果为：

是可以正常显示的。而如果编码规则改为 ISO，那么：

这里就变成了乱码。

六. HTML常见标签

6.1 注释标签

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

<!-- 我是注释 -->

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 这是注释 -->
</body>
</html>

6.2 标题标签：h1-h6

有六个，从h1-h6，数字越大，字体越小：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 这是注释 -->
    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
    <h4>这是四级标题</h4>
    <h5>这是五级标题</h5>
    <h6>这是六级标题</h6>
</body>
</html>

6.3 段落标签：p

把一段比较长的文本粘贴到 html 中, 会发现并没有分成段落。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 这是注释 -->
    css中的1px并不等于设备的1px
    在css中我们一般使用px作为单位
    还有一个因素也会引起css中px的变化
    在移动端浏览器中以及某些桌面浏览器中
</body>
</html>

虽然我们在HTML编写时进行了换行，但是实际在浏览器页面打开换行变成了一个空格：

是并没有换行的。 在body中的换行，实际在页面上显示是一个空格。如果我们想要一段一段的显示，那么需要用到p标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 这是注释 -->
    <p>中的1px并不等于设备的1px</p>
    <p>在css中我们一般使用px作为单位</p>
    <p>还有一个因素也会引起css中px的变化</p>
    <p>在移动端浏览器中以及某些桌面浏览器中</p>
</body>
</html>

注意：

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

6.4 换行标签：br

br 是 break 的缩写。表示换行。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 这是注释 -->
    <p>中的1px并不等于<br/>设备的1px</p>
    <p>在css中我们一般使用px作为单位</p>
    <p>还有一个因素也会引起css中px的变化</p>
    <p>在移动端浏览器中以及某些桌面浏览器中</p>
</body>
</html>

换行标签换行之后间隙比段落标签间隙小。

6.5 格式化标签

加粗: strong 标签和 b 标签
倾斜: em 标签和 i 标签
删除线: del 标签和 s 标签
下划线: ins 标签和 u 标签

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

<em>倾斜</em>
<i>倾斜</i>

<del>删除线</del>
<s>删除线</s>

<ins>下划线</ins>
<u>下划线</u>

如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 这是注释 -->
    <p>中的<strong>1px</strong>并不等于<br/>设备的1px</p>
    <p>在css中<em>我们一般使用</em>px作为单位</p>
    <p>还有一个<del>因素</del>也会引起css中px的变化</p>
    <p>在<ins>移动端浏览器</ins>移动端浏览器中以及某些桌面浏览器中</p>
</body>
</html>

使用 CSS 也可以完成类似的效果. 实际开发中以 CSS 方式为主。

6.6 图片标签：img

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

<img src="rose.jpg">

此时要把 rose.jpg 这个图片文件放到和 html 中的同级目录中。（ 可以根据绝对/相对路径自行设置 ）

下面演示打开网页图片：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 这是注释 -->
    <p>中的<strong>1px</strong>并不等于<br/>设备的1px</p>
    <p>在css中<em>我们一般使用</em>px作为单位</p>
    <p>还有一个<del>因素</del>也会引起css中px的变化</p>
    <p>在<ins>移动端浏览器</ins>移动端浏览器中<img src="https://ss2.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1659552792,3869332496&fm=253&gp=0.jpg">以及某些桌面浏览器中</p>
</body>
</html>

img 标签的其他属性：

alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字。alt后面的文案，只有当图片加载失败的时候才会展示。如果图片加载成功，这个文案就不会展示。
title: 提示文本. 鼠标放到图片上, 就会有提示。
width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡。
border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定。

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

属性与属性之间可以用空格或者换行隔开。

首先来看alt：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 这是注释 -->
    <p>中的<strong>1px</strong>并不等于<br/>设备的1px</p>
    <p>在css中<em>我们一般使用</em>px作为单位</p>
    <p>还有一个<del>因素</del>也会引起css中px的变化</p>
    <p>在<ins>移动端浏览器</ins>移动端浏览器中<img src="https://ss2.bdstatic." alt="图片加载失败">以及某些桌面浏览器中</p>
</body>
</html>

这个图片的网址是错误的，那么网页上就会出现：

然后title：

我们平常进行搜索的时候。我们将鼠标放在这个bing图片上的时候，会出现一个《返回到必应搜索》的提示，这就是title的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 这是注释 -->
    <p>中的<strong>1px</strong>并不等于<br/>设备的1px</p>
    <p>在css中<em>我们一般使用</em>px作为单位</p>
    <p>还有一个<del>因素</del>也会引起css中px的变化</p>
    <p>在<ins>移动端浏览器</ins>移动端浏览器中<img src="https://ss2.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1659552792,3869332496&fm=253&gp=0.jpg" title="这是一张风景图片">以及某些桌面浏览器中</p>
</body>
</html>

可以看到是出现了效果的。

然后width/height属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 这是注释 -->
    <p>中的<strong>1px</strong>并不等于<br/>设备的1px</p>
    <p>在css中<em>我们一般使用</em>px作为单位</p>
    <p>还有一个<del>因素</del>也会引起css中px的变化</p>
    <p>在<ins>移动端浏览器</ins>移动端浏览器中<img src="https://ss2.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1659552792,3869332496&fm=253&gp=0.jpg" width="100px" height="100px">以及某些桌面浏览器中</p>
</body>
</html>

对比于之前图片是明显变小的（px是像素的意思）

最后是border属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 这是注释 -->
    <p>中的<strong>1px</strong>并不等于<br/>设备的1px</p>
    <p>在css中<em>我们一般使用</em>px作为单位</p>
    <p>还有一个<del>因素</del>也会引起css中px的变化</p>
    <p>在<ins>移动端浏览器</ins>移动端浏览器中<img src="https://ss2.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1659552792,3869332496&fm=253&gp=0.jpg" width="100px" height="100px" border="10px">以及某些桌面浏览器中</p>
</body>
</html>

6.7 超链接标签：a

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

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

链接的几种形式：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <a href="https://news.qq.com/">跳转到腾讯网</a>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <a href="https://news.qq.com/">跳转到腾讯网</a>
    <a href="1.html">跳转到1.html页面</a>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <a href="https://news.qq.com/">跳转到腾讯网</a>
    <a href="1.html">跳转到1.html页面</a>
    <a href="#">跳转到当前页面</a>
</body>
</html>

下载链接：href对应的路径是一个文件（可以使用zip文件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <a href="https://news.qq.com/">跳转到腾讯网</a>
    <a href="1.html">跳转到1.html页面</a>
    <a href="#">跳转到当前页面</a>
    <a href="D:\Microsoft edge download\citation-network1.zip">下载文件</a>
</body>
</html>

网页元素链接：可以给图片等任何元素添加链接。

例如：

点击这个图片之后，会跳转到bing搜索主页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <a href="https://news.qq.com/">跳转到腾讯网</a>
    <a href="1.html">跳转到1.html页面</a>
    <a href="#">跳转到当前页面</a>
    <a href="D:\Microsoft edge download\citation-network1.zip">下载文件</a>
    <a href="http://www.sogou.com">
        <img src="../OIP.jpg" alt="">
    </a>
</body>
</html>

点击之后：

锚点链接：指我点击页面中的某一个链接(锚点链接)，就会跳到这个页面的指定位置(锚点)。

例如多个网站中的回到顶部按钮就是用锚点做的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p name="top" id="top"></p>
    <a href="https://news.qq.com/">跳转到腾讯网</a>
    <a href="1.html" target="_blank">跳转到1.html页面</a>
    <a href="#">跳转到当前页面</a>
    <a href="D:\Microsoft edge download\citation-network1.zip">下载文件</a>
    <a href="http://www.sogou.com">
        <img src="../OIP.jpg" alt="">
    </a>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <a href="#top">回到顶部</a>
</body>
</html>

点击之后：

确实是回到了顶部。

上面都是说的href属性，下面来看看target属性有什么用：

我们如果不想要跳转之后仍然在当前页面，我们可以修改target属性，默认是_self，即当前页面跳转，还可以设置为_blank，即重新打开一个页面显示跳转结果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <a href="https://news.qq.com/">跳转到腾讯网</a>
    <a href="1.html" target="_blank">跳转到1.html页面</a>
    <a href="#">跳转到当前页面</a>
    <a href="D:\Microsoft edge download\citation-network1.zip">下载文件</a>
    <a href="http://www.sogou.com">
        <img src="../OIP.jpg" alt="">
    </a>
</body>
</html>

可以看到点击之后打开了一个新页面。

如果我们要禁止a标签跳转：

<a href="javascript:void(0);"> 或者 <a href="javascript:;">

6.8 表格标签

table 标签: 表示整个表格
tr: 表示表格的一行
td: 表示一个单元格
th: 表示表头单元格. 会居中加粗
thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
tbody: 表格的主体区域

table 包含 tr , tr 包含 td 或者 th。

表格标签有一些属性, 可以用于设置大小边框等。但是一般使用 CSS 方式来设置。这些属性都要放到 table 标签中。

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

注意, 这几个属性, vscode 都提示不出来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <table border="1px" width="500px" height="200px" cellspacing="0" cellpadding="50" align="center">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr> 
        </thead> 
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>   
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>3</td>
        </tr>    
        <tr>
            <td>李四</td>
            <td>男</td>
            <td>4</td>
        </tr>    
        <tr>
            <td>王五</td>
            <td>女</td>
            <td>5</td>
        </tr> 
    </table>
</body>
</html>

合并单元格：

跨行合并: rowspan="n"，合并n行。 跨列合并: colspan="n"，合并n列。

先确定跨行还是跨列
找好目标单元格(跨列合并, 左侧是目标单元格; 跨行合并, 上方是目标单元格)
删除的多余的单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <table border="1px" width="500px" height="200px" cellspacing="0" cellpadding="50" align="center">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr> 
        </thead>   
        <tr>
            <td>张三</td>
            <td rowspan="2">男</td>
            <td>3</td>
        </tr>    
        <tr>
            <td>李四</td>
            <!-- <td>男</td> -->
            <td>4</td>
        </tr>    
        <tr>
            <td colspan="2">王五/女</td>
            <!-- <td>女</td> -->
            <td>5</td>
        </tr> 
    </table>
</body>
</html>

6.9 列表标签

6.9.1 无序列表

无序列表：ul li

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>这是一个无序列表</h1>
    <ul>
        <li>这是内容一</li>
        <li>这是内容一</li>
        <li>这是内容一</li>
    </ul>
</body>
</html>

如果想修改列表前面的图形，可以用type属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>这是一个无序列表</h1>
    <ul type="disc">
        <li>这是内容一</li>
        <li>这是内容二</li>
        <li>这是内容三</li>
    </ul>
    <ul type="square">
        <li>这是内容一</li>
        <li>这是内容二</li>
        <li>这是内容三</li>
    </ul>
    <ul type="circle">
        <li>这是内容一</li>
        <li>这是内容二</li>
        <li>这是内容三</li>
    </ul>
</body>
</html>

6.9.2 有序列表

有序列表： ol li

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>这是一个有序列表</h1>
    <ol>
        <li>这是有序列表一</li>
        <li>这是有序列表二</li>
        <li>这是有序列表三</li>
        <li>这是有序列表四</li>
    </ol>
</body>
</html>

同样我们想要修改列表前面的数字样式，可以通过type属性设置：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>这是一个有序列表</h1>
    <ol type="a">
        <li>这是有序列表一</li>
        <li>这是有序列表二</li>
        <li>这是有序列表三</li>
        <li>这是有序列表四</li>
    </ol>
    <ol type="A">
        <li>这是有序列表一</li>
        <li>这是有序列表二</li>
        <li>这是有序列表三</li>
        <li>这是有序列表四</li>
    </ol>
    <ol type="i">
        <li>这是有序列表一</li>
        <li>这是有序列表二</li>
        <li>这是有序列表三</li>
        <li>这是有序列表四</li>
    </ol>
    <ol type="I">
        <li>这是有序列表一</li>
        <li>这是有序列表二</li>
        <li>这是有序列表三</li>
        <li>这是有序列表四</li>
    </ol>
    <ol type="1">
        <li>这是有序列表一</li>
        <li>这是有序列表二</li>
        <li>这是有序列表三</li>
        <li>这是有序列表四</li>
    </ol>
</body>
</html>

也可以修改起始的序号值，比如从2开始计数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>这是一个有序列表</h1>
    <ol type="a" start="2">
        <li>这是有序列表一</li>
        <li>这是有序列表二</li>
        <li>这是有序列表三</li>
        <li>这是有序列表四</li>
    </ol>
</body>
</html>

6.9.3 自定义列表

自定义列表：dl (总标签) dt (小标题) dd (围绕标题来说明) 上面有个小标题, 下面有几个围绕着标题来展开的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>这是一个自定义列表</h1>
    <dl>
        <dt> 自定义列表显示内容
            <dd>自定义列表内容一</dd>
            <dd>自定义列表内容一</dd>
            <dd>自定义列表内容一</dd>
        </dt>
    </dl>
</body>
</html>

注意事项：

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

6.10 表单标签

表单是让用户输入信息的重要途径。 用表单标签来完成与服务器的一次交互。将前端填写的数据提交给服务器。

分成两个部分:

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

6.10.1 form标签

<form action="test.html">

   ... [form 的内容]

</form>

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

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

6.10.2 input标签

各种输入控件, 单行文本框, 按钮, 单选框, 复选框。

type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等。
name: 给 input 起了个名字. 尤其是对于单选按钮, 具有相同的 name 才能多选一。
value: input 中的默认值。
checked: 默认被选中。(用于单选按钮和多选按钮)
maxlength: 设定最大长度。

文本框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="">
        姓名<input type="text">
    </form>
</body>
</html>

密码框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="">
        姓名<input type="text">
        <br>
        密码<input type="password">
    </form>
</body>
</html>

单选框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="">
        姓名<input type="text">
        <br>
        密码<input type="password">
        <br>
        性别<input type="radio" name="gender">男
        <input type="radio" name="gender" checked="checked">女
    </form>
</body>
</html>

注意: 单选框之间必须具备相同的 name 属性, 才能实现多选一效果。

checked表示默认性别为女。

如果我们两个都加上checked呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="">
        姓名<input type="text">
        <br>
        密码<input type="password">
        <br>
        性别<input type="radio" name="gender" checked="checked">男
        <input type="radio" name="gender" checked="checked">女
    </form>
</body>
</html>

这个就根据实际浏览器自己去实现甄别。

复选框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="">
        姓名<input type="text">
        <br>
        密码<input type="password">
        <br>
        性别<input type="radio" name="gender" checked="checked">男
        <input type="radio" name="gender" checked="checked">女
        <br>
        爱好<input type="checkbox">吃饭
        <input type="checkbox">睡觉
        <input type="checkbox">玩游戏
    </form>
</body>
</html>

普通按钮：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="">
        姓名<input type="text">
        <br>
        密码<input type="password">
        <br>
        性别<input type="radio" name="gender" checked="checked">男
        <input type="radio" name="gender" checked="checked">女
        <br>
        爱好<input type="checkbox">吃饭
        <input type="checkbox">睡觉
        <input type="checkbox">玩游戏
        <br>
        <input type="button" value="这是一个普通按钮" onclick="alert('hello')">
    </form>
</body>
</html>

提交按钮：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="https://blog.csdn.net/weixin_75172965?type=blog">
        课程：<input type="text" name="course">
        <input type="submit">
    </form>
</body>
</html>

提交之后，就会跳转到博客主页：

清空按钮：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="https://blog.csdn.net/weixin_75172965?type=blog">
        课程：<input type="text" name="course">
        <input type="submit">
        <input type="reset">
    </form>
</body>
</html>

点击重置之后，就会清空输入内容：

选择文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="https://blog.csdn.net/weixin_75172965?type=blog">
        课程：<input type="text" name="course">
        <input type="submit">
        <input type="reset">
        <input type="file">
    </form>
</body>
</html>

点击选择文件之后，会弹出文件管理器页面选择文件：

任意点击一个文件之后，会显示：

6.11 label标签

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

for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应。(此时点击才是有用的)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="radio" name="sex">男
    <input type="radio" name="sex">女
</body>
</html>

但是这样是不能通过点击汉字“男”或者“女”来选择的，所以用上label标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <label for="male">男</label>
    <input type="radio" name="sex" id="male">
    <label for="female">女</label>
    <input type="radio" name="sex" id="female">
</body>
</html>

6.12 select标签

下拉菜单选择。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <label for="male">男</label>
    <input type="radio" name="sex" id="male">
    <label for="female">女</label>
    <input type="radio" name="sex" id="female">
    <select name="" id="">
        <option value="">--请选择年份--</option>
        <option value="" selected="selected">--2000--</option>
        <option value="">--2001--</option>
        <option value="">--2002--</option>
        <option value="">--2003--</option>
    </select>
</body>
</html>

selected="selected"表示默认选择的。

6.13 textarea标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <label for="male">男</label>
    <input type="radio" name="sex" id="male">
    <label for="female">女</label>
    <input type="radio" name="sex" id="female">
    <select name="" id="">
        <option value="">--请选择年份--</option>
        <option value="" selected="selected">--2000--</option>
        <option value="">--2001--</option>
        <option value="">--2002--</option>
        <option value="">--2003--</option>
    </select>
    <textarea name="" id="" cols="20" rows="10"></textarea>
</body>
</html>

超过10行之后会出现滚轮（红色方框内）。

6.14 无语义标签：div & span

无语义标签没有固定的用途，拿着这个标签啥都可以做。

div标签：division的缩写，含义是分割。 span标签：含义是跨度。

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

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

div里面可以嵌套div，span以及之前的标题，段落标签等等有具体用途的标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        <div>
            <span>吃饭</span>
            <span>睡觉</span>
            <span>打游戏</span>
            <span>看书</span>
        </div>
        <div>
            <div>吃饭</div>
            <div>睡觉</div>
            <div>打游戏</div>
            <div>看书</div>
        </div>
    </div>
</body>
</html>

七. 综合示例：展示简历信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>小灵蛇</h1>
    <div>
        <h2>基本信息</h2>
        <img src="https://c-ssl.duitang.com/uploads/item/201910/05/20191005000222_tmgxw.jpg" alt="" width="200" height="200">
        
        <span><p>求职意向:C++开发</p></span>
        <span><p>联系电话:xxx-xxxx-xxxx</p></span>
        <span><p>邮箱:xxx@163.com</p></span>
        <span><p><a href="https://blog.csdn.net/weixin_75172965?type=blog">我的博客</a></p></span>
        <span><p><a href="https://gitee.com/">我的Gitee</a></p></span>
    </div>
    <div>
        <h2>教育背景</h2>
        <ol>
            <li>xxxx-xxxx 小学</li>
            <li>xxxx-xxxx 初中</li>
            <li>xxxx-xxxx 高中</li>
            <li>xxxx-xxxx 大学</li>
        </ol>
    </div>
    <div>
        <h2>专业技能</h2>
        <ul>
            <li>掌握C++编程</li>
            <li>掌握Linux平台编程</li>
            <li>掌握前端相关技能：html，css，JavaScript</li>
        </ul>
    </div>
    <div>
        <h2>个人项目</h2>
        <ol>
            <h3><li>留言墙</li></h3>
            <p>开发时间：2024年4月~2024年5月</p>
            <p>功能介绍：</p>
            <ul>
                <li>支持留言发布</li>
                <li>支持匿名留言</li>
            </ul>
        </ol>
        <ol>
            <h3><li>学习小助手</li></h3>
            <p>开发时间：2024年5月~2024年6月</p>
            <p>功能介绍：</p>
            <ul>
                <li>错词检测</li>
                <li>支持同学探讨</li>
            </ul>
        </ol>
    </div>
    <div>
        <h2>个人评价</h2>
        <p>热爱生活，热爱编程</p>
    </div>
</body>
</html>

八. 综合示例：填写简历信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <table>
        <thead><h3>请填写简历信息</h3></thead>
        <tr>
            <td>
                <label for="name">姓名</label>
            </td>
            <td><input type="text" name="" id="name"></td>
        </tr>
        <tr>
            <td>
                性别
            </td>
            <td>
                <input type="radio" name="sex" id="male" checked="checked">
                <label for="male">
                    <img src="../male.png" alt="" width="20" height="20">男
                </label>
                <input type="radio" name="sex" id="female">
                <label for="female">
                    <img src="../female.png" alt="" width="20" height="20">女
                </label>
            </td>
        </tr>
        <tr>
            <td>出生日期</td>
            <td>
                <select name="" id="">
                    <option value="">--请选择年份--</option>
                    <option value="">--2000--</option>
                    <option value="">--2001--</option>
                    <option value="">--2002--</option>
                    <option value="">--2003--</option>
                    <option value="">--2004--</option>
                </select>
                <select name="" id="">
                    <option value="">--请选择月份--</option>
                    <option value="">--1--</option>
                    <option value="">--2--</option>
                    <option value="">--3--</option>
                    <option value="">--4--</option>
                    <option value="">--5--</option>
                    <option value="">--6--</option>
                    <option value="">--7--</option>
                    <option value="">--8--</option>
                    <option value="">--9--</option>
                    <option value="">--10--</option>
                    <option value="">--11--</option>
                    <option value="">--12--</option>
                </select>
                <select name="" id="">
                    <option value="">--请选择日期--</option>
                    <option value="">--1--</option>
                    <option value="">--2--</option>
                    <option value="">--3--</option>
                    <option value="">--4--</option>
                    <option value="">--6--</option>
                    <option value="">--7--</option>
                    <option value="">--8--</option>
                    <option value="">--9--</option>
                    <option value="">--10--</option>
                    <option value="">--11--</option>
                    <option value="">--12--</option>
                    <option value="">--13--</option>
                    <option value="">--14--</option>
                    <option value="">--15--</option>
                    <option value="">--16--</option>
                    <option value="">--17--</option>
                    <option value="">--18--</option>
                    <option value="">--19--</option>
                    <option value="">--20--</option>
                    <option value="">--21--</option>
                    <option value="">--22--</option>
                    <option value="">--23--</option>
                    <option value="">--24--</option>
                    <option value="">--25--</option>
                    <option value="">--26--</option>
                    <option value="">--27--</option>
                    <option value="">--28--</option>
                    <option value="">--29--</option>
                    <option value="">--30--</option>
                    <option value="">--31--</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <label for="school">就读学校</label>
            </td>
            <td>
                <input type="text" id="school">
            </td>
        </tr>
        <tr>
            <td>应聘岗位</td>
            <td>
                <input type="checkbox" name="" id="fe">
                <label for="fe">前端开发</label>
                <input type="checkbox" name="" id="server">
                <label for="server">后端开发</label>
                <input type="checkbox" name="" id="test">
                <label for="test">测试开发</label>
                <input type="checkbox" name="" id="yunwei">
                <label for="yunwei">运维开发</label>
            </td>
        </tr>
        <tr>
            <td>掌握的技能</td>
            <td>
                <textarea name="" id="" cols="30" rows="20"></textarea>
            </td>
        </tr>
        <tr>
            <td>项目经历</td>
            <td>
                <textarea name="" id="" cols="30" rows="20"></textarea>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="checkbox" id="read">
                <label for="read">我已仔细阅读公司的招聘要求</label>
            </td>
        </tr>
        <tr>
            <td></td>
            <td><a href="#">查看我的状态</a></td>
        </tr>
        <tr>
            <td></td>
            <td><h3>请应聘者确认</h3></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <ul>
                    <li>以上信息有效</li>
                    <li>可以尽早去到公司实习</li>
                    <li>可以接受公司加班文化</li>
                </ul>
            </td>
        </tr>
    </table>
</body>
</html>

九. Emmet快捷键

快速输入标签

input[tab]

快速输入多个标签

div*3[tab]

标签带id

div#sex[tab]

标签带类名

div.sex[tab]

标签带子元素

ul>li*3[tab]

标签带兄弟元素

span+span

标签带内容

div{hello}

标签带内容(带编号)

div{$.hello}

除此之外还有很多, 大家可以在使用中自己积累。

十. HTML特殊字符

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

空格：
小于号：<
大于号：>
按位与：&

上面最后的分号都不能省去。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>这里有四个空格    开始编写页面</p>
    <p>这里有四个空格&nbsp;&nbsp;&nbsp;&nbsp;开始编写页面</p>
    <p><>&</p>
    <p>&lt;&gt;&amp;</p>
</body>
</html>