编程技术

Document

网安向学习前端三剑客-HTML

前言

开这一系列主要是为了方便自己复习，也是为了给以后入坑的朋友们看一下学习路线。

本系列不仅有HTML，CSS，JavaScript，其中还会介绍jquery，json，ajax(通过xhr和jquery ajax讲解)和同源策略。

HTML基础

前置知识

在开始学习HTML之前，读者需要注意的以下几点：

  1. 本系列使用的工具是vscode，下载官网：https://code.visualstudio.com/。

  2. 使用vscode打开刚创建的HTML时，输入一个!，即可快速生成HTML骨架：
    在这里插入图片描述

    回车：
    在这里插入图片描述

  3. HTML章节中主要介绍下HTML常用标签，其中需要重点学习的是标签属性和表单标签。

  4. 本人常用以下两个网站进行查阅前端相关知识，读者可根据需要自行选择：

W3C：https://www.w3school.com.cn/
MDN：https://developer.mozilla.org/zh-CN/

网页的相关概念

网页
  1. 什么是网页？

网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。

网页是网站中的一"页"，通常是HTML格式的文件，它要通过浏览器进行阅读。

网页是构成网站的基本元素，它通常由图片，链接，文字，声音，视频等元素组成。通常我们看到的网页，常见以.htm或.html为后缀结尾的文件，因此将其俗称为html文件。

  1. 什么是html?

html指的是超文本标记语言(Hyper Text Markup Lanuage)，它是用来描述网页的一种语言。

HTML不是一种编程语言，而是一种标记语言(markup language)

标记语言是一套标记标签(markup tag)，所以超文本标记语言也可以称为超文本标签语言。

所谓超文本，有2层含义：

  1. 它可以加入图片，声音，动画，多媒体等内容(超越了文本限制)。
  2. 它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接(超级链接文本)。
  3. 网页的形成。

网页是由网页元素(图片，声音，动画，多媒体等)组成的，这些元素是利用HTML标签描述出来，然后通过浏览器解析来显示给用户。

网页生成制作过程：前端人员开发代码 —> 浏览器显示代码(解析，渲染) —> 生成最后的WEB页面

网页总结：

网页是由图片，链接，文字，声音，视频等元素组成，其实就是一个html文件(后缀名为html)

网页生成制作过程：由程序员书写HTML文件，然后浏览器打开，就能看到网页了。

HTML：超文本标记语言，用来制作网页的一门语言，由标签组成的，比如图片标签，链接标签，视频标签等

常用浏览器

网页是通过浏览器来展示的，关于浏览器需要介绍以下两点：

  1. 常用的浏览器

浏览器是网页显示、运行的平台。常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera等。平时称为五大浏览器。

tips:谷歌浏览器占了世界浏览器市场的一半份额。

  1. 浏览器内核

浏览器内核(渲染引擎)：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

目前一般国内的浏览器都会采用Webkit/Blink内核，如360，UC，QQ，搜狗等。

Web标准

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟)是国际最著名的标准化组织。

  1. 为什么需要WEB标准

浏览器不同，它们显示页面或者排版就有些许差异。

遵循Web标准除了可以让不同的开发人员写出的页面更标准，更统一外，还有以下优点：

(1) 让Web的发展前景更广阔
(2) 内容能被更广泛的设备访问
(3) 更容易被搜索引擎搜索
(4) 降低网站流量费用
(5) 使网站更易于维护
(6) 提高页面浏览速度

  1. Web标准的构成

主要包括结构(Structure)，表现(Presentation)和行为(Behavior)三个方面。

结构：结构用于对网页元素进行整理和分类，主要指的是HTML。
表现：表现用于设置网页元素的版式，颜色，大小等外观样式，主要指的是CSS。
行为：行为是指网页模型的类型及交互的编写，现阶段主要学的是javascript。

Web标准提出的最佳体验方案：结构，样式，行为相分离。

简单理解：结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中。

在这里插入图片描述

结构类似身体，表现类似外观装饰，行为类似行为动作。相比较中，三者中结构最重要。

HTML标签 上

HTML语法

(1) HTML语法规范

  • HTML标签是由尖括号包围的关键词，例如 <html>

  • HTML标签通常是成对出现的，例如 <html> </html>，我们称之为双标签。双标签中的第一个标签是开始标签，第二个标签是结束标签。
    在这里插入图片描述

  • 有些特殊的标签必须是单个标签(极少情况)，例如 <br />，我们称之为单标签。

tips：所有的标签都必须包含在尖括号里。

详细说明：
<html>这是一个标签。
在这里插入图片描述

<html></html>这是一对标签
在这里插入图片描述

前者称为开始标签，后者称为结束标签。唯一不同的是结束标签前面会多一个反斜杠。
成对出现的标签我们称之为双标签。
</br>
在这里插入图片描述

像这种标签我们称之为单标签，可以单独出现，没有结束标签。

(2) 标签关系

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

包含关系：一对标签包含另一对标签。

例如：

<html>
    <head></head>
</html>

在这里插入图片描述

html标签与head标签为包含关系。

并列关系：顾名思义，标签并列。

例如：

<head></head>
<body></body>

在这里插入图片描述

head标签与body标签为并列关系。

HTML基本结构

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

HTML页面也称为HTML文档。

HTML基本结构：

<html>
    <head>
        <title></title>
    </head>
    <body></body>
</html>

释意：

<html></html>

定义：HTML标签
说明：页面中最大的标签，通常称为根标签。

<head></head>

定义：文档的头部
说明：注意在head标签中我们必须要设置的标签是title标签，我们通常将head标签称为头标签。

<title></title>

定义：文档的标题
说明：让页面拥有一个属于自己的网页标题。

<body></body>

定义：文档的主体。
说明：页面内容基本都是放到body标签里的。

以百度为例：
在这里插入图片描述

HTML区域：
在这里插入图片描述

head区域：
在这里插入图片描述

title区域：
在这里插入图片描述

body区域：
在这里插入图片描述

HTML文件的后缀名必须是.htm或.html，浏览器的作用是读取HTML文档，并以网页的形式显示它们。

然后用浏览器打开这个页面，我们就可以浏览我们写的第一个HTML文件了。

vscode生成的骨架中的一些标签释意

在这里插入图片描述

<!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>

(1) <!DOCTYPE html>

这句代码的意思是：告诉浏览器当前页面是使用 HTML5 规范编写的。

tips:

  1. 所有 HTML 文档都必须以 <!DOCTYPE> 声明开始。
  2. 即使省略 DOCTYPE 元素，大多数浏览器仍能正确显示文档内容，只不过依赖浏览器的这种表现不是好习惯。
  3. 这个声明不是 HTML 标签，而是向浏览器提供有关所期望的文档类型的“信息”。出现在HTML标签内的才属于HTML标签。

(2) lang语言种类

<html lang="en">

lang是language的缩写。

这个代码用来定义当前文档的语言。例如chrome就是通过它来判断文档使用的是什么语言，从而来判断是否需要翻译给用户。

  1. en定义文档语言为英语
  2. zh-CN定义文档语言为中文

例如将语言设置为法语：
在这里插入图片描述

在这里插入图片描述

谷歌翻译就会以法语翻译为其他语言。

其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文。

(3) charset 字符集

<meta charset="UTF-8">

字符集(character set)是多个字符的集合，以便计算机能够识别和存储各种文字。
在 <head>标签内，可以通过 <meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。

charset常用的值有：GB2312(简体中文)，BIG5(繁体中文)，GBK(前两者的集合)和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。

注意：上面的语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用"UTF-8"编码，尽量统一写成标准的"UTF-8"，不要写成"utf8"或者"UTF8"。

一般乱码的情况都是因为没有定义字符集的原因。

HTML常用标签和一些前端必需知识

(1) 标签语义

学习标签是有技巧的，重点是记住每个标签的语义，简单理解就是指标签的含义，即这个标签是用来干嘛的。

根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。

(2) 标题标签

<h1>一级标题<h1>

为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的网页标题标签，即h1 - h6。

标题标签为双标签。

<h1> 一级标题示范 </h1>

在这里插入图片描述

标题标签中的h代表head，意为头部，标题。

标签语义：作为标题使用，并且依据重要性递减，例如 <h1>要比 <h2>字体更大更粗，依次递减。

特点：

  1. 加了标题标签的文字会变的加粗，并且依据重要性字体大号递减。
  2. 一个标题独占一行。

效果展示：
在这里插入图片描述

(3) 段落标签和换行标签

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在HTML标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落。

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

p就是单词paragraph的缩写，意为段落。

标签语义：可以把HTML文档分割为若干段落。

正常来说，直接把一段文字放入body中效果其实是放到一块了：
在这里插入图片描述

并且在html中无论写多少个连续的空格，效果显示出来的都是一个空格：
在这里插入图片描述

在这里插入图片描述

添加段落标签效果：
在这里插入图片描述

在这里插入图片描述

特点：

  1. 文本在一个段落中会根据浏览器窗口的大小自动换行。
  2. 段落和段落之间保有空隙。
    在这里插入图片描述

在HTML中，一个标签中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签 <br />

<br />

br即单词break的缩写，意为打断，换行。

效果：
在这里插入图片描述

在这里插入图片描述

标签语义：强制换行。

特点：

  1. br标签是个单标签。
  2. br标签只是简单地开始新的一行，跟段落标签不一样，段落之间会插入一些垂直的间距。

tip：
在H5新标准中，<br />换行标签可以不用加反斜杠：<br>

（4） 文本格式化标签

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

标签语义：突出重要性，比普通文字更重要。

加粗：<strong></strong>或者 <b></b>
说明：更推荐使用 <strong>标签加粗，语义更强烈。

倾斜：<em></em>或者 <i></i>
说明：更推荐使用 <em>标签加粗，语义更强烈。

删除线：<del></del>或者 <s></s>
说明：更推荐使用 <del>标签加粗，语义更强烈。

下划线：<ins></ins>或者 <u></u>
说明：更推荐使用 <ins>标签加粗，语义更强烈。

效果：
在这里插入图片描述

在这里插入图片描述

(5) <div>和 <span>标签

<div>和 <span>是没有语义的，它们就是一个盒子，用来装内容的。

<div>这是头部</div>
<span>今日价格</span>

div是division是缩写，表示分割，分区。span意为跨度，跨距。

  1. div标签用来布局居多，一行只能放一个div，可以比喻为一个大盒子。
    在这里插入图片描述

    在这里插入图片描述

  2. span标签也是用布局居多，一行上可以有多个span，可以比喻为一个小盒子。
    在这里插入图片描述

    在这里插入图片描述

  3. div和span标签都是用来作网页布局的。

tips：div标签会独占一行，一行可以放多个span标签。

(6) 图片标签

在HTML标签中，<img>标签用于定义HTML页面中的图像。

<img src="图像URL" />

img为单词image的缩写，意为图像。

img标签为单标签。

src是img标签的必需属性，它用于指定图像文件的路径和文件名。

所谓属性：简单理解就是属于这个标签的特性。

示例：

<img src="test.png">

在这里插入图片描述

图像标签的其他属性：
src：
属性值：图片路径
说明：必需属性

alt：
属性值：文本
说明：替换文本，图像不能显示时就显示它

title：
属性值：文本
说明：提示文本，鼠标放到图像上显示的文字

width：
属性值：像素
说明：设置图像的宽度

height：
属性值：像素
说明：设置图像的高度

border：
属性值：像素
说明：设置图像的边框粗细

例如设置width和height为50：
在这里插入图片描述

在这里插入图片描述

tips:

  1. 标签属性直接在标签后写就可以。
  2. 这些设定大小的属性的属性值单位是像素。
  3. 一般设定宽度和高度时，只需要设定一个即可，另外一个元素会跟着等比例缩放的。

标签属性的注意点：

  1. 标签可以拥有多个属性，必须写在标签名的后面。
  2. 属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开。
  3. 属性采取键值对的格式书写，即key="value"的格式，属性=“属性值”。

(7) 路径

路径可以分为：

相对路径
绝对路径

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。类似初中物理的相对位置。

简单来说就是，图片相对于目前正在编写的HTML页面的位置。

相对路径分类：

同一级路径：
说明：图像文件位于HTML文件同一级，如：<img src="test.png" />
在这里插入图片描述

下一级路径：
符号：/
说明：图像文件位于HTML文件下一级，如 <img src="img/test.png" />
在这里插入图片描述

在这里插入图片描述

上一级路径：
符号：…/
说明：图像文件位于HTML文件上一级，如 <img src="../test.png">
在这里插入图片描述

相对路径是从代码所在的这个文件出发，去寻找目标文件的，而我们这里所说的上一级，下一级和同一级都是图片相对于HTML页面的位置。

图片所在上一级引用示例：
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

绝对路径

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

例如：E:\Temp\TxGameDownload\MobileGamePCShared\test.png或者完整的网络地址：https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png

在这里插入图片描述

tips：
绝对路径和相对路径的符号是不一样的。

（8） 超链接标签

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

  1. 链接标签的语法格式
<a href="目标地址" target="目标窗口的弹出方式">文本或图像</a>

a为单词anchor的缩写，意为：锚

两个属性的作用：

href(必需属性)：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。

target：作用是用于指定链接页面的打开方式，其中_self为默认值，直接在本拆给你口打开目标链接，_blank为在新窗口中的打开方式。

在这里插入图片描述

  1. 链接的分类

外部链接：

例如：<a href="https://www.baidu.com">百度</a>

内部链接：

网页内部页面之间的相互链接，直接链接内部页面名称即可，例如 <a href="index.html">首页</a>

空链接：

如果当时没有确定好链接目标时，就可以这样写：<a href="#">首页</a>
在这里插入图片描述

点击以后地址后会多出一个#：
在这里插入图片描述

当然这个#是可以删除的，JS中会讲到。

下载链接：

如果href里面地址是一个文件或者压缩包，点击即可下载这个文件。
<a href="xxx.zip">下载</a>

网页元素链接：

在网页中的各种网页元素，如文本，图像，表格，音频，视频等都可以添加超链接。
例如：<a href="https://www.baidu.com"><img src="../test.png"></a>
在这里插入图片描述

锚点链接：

当我们点击链接时，可以快速定位到页面中的某个位置。目标位置标签需要填写id属性，id属性值要与锚点链接中的井号后的值一致。

例如：
在链接文本的href属性中，设置属性值为#名字的形式，如 <a href="#one">第一季</a>
找到目标位置标签，里面添加一个id属性等于刚才的属性值，如 <h3 id="one">第一季介绍</h3>
在这里插入图片描述

点击即可跳转到目标位置：
在这里插入图片描述

HTML中的注释和特殊字符

(1) 注释

如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。

HTML中的注释为：
<!---->
内容写在最中间处。

添加注释是为了更好地解释代码的功能，便于相关人员理解和阅读代码，程序是不会执行注释内容的。

(2) 特殊字符

在HTML中，一些特殊的字符很难或者不方便使用，例如空格，无论打多少个连续空格在HTML中都只会显示一个空格，此时我们就可以使用下面的字符来替代。

在这里插入图片描述

其中有三个字符需要记住：

空格符：&nbsp;
小于号：&lt;
大于号：&gt;

案例演示：

<p>我&nbsp;&nbsp;&nbsp;&nbsp;这里有四个空格，一个小于号&lt;和一个大于号&gt;</p>

在这里插入图片描述

在这里插入图片描述

使用这些特殊字符第一是为了避免HTML解析错误，例如上面的大于号小于号，一起写的话浏览器可能会输出，但是这不是一个好习惯，毕竟我们所有的标签都是以大于号和小于号进行闭合的，第二点就是空格，在HTML中无论输入多少个连续空格都只会输出一个空格，但是如果使用空格符浏览器就会渲染出来，即可实现输入多个空格。

HTML标签 下

表格文档

  1. 表格的主要作用

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

总结：表格不是用来布局页面的，而是用来展示数据的。

  1. 表格的基本语法
<table>
   <tr>
      <td>单元格内的文字</td>
   </tr>
</table>
  1. table标签是用于定义表格的标签。
  2. tr标签用于定义表格中的行，必须嵌套在table标签中。
  3. td标签用于定义表格中的单元格，必须嵌套在tr标签中。
  4. 字母td指表格数据（table data），即数据单元格的内容。

案例：

    <table>
        <tr>
            <td>123</td>
            <td>456</td>
            <td>789</td>
        </tr>
        <tr>
            <td>123</td>
            <td>456</td>
            <td>789</td>
        </tr>
    </table>

在这里插入图片描述

  1. 表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。

<th>标签表示HTML表格的表头部分(table head的缩写)

<table>
   <tr>
      <th>id</th>  <th>name</th>  <th>old</th> 
   </tr>
</table>

在这里插入图片描述

总结：表头单元格也是单元格，常用于表格第一行，突出重要性，表头单元格里面的文字会加粗居中显示。

  1. 表格属性

表格标签这部分属性在实际开发中并不常用，后面会通过CSS来设置。

align：
属性值：left,center,right
描述：规定表格相对周围元素的对齐方式。

border：
属性值：1或""
描述：规定表格单元是否拥有边框，不写默认为""，表示没有边框。

cellpadding：
属性值：像素值
描述：规定单元边沿与其内容之间的空白，默认1像素。
简单来说就是规定内容与旁边的边框相隔多少像素

cellspacing：
属性值：像素值
描述：规定单元格之间的空白，默认2像素
简单来说就是规定边框与边框之间相隔多少像素

width/height：
属性值：像素值或百分比
描述：规定表格的宽度/高度

在这里插入图片描述

tips：这些都是table标签的属性，所以这些属性都是放在table标签中的。

  1. 表格结构标签

使用场景：有时可能因为表格很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分。

在表格标签中，分别用<thead>标签，代表表格的头部区域，<tbody>标签，代表表格的主体区域，这样可以更好的分清表格结构。

总结：

  1. <thead>：用于定义表格的头部，一般将<th>标签放入thead标签中，thead标签内部必须拥有tr标签，一般位于第一行中。
  2. <tbody>：用于定义表格的主体，主要用于放数据本体。
  3. 以上标签都是放在<table>标签中。

案例：

    <table align="center">
        <thead>
            <tr>
                <th>id</th> <th>name</th>   <th>old</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>   <td>jack</td>   <td>12</td>
            </tr>
            <tr>
                <td>2</td>   <td>mike</td>   <td>21</td>
            </tr>
        </tbody>
    </table>

在这里插入图片描述

在这里插入图片描述

  1. 合并单元格

特殊情况下，可以把多个单元格合并为一个单元格。

(1) 合并单元格的方式

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

  • 跨列合并：colspan=“合并单元格”
    在这里插入图片描述

(2) 目标单元格

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

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

在这里插入图片描述

  1. 合并单元格的步骤

  • 先确定是跨行还是跨列合并

  • 找到目标单元格，写上合并方式=合并的单元格数量，比如：<td colspan="2"></td>

  • 删除多余的单元格

  1. 表格总结

(1) 表格的相关标签

<table></table>：表格标签。
<tr></tr>：行标签。
<td></td>：单元格标签。
<th></th>：表头单元格标签。
<thead></thead>：表格头部区域标签。
<tbody></tbody>：表格主体区域标签。

在这里插入图片描述

(2) 表格的相关属性

(3) 合并单元格

列表标签

表格是用来显示数据的，那么列表就是用来布局的。

列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。

根据使用情景不同，列表可以分为三大类：无序列表，有序列表和自定义列表。

在这里插入图片描述

无序列表

<ul>标签表示HTML页面中项目的无序列表，一般以项目符号呈现列表项，而列表项使用<li>标签定义。

无序列表的基本语法格式如下：

<ul>
   <li>列表项1</li>
   <li>列表项2</li>
   <li>列表项3</li>
   <li>列表项4</li>
</ul>

在这里插入图片描述

tips:

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

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。

在HTML标签中，ol标签用于定义有序列表，列表排序以数字来显示，并且使用li标签来定义列表项。

有序列表的基本语法格式如下：

<ol>
   <li>列表项1</li>
   <li>列表项2</li>
   <li>列表项3</li>
</ol>

在这里插入图片描述

tips:

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

自定义列表的使用场景：自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

在这里插入图片描述

在HTML标签中，dl标签用于定义描述列表(或定义列表)，该标签会与dt标签(定义项目/名字)和dd标签(描述每一个项目/名字)一起使用。

其基本语法如下：

<dl>
   <dt>名词1</dt>
   <dd>名词1解释1</dd>
   <dd>名词1解释2</dd>
</dl>

在这里插入图片描述

tips:

  1. dl标签里面只能包含dt和dd标签。
  2. dt标签和dd标签个数没有限制，经常是一个dt对应多个dd标签。
    在这里插入图片描述
  1. 列表总结

标签名：
<ul></ul>：无序列表
说明：里面只能包含li标签，没有顺序，使用较多，li标签里面可以包含任何标签。
<ol></ol>：有序列表
说明：里面只能包含li标签，有顺序，使用相对较少，li标签里面可以包含任何标签。
<dl></dl>：自定义列表
说明：里面只能包含dt和dd标签，dt和dd标签里面可以放任何标签。

表单标签

现实中的表单，就是去银行办理信用卡的单子：
在这里插入图片描述

网页中的表单展示：
在这里插入图片描述

  1. 为什么需要表单？

使用表单的目的是为了收集用户信息。

在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时就需要表单。

  1. 表单的组成

在HTML中，一个完整的表单通常由表单域，表单控件(也称表单元素)和提示信息3个部分构成。

在这里插入图片描述

tips：实现表单的作用也可以不写表单域，JavaScript也可实现登录，只不过这里指的是一个完整的表单。

表单域

表单域就是一个包含表单元素的区域。

在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递。

form标签会把它范围内的表单元素信息提交给服务器。

语法规范：

<form action="url地址" method="提交方式" name="表单域名称">
   各种表单元素控件
</form>

常用属性：

action：
属性值：url地址
作用：用于指定接受并处理表单数据的服务器程序的url地址。

method：
属性值：get/post
作用：用于设置表单数据的提交方式，其取值为get或post

name：
属性值：名称
作用：用于指定表单的名称，以区分同一个页面中的多个表单域。

总结：

  1. 在我们写表单元素之前，应该有个表单域把它们进行包含。
  2. 表单域就是form标签。

表单控件(表单元素)

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。

  1. input输入表单元素

在英文单词中，input是输入的意思，而在表单元素中<input>标签就是用于收集用户信息的。

在input标签中，会包含一个type属性，根据不同的type属性值，输入字段可以拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮和按钮等)

<input type="属性值" />

注意：

  1. input标签为单标签。
  2. type属性用来设置不同的属性值，以此用来指定不同的控件类型。

type属性的属性值及其描述如下：

button：定义可点击按钮(多数情况下，用于通过JavaScript启动脚本)

checkbox：定义复选框

file：定义输入字段和"浏览"按钮，供文件上传。

hidden：定义隐藏的输入字段。

image：定义图像形式的提交按钮。

password：定义密码字段，该字段中的字符被掩码。

radio：定义单选按钮。

reset：定义重置按钮，重置按钮会清除所在表单域的中的表单的所有数据。

submit：定义提交按钮，提交按钮会把表单数据发送到服务器。

text：定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符。

典型登录框：

    <form action="login.php" method="get">
        用户名：<input type="text" name="username">
        密码：<input type="password" name="password">
        <input type="submit" value="登录">
    </form>

在这里插入图片描述

name值为参数名：
在这里插入图片描述

在这里插入图片描述

checkbox复选框和radio单选框：

    <form action="regist.php" method="get">
        用户名：<input type="text" name="username">
        密码：<input type="password" name="password"> <br>
        性别：<input type="radio" name="sex" value="man">男 <input type="radio" name="sex" value="girl">女 <br>
        爱好：<input type="checkbox" name="favorite" value="programme"> 编程 <input type="checkbox" name="favorite" value="play"> 打游戏
        <input type="submit" value="注册">
    </form>

例如以上案例所给的代码，性别需要将name值统一起来，否则实现不了单选功能，其实不管是单选框还是复选框，只要是同一参数下都需要将name参数统一起来，这样便于后端识别数据。

value值在单选框和复选框中是必须的，用于识别选中的表单提交什么值。

提交效果：
在这里插入图片描述

在这里插入图片描述

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

name：
属性值：由用户自定义。
描述：定义input元素的名称

value：
属性值：由用户自定义
描述：规定input元素的值

checked：
属性值：checked
描述：规定此input元素加载时应当被选中

maxlength：
属性值：正整数
描述：规定输入字段中的字符的最大长度

上面已经讲过了name和value属性，下面讲一下checked和maxlength属性：

    <form action="regist.php" method="get">
        用户名：<input type="text" name="username" maxlength="5">
        密码：<input type="password" name="password"> <br>
        性别：<input type="radio" name="sex" value="man" checked="checked">男 <input type="radio" name="sex" value="girl">女 <br>
        爱好：<input type="checkbox" name="favorite" value="programme"> 编程 <input type="checkbox" name="favorite" value="play"> 打游戏
        <input type="submit" value="注册">
    </form>

效果为长度限制+进入页面直接选中：
在这里插入图片描述

在这里插入图片描述

tips:

checked属性主要针对的是单选框和复选框，其作用是一打开页面，就可以默认选中某个表单元素。
maxlength是用户可以在表单元素输入的最大字符数，一般较少使用。

type中的其他属性：

submit属性和reset属性:

    <form action="regist.php" method="get">
        用户名：<input type="text" name="username" maxlength="5">
        密码：<input type="password" name="password"> <br>
        性别：<input type="radio" name="sex" value="man" checked="checked">男 <input type="radio" name="sex" value="girl">女 <br>
        爱好：<input type="checkbox" name="favorite" value="programme"> 编程 <input type="checkbox" name="favorite" value="play"> 打游戏
        <input type="reset">
        <input type="submit">
    </form>

reset和submit默认值为重置和提交，可以通过设置value值属性更改。
在这里插入图片描述

在这里插入图片描述

tips：
submit是针对所处当前表单域中的所有数据进行提交的，如果submit不在当前表单域就不会提交该表单域的表单数据。reset同理。

  • file属性和button属性
    <form action="regist.php" method="get">
        用户名：<input type="text" name="username" maxlength="5">
        密码：<input type="password" name="password"> <br>
        性别：<input type="radio" name="sex" value="man" checked="checked">男 <input type="radio" name="sex" value="girl">女 <br>
        爱好：<input type="checkbox" name="favorite" value="programme"> 编程 <input type="checkbox" name="favorite" value="play"> 打游戏
        <br>
        上传头像：<input type="file">
        <br>
        验证码：<input type="text">
        <br>
        <input type="button" value="获取验证码">
        <br>
        <input type="reset" value="清除">
        <input type="submit" value="注册">
    </form>

在这里插入图片描述

label标签：<label>标签为input元素定义标注(标签)

label标签用于绑定一个表单元素，当点击label标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上，用来增加用户体验。

案例：

<label for="man">男</label>
<input type="radio" name="sex" id="man" />

input里的id属性是为了方便label标签里的for定位，两者搭配使用。

核心：label标签里的for属性应当与相关元素的id属性相同。

    <form action="regist.php" method="get">
        性别：<input type="radio" name="sex" value="man" checked="checked" id="man"><label for="man">男</label> 
        <input type="radio" name="sex" value="girl" id="girl"><label for="girl">女</label> <br>
    </form>

在这里插入图片描述

点击男或女时即可选中相对应的radio。

  1. select下拉表单元素

使用场景：在页面中，如果有多个选项供用户选择，并且想要节约页面空间时，我们可以使用<select>标签定义下拉列表。

语法：

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    ...
</select>

案例：

    <form action="regist.php" method="get">
        <select>
            <option value="hb" selected="selected">湖北</option>
            <option value="sd">山东</option>
            <option value="bj">北京</option>
            <option value="tj">天津</option>
        </select>
    </form>

在这里插入图片描述

value值是用于辨识选中的哪个值，提交的数据就是选中的option的value值。

其中，在option中定义的selected="selected"的意思是将当前选中的option改为默认项，当进入页面时自动选中该option。与input标签中的checked属性作用有异曲同工之妙。

tips：select标签中至少包含一对option标签。

  1. textarea文本域元素

使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时可以使用textarea标签。

在表单元素中，textarea标签用于定义多行文本输入的控件。

使用多行文本输入控件，可以输入更多的文字，该控件常用于留言板，评论。

语法：

<textarea rows="显示的行数" cols="每行中的字符数">
    文本内容
</textarea>

tips:

  1. 通过textarea标签可以轻松地创建多行文本输入框。
  2. cols和rows属性通常在实际开发中并不会使用，都是用CSS来改变大小的。

案例：

    <form action="regist.php" method="get">
        请输入相关信息：<textarea cols="3" rows="3">
        </textarea>
    </form>

在这里插入图片描述