HTML 基础知识

最新推荐文章于 2022-04-22 18:37:43 发布

ice61

最新推荐文章于 2022-04-22 18:37:43 发布

阅读量349

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/ice61/article/details/112369097

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

一、HTML 语法规范

1. 基本语法概述

HTML 标签是由尖括号包围的关键词，例如 <html> 。
HTML 标签通常是成对出现的，例如 <html> 和 </html> ，我们称为双标签,标签对中的第一个标签是开始标签，第二个标签是结束标签。
有些特殊的标签必须是单个标签（极少情况），例如 <br /> ，我们称为单标签。

2. 标签的关系

双标签关系可以分为两类：包含关系和并列关系

包含关系：

<!-- 这里 head 标签与 title 标签就是包含关系 -->
<head>
	<title> </title>
</head>

并列关系

<!-- 这里 head 标签与 body 标签就是并列关系 -->
<head> </head>	
<body> </body>

二、HTML 基本结构标签

1. 什么是基本结构标签？

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

标签名	定义	说明
`<html></html>`	HTML 标签	页面中最大的标签，我们称为根标签
`<head></head>`	文档的头部	注意在 head 标签中我们必须要设置的标签是 title
`<title></title>`	文档的标题	让页面拥有一个属于自己的网页标题
`<body></body>`	文档的主体	元素包含文档的所有内容，页面内容基本都是放到 body 里面的

代码、效果如下（示例）：

<html>
	<head>
	    <title>HTML基础知识</title>
	</head>
	<body>
	    学习HTML的第一天
	</body>
</html>

在这里插入图片描述

2. VSCode 生成骨架标签新增代码

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

（1）文档类型声明标签

<!DOCTYPE> 是文档类型声明标签，并不是 HTML 标签，作用就是告诉浏览器使用哪种 HTML 版本来显示网页。此标签必须位于文档中最前面的位置。<!DOCTYPE html> 表示当前页面采取的是 HTML5 版本来显示网页。

（2）lang 语言种类

用来定义当前文档显示的语言。如果是 en 定义语言为英文，如果是 zh-CN 定义语言为中文。简单来说,定义为 en 就是英文网页, 定义为 zh-CN 就是中文网页。然而，对于文档显示来说，定义成 en 的文档也可以显示中文，定义成 zh-CN 的文档也可以显示英文。这个属性对浏览器和搜索引擎(百度.谷歌等)来说还是有作用的，例如使用谷歌浏览器浏览英文页面时自动弹出的翻译窗口，就与此属性有关。

（3）字符集

首先，<meta> 标签可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。字符集（Character set）是多个字符的集合，以便计算机能够识别和存储各种文字。在 <head> 标签内，可以通过 <meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。charset 常用的值有：GB2312 、BIG5 、GBK 和 UTF-8 ，其中 UTF-8 也被称为万国码，基本包含了全世界所有国家需要用到的字符。我们必须要确定字符集的值，否则可能引起乱码的情况。一般情况下，统一使用 “UTF-8” 编码，尽量统一写成标准的 “UTF-8” ，不要写成 “utf8” 或 “UTF8” 。

三、路径

不同的操作系统，文件系统的结构往往也有所不同。本节与路径相关的内容均以下图为例进行讲解：
在这里插入图片描述

1. 相对路径

相对路径简单来说就是就是相对于自己的目标文件位置，大致可分为以下三种情况：

相对路径分类	符号	说明
同一级路径	`./` 或直接写相应的文件名	目标文件位于当前文件同一级
下一级路径	`/`	目标文件位于当前文件下一级
上一级路径	`../`	目标文件位于当前文件上一级

在 index.html 文件中使用相对路径引入对应图片（示例）：

引入 image0.jpg ：./image0.jpg 或 image0.jpg
引入 image1.jpg ：./images/image1.jpg 或 images/image1.jpg
引入 image3.jpg ：../学习资料/image3.jpg

2. 绝对路径

绝对路径是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。通常在项目开发中使用相对路径，因为不同主机的文件系统结构很难完全相同，使用绝对路径后在其他主机上可能无法找到对应的资源。
在 index.html 文件中使用绝对引入对应图片（示例），Windows 系统在绝对路径中使用的是反斜杠 \，其他大多数操作系统使用的是斜杠 /：

引入 image0.jpg ：F:\web\image0.jpg
引入 image1.jpg ：F:\web\images\image1.jpg
引入 image3.jpg ：F:\学习资料\image3.jpg
另外，如果希望引入互联网中的某个资源，使用绝对路径给出资源地址即可，如：https://pic2.zhimg.com/50/v2-75cb41eedfcc6ac2782233bd3b55f214_hd.jpg

四、HTML常用标签

1. 标题标签

HTML 提供了 6 个等级的网页标题，即 <h1> - <h6> ，重要性依次递减。加了标题的文字会加粗，字号也会变大，并且一个标题是独占一行的。
代码、效果如下（示例）：

<!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>
    <h1>一号标题</h1>
    <h2>二号标题</h2>
    <h3>三号标题</h3>
    <h4>四号标题</h4>
    <h5>五号标题</h5>
    <h6>六号标题</h6>
</body>

</html>

在这里插入图片描述

2. 段落标签

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。然而在 HTML 文件中，无论输入多少个空格或是换行，最终体现出来的都只是一个空格。因此在 HTML 标签中，<p> 标签专门用于定义段落，使用它可以将整个网页分为若干个段落，文本在一个段落中会根据浏览器窗口的大小自动换行，并且段落与段落之间会有空隙。
代码、效果如下（示例）：

<!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>
    <p>HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。</p>

    <p>自1990年以来，HTML就一直被用作WWW的信息表示语言，使用HTML描述的文件需要通过WWW浏览器显示出效果。HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将影像、声音、图片、文字动画、影视等内容显示出来。</p>
</body>

</html>

在这里插入图片描述

3. 换行标签

在网页中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签 <br /> 。这是一个单标签；并且它并不会像段落标签一样插入一些垂直的间距。

代码、效果如下（示例）：

<!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>
    HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。<br />HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言

</body>

</html>

在这里插入图片描述

4. 文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示。以下是几种常用的文本格式化标签：

作用	标签	说明
加粗	`<strong></strong>` 或 `<b></b>`	更推荐使用 `<strong></strong>`
倾斜	`<em></em>` 或 `<i></i>`	更推荐使用 `<em></em>`
删除线	`<del></del>` 或 `<s></s>`	更推荐使用 `<del></del>`
下划线	`<ins></ins>` 或 `<u></u>`	更推荐使用 `<ins></ins>`

代码、效果如下（示例）：

<!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>
    我是<strong>加粗</strong>的文字<br />
    我是<b>加粗</b>的文字<br />
    我是<em>倾斜</em>的文字<br />
    我是<i>倾斜</i>的文字<br />
    我是<del>有删除线</del>的文字<br />
    我是<s>有删除线</s>的文字<br />
    我是<ins>有下划线</ins>的文字<br />
    我是<u>有下划线</u>的文字<br />
</body>

</html>

在这里插入图片描述

5. <div> 和 <span> 标签

<div> 和 <span> 标签像是一个盒子，用来装载内容，灵活使用这两个标签可以更好地进行网页布局。其中，<div> 标签独占一行，而多个 <span> 标签不会独占一行。
代码、效果如下（示例）：

<!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>
    <div>我是div1号</div>
    <div>我是div2号</div>
    <span>我是span1号</span>
    <span>我是span2号</span>
</body>

</html>

在这里插入图片描述

6. 图像标签

在 HTML 标签中，<img> 标签用于定义 HTML 页面中的图像。其中 src 是 <img> 标签的必须属性（简单理解就是属于这个图像标签的特性），它用于指定图像文件的路径和文件名。图像标签的其他常用属性如下：

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能显示时出现的文字
title	文本	提示文本，鼠标放到图像上时出现的文字
wdith	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

其中，图像的边框及相关样式我们通常是通过 CSS 而不是 border 属性来进行设置；在设置图像的宽度和高度时，宽度和高度同时设置会严格限制图像的大小，只设置宽度和高度之一会使图像自动进行等比例缩放。另外，图像标签可以拥有多个属性，必须写在标签名的后面；属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开；属性采取键值对的格式，即 key = “value" 的格式，属性=“属性值”。
代码、效果如下（示例）：

<!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>
    <h4>图像标签的简单使用：</h4>
    <img src="great.jpg" />
    <h4>alt 属性的使用</h4>
    <img src="good.jpg" alt="杰尼龟表情包" />
    <h4>title 属性的使用</h4>
    <img src="great.jpg" title="杰尼龟表情包" />
    <h4>单独设定图像的宽度</h4>
    <img src="great.jpg" width="300px" />
    <h4>单独设定图像的高度</h4>
    <img src="great.jpg" height="400px" />
    <h4>同时设定宽度和高度</h4>
    <img src="great.jpg" width="300px" height="400px"/>
    <h4>使用 border 属性设置图像边框粗细</h4>    
    <img src="great.jpg" border="5px" />
</body>

</html>

在这里插入图片描述

7. 超链接标签

（1）超链接标签的作用

在 HTML 标签中，<a> 标签用于定义超链接，作用是从一个页面链接到另一个页面。

（2）常用属性

属性	作用
href	是必须属性。用于指定链接目标的 url 地址，当标签应用 href 属性时，就具有了超链接的功能
target	用于指定链接页面的打开方式。`_self` 为默认值表示在当前窗口中打开页面；`_blank` 表示在新窗口中打开页面

（3）链接分类

外部链接：例如 <a href="http://www.baidu.com">百度</a>
内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可。例如 <a href="index.html">首页</a>
空链接：如果当时没有确定链接目标时，可以暂时使用空链接。例如 <a href="#">首页</a>
下载链接：如果 href 里面的地址指向一个文件或者压缩包，那么点击链接会下载这个文件。例如 <a href="image.zip">下载图片</a>
网页元素链接：在网页中的各种元素，如文本、图像、表格、音频、视频等都可以添加超链接。例如 <a href="http://www.baidu.com"><img src="image.jpg" /></a>
锚点链接：点击链接，可以快速定位到当前页面的某个位置（效果类似于点击本文目录进行跳转）
- 在连接文本的 href 属性中，设置属性值为 #名字 的形式，如 <a href="#two">第二段</a>
- 找到目标位置标签，里面添加一个 id 属性为刚才的名字，如 <p id="two">第二段内容</p>

8. HTML 中的注释和特殊字符

（1）注释

如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。注释标签里面的内容是给开发人员看的，是为了更好地解释代码的功能，便于相关开发人员理解和阅读代码，程序是不会执行注释内容的。HTML 中的注释以  结束。如  在 VS Code 中我们可以使用快捷键 ctrl + / 来实现快速注释。

（2）特殊字符

在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符（只列出了少部分特殊字符）来替代。重点记住空格、大于号、小于号这三个，其余如果需要使用进行查阅即可。
在这里插入图片描述

五、表格

1. 表格的主要作用

表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。表格不是用来布局页面的，而是用来展示数据的。

2. 表格的部分常用标签

<table></table> 是用于定义表格的标签
<tr></tr> 标签用于定义表格中的行，必须嵌套在 <table></table> 标签中
<td></td> 标签用于定义表格中的单元格，必须嵌套在 <tr></tr> 标签中
<thead></thead> 用于定义表格的头部。<thead> 内部必须有 <tr> 标签，一般位于第一行。需放在 <table></table> 标签中
<tbody></tbody> 用于定义表格的主体，主要用于放数据本体。同样需要放在 <table></table> 标签中
<th></th> 标签是表头单元格标签，也是单元格。不过表头单元格标签通常用于表格第一行，突出重要性，表头单元格里面的文字会加粗居中显示
<caption></caption> 标签定义表格的标题，必须直接放到 <table></table> 标签后

代码、效果如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>learn</title>
</head>
<body>
    <table>
        <caption>前端技术学习</caption>
        <thead>
            <tr>
                <th>商品代号</th>
                <th>分类名</th>
                <th>单价</th>
                <th>产地</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>DBX-134</td>
                <td>电冰箱</td>
                <td>1456</td>
                <td>北京</td>
            </tr>
            <tr>
                <td>DSJ-120</td>
                <td>电视机</td>
                <td>1865</td>
                <td>南京</td>
            </tr>
            <tr>
                <td>KTQ-12</td>
                <td>空调器</td>
                <td>2800</td>
                <td>无锡</td>
            </tr>
            <tr>
                <td>XYJ-13</td>
                <td>微波炉</td>
                <td>640</td>
                <td>青岛</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

在这里插入图片描述

3. 表格的部分属性

以下属性仅做了解即可，后期通常使用 CSS 而不是表格属性来对表格样式进行设置。另外，这些属性必须写在 <table></table> 标签里面

属性名	属性值	描述
align	left 、center 、right	规定表格相对周围元素的对齐方式
border	1 或 “”	规定表格单元是否拥有边框，默认为 “” ，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认 1 像素
cellspacing	像素值	规定单元格之间的空白，默认为 2 像素
width	像素值或百分比	规定表格的宽度
height	像素值或百分比	规定表格的高度

代码、效果如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>learn</title>
</head>
<body>
    <table border="1" cellpadding="0" cellspacing="1" width="500" height="300">
        <caption>前端技术学习</caption>
        <thead>
            <tr>
                <th>商品代号</th>
                <th>分类名</th>
                <th>单价</th>
                <th>产地</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>DBX-134</td>
                <td>电冰箱</td>
                <td>1456</td>
                <td>北京</td>
            </tr>
            <tr>
                <td>DSJ-120</td>
                <td>电视机</td>
                <td>1865</td>
                <td>南京</td>
            </tr>
            <tr>
                <td>KTQ-12</td>
                <td>空调器</td>
                <td>2800</td>
                <td>无锡</td>
            </tr>
            <tr>
                <td>XYJ-13</td>
                <td>微波炉</td>
                <td>640</td>
                <td>青岛</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

在这里插入图片描述

4. 合并单元格

（1）合并单元格方式

跨行合并：rowspan = “合并单元格的个数”
跨列合并：colspan = “合并单元格的个数”

在这里插入图片描述

（2）目标单元格

跨行：最上侧单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码

在这里插入图片描述

（3）合并单元格的步骤

先确定是跨行还是跨列合并
找到目标单元格，写上合并方式 = 合并的单元格数量
删除多余的单元格，这里多余的单元格是指被目标单元格合并了的单元格

代码、效果如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>learn</title>
</head>
<body>
    <table border="1" cellspacing="0" width="500" height="300">
            <tr>
                <th></th>
                <th colspan="2"></th>
                <!-- <th></th> -->
            </tr>
            <tr>
                <td rowspan="2"></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <!-- <td></td> -->
                <td></td>
                <td></td>
            </tr>
            
    </table>
</body>
</html>

在这里插入图片描述

六、列表

1. 列表的作用

与表格不同，列表主要用来布局。列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。

2. 三类列表

（1）无序列表

<ul> 标签表示 HTML 页面中的无序列表，一般会以符号呈现列表项，列表项使用 <li> 定义，注意事项如下：

无序列表的各个列表项之间没有顺序级别之分，是并列的
<ul></ul> 中只能嵌套 <li></li> ，直接在 <ul></ul> 标签中输入其他标签或者文字的做法是不被允许的
<li> 与 </li> 之间相当于一个容器，可以容纳所有元素
无序列表会带有自己的样式属性，但在实际使用时，通常会使用 CSS 来设置

代码、效果如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>learn</title>
</head>
<body>
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ul>
</body>
</html>

在这里插入图片描述

（2）有序列表

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。在 HTML 标签中，<ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用 <li> 标签来定义列表项，注意事项如下：

<ol></ol> 中只能嵌套 <li></li> ，直接在 <ol></ol> 标签中输入其他标签或者文字的做法是不被允许的
<li> 与 </li> 之间相当于一个容器，可以容纳所有元素
有序列表会带有自己样式属性，但在实际使用时，通常会使用 CSS 来设置

代码、效果如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>learn</title>
</head>
<body>
    <ol>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ol>
</body>
</html>

在这里插入图片描述

（3）自定义列表

在 HTML 标签中，<dl> 标签用于定义列表，该标签会与 <dt>（定义小标题）和 <dd>（定义列表项）一起使用，注意事项如下：

<dl></dl> 里面只能包含 <dt> 和 <dd>
<dt> 和 <dd> 个数没有限制，经常是一个 <dt> 对应多个 <dd>

代码、效果如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>learn</title>
</head>
<body>
    <dl>
        <dt>小标题一</dt>
        <dd>列表项1</dd>
        <dd>列表项2</dd>
        <dd>列表项3</dd>
        <dt>小标题二</dt>
        <dd>列表项1</dd>
        <dd>列表项2</dd>
        <dd>列表项3</dd>
    </dl>
</body>
</html>

在这里插入图片描述

七、表单

1. 表单的组成

在 HTML 中，一个完整的表单通常由表单域、表单控件（表单元素）、提示信息三个部分构成。
在这里插入图片描述

2. 表单域

表单域是一个包含表单元素的区域。在 HTML 中，<form> 标签用于定义表单域，以实现用户信息的收集和传递。<form> 标签会把其范围内的表单元素信息提交给服务器，其部分常用属性如下：

属性	属性值	作用
action	url 地址	用于指定接收并处理表单数据的服务器程序的 url 地址
method	get / post	用于设置表单数据的提交方式，其取值为 get 或 post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

3. 表单元素

（1）<input> 表单元素

<input> 标签是一个单标签，其中包含一个 type 属性，根据不同的 type 值，输入字段拥有很多形式（文本字段、复选框、单选按钮等），type 属性的常用属性值及描述如下：

属性值	描述
button	定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）
checkbox	定义复选框
file	定义输入字段，用于上传文件
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮，重置按钮会清除表单中的所有数据
submit	定义提交按钮，提交按钮会把表单数据发送到服务器
text	定义单行的输入字段，用户可在其中输入文本，默认宽度为 20 个字符

除 type 属性外，<input> 标签还有其他很多属性，其常用属性如下：

属性	属性值	描述
name	由用户自定义	定义 input 元素的名称
value	由用户自定义	定义 input 元素的值
checked	checked	规定此 input 元素首次加载时应当被选中
maxlength	正整数	规定输入字段的字符的最大长度

name 和 value 是每个表单元素都有的属性值，主要给后台人员使用。当页面中有许多表单元素时，可以通过 name 属性来区别不同的表单元素；如果希望部分表单元素在页面刚打开时就默认显示数个文字，可以通过设置 value 属性来实现
通过 name 属性可以设置表单元素的名字，在使用单选按钮或复选框时，选项必须具有相同的 name 值
checked 属性主要针对于单按钮和复选框，主要作用是在页面刚打开时，就默认选中某个表单元素
maxlength 是用户可以在表单元素输入的最大字符数，一般较少使用

代码、效果如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>learn</title>
</head>
<body>
    <form action="xxx.jsp" method="GET" name="myForm">
        用户名：<input type="text" name="username" value="请输入用户名" maxlength="6" /> 
        <br />
        密 码：<input type="password" name="pwd" /> <br />
        性别：男<input type="radio" name="sex" value="man" /> 
              女<input type="radio" name="sex" value="woman" /> <br />
        爱好：读书<input type="checkbox" name="hobby" value="read" checked="checked"/>
              睡觉<input type="checkbox" name="hobby" value="sleep" />
              吃饭<input type="checkbox" name="hobby" value="eat" /> <br />
        <input type="submit" value="免费注册" />
        <input type="reset" value="重新填写" />
        <input type="button" value="普通按钮" />
    </form>
</body>
</html>

在这里插入图片描述

（2）<select> 表单元素

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用 <select> 标签控件定义下拉列表。注意，<select> 标签中至少包含一对 <option> 标签作为选项；当 <option> 标签的 selected 属性值为 selected 时，当前项为默认选中项。实际开发过程中，还需要为每对 <option> 标签设置 value 值，便于后台使用。
代码、效果如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>learn</title>
</head>
<body>
    <form action="xxx.jsp" method="GET" name="myForm">
        <select name="fruit">
            <option value="apple">苹果</option>
            <option value="banana">香蕉</option>
            <option value="orange" selected="selected">橙子</option>
            <option value="strawberry">草莓</option>
          </select>
    </form>
</body>
</html>

在这里插入图片描述

（3）<textarea> 表单元素

当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 <textarea> 标签。在表单元素中，<textarea> 标签是用于定义多行文本输入的控件。使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。我们可以通过 cols 和 rows 属性来分别指定文本框中每行的字数和显示的行数（超过显示行数会出现滚动条），实际开发中并不直接使用这两个属性来设置样式，而是通过 CSS 来进行设置。

代码、效果如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>learn</title>
</head>
<body>
    <form action="xxx.jsp" method="GET" name="myForm">
        <!-- 图片中的文字需要自行输入 -->
        <textarea rows="5" cols="25"></textarea>
    </form>
</body>
</html>

在这里插入图片描述

（4）<label> 标签

<label> 标签可以为 input 元素定义标注。使用 <label> 标签绑定一个表单元素后，当点击 <label> 标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择到对应的表单元素上，用来提高用户体验。<label> 标签的 for 属性应当与相关元素的 id 属性相同。
代码、效果如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>learn</title>
</head>
<body>
    <form action="xxx.jsp" method="GET" name="myForm">
        <label for="username">用户名：</label>
        <input type="text" name="username" id="username"/> 
        <br />
        性别：
        <label for="man">男</label>
        <input type="radio" name="sex" value="man" id="man"/> 
        <label for="woman">女</label>
        <input type="radio" name="sex" value="woman" id="woman"/> <br />
    </form>
</body>
</html>

在这里插入图片描述

总结

以上就是今天要讲的内容，本文仅仅简单介绍了 HTML 基础知识。如有不当之处，还请多多指教！

ice61

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML 基础知识

文章目录HTML语法规范基本语法概述标签的关系HTML基本结构标签VSCode生成骨架标签新增代码文档类型声明标签lang语言种类字符集HTML常用标签标题标签HTML语法规范基本语法概述HTML 标签是由尖括号包围的关键词，例如 <html>。HTML 标签通常是成对出现的，例如 <html> 和 </html> ，我们称为双标签,标签对中的第一个标签是开始标签，第二个标签是结束标签。有些特殊的标签必须是单个标签（极少情况），例如 <br />，
复制链接

扫一扫