二、HTML元素

国维
344 阅读20分钟

二、HTML元素

HTML元素本身很多，但是常用的元素就是那么几个。

2.1 <!DOCTYPE html>

HTML最上方的一段文本我们称之为 文档类型声明，用于声明文档类型

 <!DOCTYPE html>

HTML文档声明，告诉浏览器当前页面是HTML5页面；

让浏览器用HTML5的标准去解析识别内容；

必须放在HTML文档的最前面，不能省略，省略了会出现兼容性问题；

<html> 元素 表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素。

  • 所有其他元素必须是此元素的后代。
 <!DOCTYPE html>
 <html lang="en">
 </html>

W3C标准建议为html元素增加一个lang属性，作用是

  • 帮助语音合成工具确定要使用的发音;
  • 帮助翻译工具确定要使用的翻译规则;

比如常用的规则：

  • lang=“en”表示这个HTML文档的语言是英文；
  • lang=“zh-CN”表示这个HTML文档的语言是中文；

HTML head 元素 规定文档相关的配置信息（也称之为元数据）， 包括文档的标题，引用的文档样式和脚本等。

  • 什么是元数据（meta data），是描述数据的数据；
  • 这里我们可以理解成对整个页面的配置
 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
         button {
             border: 1px solid red;
         }
     </style>
 </head>
 </html>

常见的设置有哪些呢？一般会至少包含如下2个设置。

  • 网页的标题：title元素

  • 网页的编码：meta元素

    • 可以用于设置网页的字符编码，让浏览器更精准地显示每一个文字，不设置或者设置错误会导致乱码；
    • 一般都使用utf-8编码，涵盖了世界上几乎所有的文字；

body元素里面的内容将是你在浏览器窗口中看到的东西，也就是网页的具体内容和结构。

  • 之后学习的大部分HTML元素都是在body中编写呈现的；

2.2 <h1> - <h6>

在一个页面中通常会有一些比较重要的文字作为标题，这个时候我们可以使用h元素。

<h1>–<h6> 标题 (Heading) 元素呈现了六个不同的级别的标题

  • Heading是头部的意思，通常会用来做标题
  • <h1> 级别最高，而 <h6> 级别最低。

2.3 <p>

如果我们想表示一个段落，这个时候可以使用p元素。

HTML

元素（或者说 HTML 段落元素）表示文本的一个段落。

  • p元素是paragraph单词的缩写，是段落、分段的意思；
  • p元素多个段落之间会有一定的间距；

P元素里面不能嵌套div

2.4 <img>

<img> 元素将一份图像嵌入文档。

  • img是image单词的所以，是图像、图像的意思；

  • 事实上img是一个可替换元素（ replaced element ）；

    • 从服务器上请求到图片资源时，就会替换到文档中原来的img位置

关于img是替换性元素： img如果没有图片资源，也会占据一定位置，等到有图片了，再替换到文档中原来的img位置，它是可以替换的

 <p>哈哈哈哈</p> 
 <img  >
 <p>呵呵呵呵</p>

image-20220911005935590.png

img有两个常见的属性：

  • src属性：source单词的缩写，表示源

    • 是必须的，它包含了你想嵌入的图片的文件路径。

  • alt属性：不是强制性的，有两个作用

    • 作用一：当图片加载不成功（错误的地址或者图片资源不存在），那么会显示这段文本；
    • 作用二：屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义；

  • 某些其他属性目前已经不再使用

    • 比如width、height、border；

设置img的src时，需要给图片设置路径：

  • 网络图片：一个URL地址（后续会专门讲URL）；

    • 网络图片的设置非常简单，给一个地址即可；

  • 本地图片：本地电脑上的图片，后续会和html一起部署到服务；

本地图片的路径有两种方式 ：

  • 方式一：绝对路径（几乎不用）；

    • 从电脑的根目录开始一直找到资源的路径；

  • 方式二：相对路径（常用）；

    • 相当于当前文件的一个路径；
    • 代表当前文件夹（1个.），可以省略
    • .. 代表上级文件夹（2个.）

对于网页来说，不管什么操作系统（Windows、Mac、Linux），路径分隔符都是 /，而不是 \

2.5 <a>

HTML <a> 元素（或称锚（anchor）元素）：

  • 定义超链接，用于打开新的URL；

常见属性

a元素有两个常见的属性：

  • href：Hypertext Reference的简称

    • 指定要打开的URL地址；

       <a href="http://www.baidu.com" target="_blank">百度一下</a>

    • 也可以是一个本地地址；

       <a href="./test3.html" target="_self">百度一下</a>

  • target：该属性指定在何处显示链接的资源。

    • _self：默认值，在当前窗口打开URL；
    • _blank：在一个新的窗口中打开URL；
    • _parent：在父窗口中打开URL（不常用）；
    • top：在顶层窗口中打开URL（不常用）；

    下面记录下_parent和top的作用：

    新建两个htnl页面(如下)，打开test3.html后如下图，

    • 如果target="_blank"，则会在新的窗口下打开淘宝的网页；
    • 如果target="_self"，则会在当前窗口(iframe创建的文档)下打开淘宝的网页；
    • 如果target="_parent"，则会在父窗口中(test3.html创建的文档)打开淘宝的网页；
     <!-- test3.html网页 -->
 <iframe src="./test4.html" frameborder="1">进入淘宝</iframe>

     <!-- test4.html网页 -->
 <a href="http://www.taobao.com" target="_blank"></a>

    image-20220828110152137.png

  • 下面记录下target="_top"的作用，

    新建三个网页(如下)，然后打开test3.html，如下图

    • 如果target="_top"，则会在顶层窗口中(test3.html)打开淘宝的网页；
     <!-- test3.html网页 -->
 <iframe src="./test5.html" frameborder="1"></iframe>

     <!-- test5.html网页 -->
 <iframe src="./test4.html" frameborder="1"></iframe>

     <!-- test4.html网页 -->
 <a href="https://www.taobao.com" target="_top">进入淘宝</a>

    image-20220828113635664.png

锚点链接

锚点链接可以实现：跳转到网页中的具体位置

锚点链接有两个重要步骤：

  • 在要跳到的元素上定义一个id属性；

     <h1 id="theme01">主题一</h1>
 <!-- 很多<br/>用于拉开间距 -->
 <h1 id="theme02">主题二</h1>
 <h1 id="theme03">主题三</h1>

  • 定义a元素，并且a元素的href指向对应的id；

     <a href="#theme01">跳转到主题一</a>
 <a href="#theme02">跳转到主题二</a>
 <a href="#theme03">跳转到主题三</a>

图片链接

在很多网站我们会发现图片也是可以点击进行跳转的

  • img元素跟a元素一起使用，可以实现图片链接；

实现思路：

  • a元素中不存放文字，而是存放一个img元素；
  • 也就是img元素是a元素的内容；
 <a href="https://www.mi.com/xiaomimixfold2" target="_blank">
 <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/32a62196b9af47752c96e7a50c86417c.jpg?w=632&h=340" alt="小米手机" /> 
 </a>

其他URL地址

a元素除了用来跳转到新网页，也可以下载zip压缩包和发邮件

 <!-- 指向链接：zip压缩包 -->
 <a href="https://github.com/Pioneer-B/content-manage-system/archive/refs/heads/master.zip">下载zip包</a>
 <!-- 指向其他协议地址：mailto -->
 <a href="mailto:3506179093@qq.com">发邮件给3506179093@qq.com</a>

2.6 <iframe>

利用iframe元素可以实现：在一个HTML文档中嵌入其他HTML文档

frameborder属性

  • 用于规定是否显示边框

    • 1：显示
    • 0：不显示
 <iframe src="http://www.taobao.com" width="800px" height="600px" frameborder="0"></iframe>
 // 有些网站使用X-Frame-Options: SAMEORIGIN禁止用iframe进行访问，如小米，京东
 <iframe src="http://www.mi.com" width="800px" height="600px" frameborder="0"></iframe>

image-20220827233529498.png

2.7 <div> <span>

<div> 和<span>的区别

div元素和span元素都是 “纯粹的” 容器，也可以把他们理解成 “盒子” ，它们都是用来包裹内容的；

div元素： 多个div元素包裹的内容会在不同的行显示；

  • 一般作为其他元素的父容器，把其他元素包住，代表一个整体
  • 用于把网页分割为多个独立的部分

span元素： 多个span元素包裹的内容会在同一行显示；

  • 默认情况下，跟普通文本几乎没差别
  • 用于区分特殊文本和普通文本，比如用来显示一些关键字
 <style>
 .title {
   color: blue;
   font-size: 30px;
   font-weight: 700;
 }
 </style>
 ​
 <div>学习<span class="title">JavaScript</span>很重要，它包含了很多内容：bom、dom、函数等</div>

image-20220828123200675.png

div和span元素的历史

在HTML中有两个特殊的元素div元素、span元素：

  • div元素：division，分开、分配的意思；
  • span元素：跨域、涵盖的意思；

这两个元素有什么作用呢？无所用(可以什么都不用它)、无所不用(也可以什么都用它)。

产生的历史过程：

  1. 在网页的发展早期，只有HTML基本元素，还没有css，
  2. 那时候调整文本样式做法是：添加各种各样包含样式的HTML元素（通过语义化元素），
  3. 随着元素的增多，已经分不清哪些元素是用来搭建基本结构，哪些元素是用来添加样式，
  4. 然后就出现了css(当时也有其他办法添加样式，但最后css成为了一个标准，并被w3c接管)
  5. 出现结构样式分离后，反而从一个极端走向了另一个极端：既然css可以负责所有的样式，那<h1>的样式(文字变大、加粗、间距)还需要h1来负责吗？
  6. 这时候提供了div和span，不使用h1也可以达到对应的效果了，比如h1元素可以是一段普通的文本+CSS修饰样式
  7. 在很长一段时间，就成了div/span + css，而不是html+css，这种极端现象也不好，
  8. 渐渐的又开始回归到目前的状态：元素语义化，用最正确的标签做正确的事

所以，理论上来说：

  • 我们的页面可以没有div、span；
  • 我们的页面也可以全部都是div、span；

2.8 不常用元素

strong元素：内容加粗、强调；

  • 通常加粗会使用css样式来完成；
  • 开发中很偶尔会使用一下；

i元素： 内容倾斜；

  • 通常斜体会使用css样式来完成；
  • 开发中偶尔会用它来做字体图标（因为看起来像是icon的缩写）；

code元素： 用于显示代码

  • 偶尔会使用用来显示等宽字体；

br元素： 换行元素

  • 开发中已经不使用；

更多元素详解，查看MDN文档：

2.9 HTML全局属性

我们发现某些属性只能设置在特定的元素中：

  • 比如img元素的src、a元素的href；

也有一些属性是所有HTML都可以设置和拥有的，这样的属性我们称之为 “全局属性（Global Attributes）”

常见的全局属性如下：

  • id：定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。其目的是在链接（使用片段标识符），脚本或样式（使用 CSS）时标识元素。

  • class：一个以空格分隔的元素的类名（classes ）列表，它允许 CSS 和 Javascript 通过类选择器或者DOM方法来选择和访问特定的元素；

  • style：给元素添加内联样式；

  • title：包含表示与其所属元素相关信息的文本。 这些信息通常可以作为提示呈现给用户，但不是必须的。

     <div title="coderwhy">学习JavaScript</div>

    image-20220828133805604.png

2.10 字符实体

如下代码是如何被解析的呢？

 <span><hehehe</span>
  • 如果你使用小于号（<），浏览器会将其后的文本解析为一个tag。
  • 但是某些情况下，我们确实需要编写一个小于号（<）；
  • 这个时候我们就可以使用字符实体；
 <span>&lt;hehehe</span>

HTML 实体是一段以连字号（&）开头、以分号（;）结尾的文本（字符串）：

  • 实体常常用于显示保留字符（这些字符会被解析为 HTML 代码）和不可见的字符（如“不换行空格”）；
  • 你也可以用实体来代替其他难以用标准键盘键入的字符；

常见的字符实体

lt：less than gt：greater than

image-20220828195440368.png

Tips：

  1. 如果连续输入多个空格，会被浏览器解析成一个空格，想显示多个空格必须使用&nbsp;

image-20220911002401296.png

  1. 行内级元素之间的多个空格，会被解析成一个空格

image-20220911002741613.png

2.11 URL地址

认识URL

URL 代表着是统一资源定位符（Uniform Resource Locator ）

通俗点说：URL 无非就是一个给定的独特资源在 Web 上的地址。

  • 理论上说，每个有效的 URL 都指向一个唯一的资源；

  • 这个资源可以是一个 HTML 页面，一个 CSS 文档，一幅图像，等等；

    image-20220828202829315.png

URL的格式

URL的标准格式如下：

image-20220828201321207.png

image-20220828201333148.png

和URI的区别

和URI的区别：

  • URI = Uniform Resource Identifier 统一资源标志符， 用于标识 Web 技术使用的逻辑或物理资源。 ；
  • URL = Uniform Resource Locator 统一资源定位符， 俗称网络地址，相当于网络中的门牌号 ；

URI在某一个规则下能把一个资源独一无二的识别出来。

  • URL作为一个网络Web资源的地址，可以唯一将一个资源识别出来，所以URL是一个URI；
  • 所以URL是URI的一个子集；
  • 但是URI并不一定是URL

locators are also identifiers, so every URL is also a URI, but there are URIs which are not URLs.

2.12 元素的语义化

元素的语义化：用正确的元素做正确的事情。

  • 理论上来说，所有的HTML元素，我们都能实现相同的事情：
 <style>
 .title {
   display: block;
   font-size: 24px;
   font-weight: 700;
   margin: 20px 0;
 }
 </style>

 <h2>实现的标题h2</h2>
 <div class="title">实现的标题div</div>
 <span class="title">实现的标题span</span>

image-20220828221927973.png

标签语义化的好处

  1. 方便代码维护；
  2. 减少让开发者之间的沟通成本；
  3. 能让语音合成工具正确识别网页元素的用途，以便作出正确的反应；
  4. 有利于SEO；
  5. ......

2.13 SEO

搜索引擎优化（英语：search engine optimization，缩写为SEO）是通过了解搜索引擎的运作规则来调整网站，以及提高网站在有关搜索引擎内排名的方式。

image-20220828223959474.png

2.14 字符编码

计算机是干什么的?

  • 计算机一开始发明出来时是用来解决数字计算问题的，后来人们发现，计算机还可以做更多的事，例如文本处理。
  • 但计算机其实挺笨的，它只“认识”010110111000…这样由0和1两个数字组成的二进制数字；
  • 这是因为计算机的底层硬件实现就是用电路的开和闭两种状态来表示0和1两个数字的。
  • 因此，计算机只可以直接存储和处理二进制数字。

为了在计算机上也能表示、存储和处理像文字、符号等等之类的字符，就必须将这些字符转换成二进制数字。

  • 当然，肯定不是我们想怎么转换就怎么转换，否则就会造成同一段二进制数字在不同计算机上显示出来的字符不一样的情况，因此必须得定一个统一的、标准的转换规则

image-20220828234520567.png

字符编码的发展历史可以阅读简书一篇文章：www.jianshu.com/p/899e749be…

2.15 行内替换元素和 行内非替换元素

对于行内元素，又可以进一步分为可替换行内元素和不可替换行内元素

行内替换元素：

  • 替换元素是浏览器根据元素的 标签 和 属性 ，来决定元素的具体显示内容。 比如，只写一个 <img/> 标签，而不对齐添加属性，页面上是显示不出来任何东西的，只有往 <img/> 标签里面添加 src 属性，这时候页面上才能显示出你要的图片，src 不同，页面上显示出来的内容也就不同。又比如 <input/> 标签， value 属性不同，页面上所加载的内容也不相同。

行内非可替换元素：

  • 非替换元素，则不通过标签和属性，决定元素的具体显示内容。而是将标签所包围的具体内容告诉浏览器，并在页面上直接显示出来。 比如我们常用的 <span></span> 标签，浏览器直接会将 <span></span> 标签里面的东西显示出来，而不是通过属性。

2.16 正常文档流

正常文档流 指的是HTML文档元素在进行内容布局时所遵循的从左到右、从上到下的表现方式。这种文档流布局的方式对于某些语言可能会有所不同（比如从右往左阅读的语言）。HTML中的大多数元素都处在正常的文档流中，而一个元素要脱离正常流的唯一途径就是浮动或定位。

2.17 列表元素

列表的实现方式

事实上现在很多的列表功能采用了不同的方案来实现:

  • 方案一: 使用div元素来实现(比如汽车之家, 知乎上的很多列表)
  • 方案二: 使用列表元素, 使用元素语义化的方式实现;

事实上现在很多的网站对于列表元素没有很强烈的偏好, 更加不拘一格, 按照自己的风格来布局:

  • 原因是列表元素默认的CSS样式, 让它用起来不是非常方便;
  • 比如列表元素往往有很多的限制, ul/ol中只能存放li, li再存放其他元素, 默认样式等;
  • 虽然我们可以通过重置来解决, 但是我们更喜欢自由的div;

HTML提供了3组常用的用来展示列表的元素

  • 有序列表：ol、li
  • 无序列表：ul、li
  • 定义列表：dl、dt、dd

有序列表：ol – li

ol（ordered list）

  • 有序列表，直接子元素只能是li

li（list item）

  • 列表中的每一项

一般我们都不太喜欢浏览器内置的样式，所以我们都会进行重置：

  •    ol, li {
              padding: 0;
              margin: 0;
              list-style: none;
          }

    image-20221128011017708.png

无序列表：ul - li

ul（unordered list）

  • 无序列表，直接子元素只能是li

li（list item）

  • 列表中的每一项

如果不喜欢默认样式，可以用重置有序列表的方法来重置无序列表，通过对比有序和无序列表的ul属性，我们可以发现：有序列表和无序列表仅仅是list-style-type不一样，该属性还有很多值，大家可以自己试一试

image-20221128012303396.png

定义列表：dl – dt - dd

dl（definition list）

  • 定义列表，直接子元素只能是dt、dd

dt（definition term）

  • term是项的意思, 列表中每一项的项目名

dd（definition description）

  • 列表中每一项的具体描述，是对 dt 的描述、解释、补充
  • 一个dt后面一般紧跟着1个或者多个dd

一般也会对定义列表的样式进行重置：

  •    dl, dt, dd { padding: 0; margin: 0; }

image-20221128015043990.png

2.18 表格元素

表格常见元素

  • 表格：table
  • 表格中的行：tr(table row)
  • 行中的单元格：td(table data)

不难发现，最早的表格内容都用tr td展示，是不够语义化的，区分不出来头部和内容。所以w3c后面新建设了一些语义化的元素：

  • 表格的表头：thead，
  • 表头单元格：th(table head)
  • 表格的主体：tbody
  • 表格的页脚：tfoot
  • 表格的标题：caption
     <style>
         table { text-align: center; border-collapse: collapse; } 
         td ,th{ border: 1px solid #333; padding: 8px 16px; }
         table tbody tr:nth-child(1) { color: red; font-weight: 700; }
     </style>
     
     <table>
         <caption>热门股票</caption>
         <thead>
             <tr>
                 <th>排名</th>
                 <th>股票名称</th>
                 <th>股票代码</th> 
             </tr>
         </thead>
         <tbody>
             <tr>
                 <td>1</td>
                 <td>贵州茅台</td>
                 <td>600519</td> 
             </tr>  
         </tbody>
         <tfoot>
             <tr>
                 <td>其他</td>
                 <td>其他</td>
                 <td>其他</td> 
             </tr>
         </tfoot>
     </table>

table { border-collapse: collapse; }

合并单元格的边框：border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的

image-20221204154628598.png

单元格合并

 合并步骤：
   1.确定  "谁"  需要跨行或者跨列
   2.确定是跨"行"还是跨"列"
   3.跨几行或者几列

单元格合并分成两种情况:

  • 跨列合并: 使用colspan（column span）

    • 在最左边的单元格写上colspan属性, 并且省略掉合并的td;

  • 跨行合并: 使用rowspan

    • 在最上面的单元格协商rowspan属性, 并且省略掉后面tr中的td;

image-20221204172129841.png

2.19 表单元素

HTML表单元素是和用户交互的重要方式之一, 在很多网站都需要使用表单 :

常见的表单元素

form：表单, 一般情况下，其他表单相关元素都是它的后代元素

input：单行文本输入框、单选框、复选框、按钮等元素

textarea：多行文本框

select、option：下拉选择框

button：按钮

label：表单元素的标题

input元素的使用

image-20221204221040161.png

type类型的其他取值和input的其他属性, 查看文档：developer.mozilla.org/zh-CN/docs/…

布尔属性

常见的布尔属性有disabled、checked、readonly、

multiple(select选择框按住ctrl键可进行多选)、

autofocus(自动聚焦：页面刷新就会自动聚焦)、

selected(在select中，设置该属性的option会默认被选中)

布尔属性可以没有属性值，写上属性名就代表使用这个属性

  • 如果要给布尔属性设值，值就是属性名本身

    image-20221204221359998.png

表单按钮

表单可以实现按钮效果:

  • 普通按钮（type=button）：使用value属性设置按钮文字
  • 重置按钮（type=reset）：重置它所属form的所有表单元素（包括input、textarea、select）
  • 提交按钮（type=submit）：提交它所属form的表单数据给服务器（包括input、textarea、select）

image-20221204234805278.png

我们也可以通过按钮来实现:

image-20221204234834003.png

input和label的关系

label元素一般跟input配合使用，用来表示input的标题

labe可以跟某个input绑定，点击label就可以激活对应的input变成选中

label和input可以不用包裹，分开写。但一般我们都会用label包裹input，这样看起来更像一个整体

 <div>
   <label for="username"> 用户: </label>
   <input id="username" type="text">
 </div>
 <div>
   <label for="password"> 密码: 
       <input id="password" type="password">
   </label>
 </div>

radio和checkbox的使用

radio的使用

我们可以将type类型设置为radio变成单选框:

  • name值相同的radio才具备单选功能
 <!-- 在类型为radio的input中, 如果name一样, 那么两个radio就会互斥 -->
 <form action="/abc">
   <label for="male">
    <input id="male" type="radio" name="sex" value="male">男
   </label>
   <label for="female">
    <input id="female" type="radio" name="sex" value="female">女
   </label>
 ​
   <button type="submit">提交按钮</button>
 </form>

name和value的作用：

当我们选择女，点击提交时，name会作为key，value作为value，拼接到url请求路径上，发送给服务器

image-20221205003653751.png

checkbox的使用

我们可以将type类型设置为checkbox变成多选框:

  • 复选框的值都要提交到同一个字段，也就是key值要保持一致，即复选框的name都是相同的
 <form action="/cba">
   <div>
     您的爱好:
     <label for="basketball">
       <input id="basketball" type="checkbox" name="hobby" checked value="basketball">篮球
     </label>
     <label for="football">
       <input id="football" type="checkbox" name="hobby" value="football">足球
     </label>
   </div>
 ​
    <input type="submit">
 </form>

点击提交后，显示如下：

 http://127.0.0.1:5500/cba?hobby=basketball&hobby=football

textarea的使用

textarea的常用属性:

  • cols：列数，竖直方向的列数，相当于文本域的宽度
  • rows：行数，水平方向的行数，相当于文本域的高度
 <form action="">
   <label for="info">
     个人描述:
     <textarea name="info" id="info" cols="10" rows="6"></textarea>
   </label>
 </form>

文本域的右下角可以进行拖拽进行缩放，我们也可以通过resize来控制他

 <style>
   textarea {
     resize: vertical;
   }
 </style>

resize的属性值有：

  • 禁止缩放：resize: none;
  • 水平缩放：resize: horizontal;
  • 垂直缩放：resize: vertical;
  • 水平垂直缩放（默认值）：resize: both;

select和option的使用

option是select的子元素，一个option代表一个选项

select常用属性

  • multiple：可以多选
  • size：显示多少项

option常用属性

  • selected：默认被选中
 <form action="/abc">
   <select name="fruits" multiple size="2">
     <option value="apple">苹果</option>
     <option name="fruits value=" banana" selected>香蕉</option>
     <option value="orange">橘子</option>
   </select>
 ​
   <button type="submit">提交</button>
 </form>

假如按住ctrl键后选中苹果和香蕉时url显示如下：

 http://127.0.0.1:5500/abc?fruits=apple&fruits=banana

form常见的属性

form通常作为表单元素的父元素:

  • form可以将整个表单作为一个整体来进行操作;
  • 比如对整个表单进行重置;
  • 比如对整个表单的数据进行提交;

form常见的属性如下:

  • action：用于提交表单数据的请求URL
  • method：请求方法（get和post），默认是get
  • target：在什么地方打开URL（参考a元素的target）
 <form action="http://hongyuancoder.com/abc" method="get" target="_blank">
   <div>
     <label for="username">
       用户: <input id="username" type="text" name="username">
     </label>
   </div>
   <div>
     <label for="password">
       密码: <input id="password" type="password" name="password">
     </label>
   </div>
   <button type="reset">重置内容</button>
   <button type="submit">提交内容</button>
 </form>

模拟百度搜索的表单提交

 <form action="https://www.baidu.com/s" method="get" target="_blank">
   <input type="text" name="wd">
   <input type="submit" value="百度一下">
 </form>
avatar
文章
阅读
粉丝