web前端开发之HTML

置顶胡小七

已于 2023-02-01 12:54:48 修改

阅读量3.1k

点赞数 2

分类专栏： HTML 文章标签：前端 html 1024程序员节

于 2022-06-07 13:38:53 首次发布

本文链接：https://blog.youkuaiyun.com/hu0708/article/details/125163593

版权

HTML 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了HTML的基础知识，包括HTML的结构、标签、元素、属性、版本、浏览器兼容性和网页结构。还讲解了HTML的头部信息如meta标签、title标签、link标签等的使用。此外，还涵盖了HTML中的表格、列表、表单、图像、链接等元素的创建和应用，以及HTML5的新特性，如video和audio标签。内容深入浅出，适合前端开发者入门学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

五大主流浏览器
一.HTML简介
- 1.什么是HTML
- 2.HTML标签
- 3.HTML元素
- 4.HTML版本
- 5.web浏览器
- 6.HTML网页结构
- 7.中文编码
二.HTML基础标签
- 1.HTML 标题
- 2.HTML 段落
- 3.HTML 链接
- 4.HTML 图像
三.HTML元素
- 1.HTML 元素语法
- 2.嵌套的 HTML 元素
- 3.HTML 空元素
四.HTML属性
五.HTML区块
- 1.HTML区块元素
- 2.HTML内联元素
- 3.标签嵌套规则
六.HTML文本样式
- 1.HTML 水平线
- 2.HTML 注释
七.HTML链接
- 1.a标签的target属性
八.HTML头部信息
- 1. < meta > 标签
- 2. < title > 标签
- 3. < link > 标签
- 4. < style > 标签
- 5. < base > 标签
九.HTML表格
- 1.带边框表格的创建
- 2.设置单元格内边距和间距
- 4.HTML表格的表头
- 5.跨行跟跨列
十.HTML列表
- 1.有序列表
- 2.无序列表
- 3.嵌套列表
- 4.自定义列表
十一.HTML表单
- 1.form 元素
- 2.input 元素
- 3.select 元素（下拉列表）
- 4.textarea 元素（文本域）
- - 4.1 required 属性
- 5.label 标签
- 6.button 元素
十二.HTML框架
- 1.iframe设置高度和宽度
- 2.iframe去除边框
- 3.常用属性
十三.HTML脚本
- 1.HTML的 script 标签
- 2.HTML的 noscript 标签
十四.字符实体
十五.URL
- 1.常见的 URL Scheme
- 2.URL 字符编码
十六.HTML5 新增元素
- 1. HTML5中新的语义元素
- 2.HTML5 Video 标签
- 3.HTML5 audio 标签

五大主流浏览器

网页是由代码通过浏览器渲染而成的，而常用浏览器分为五种：

五大主流浏览器：IE（Edge），FireFox，Chrome，Opera，Safari（苹果）

浏览器内核由渲染引擎和JS引擎两部分组成。

渲染引擎：浏览器中专门对代码进行解析和渲染的部分

内核：Trident(IE)，Gecko(FireFox),Webkit(safari/chrome),Blink(chrome/opera)

国内大多数浏览器采用的是双核驱动(Trident&Webkit或Trident&Blink)

移动端：iphoe/ipad采用的是webkit内核，Android 4.4以下采用的是webkit内核，而4.4以上版本采用的是blink内核。

浏览器内核不同，形成的网页也就不同，为了避免这一现象，故规定了web标准：HTML、css、JavaScript

一.HTML简介

万维网W3C标准中网页分为结构（HTML），表现（css）和行为（JavaScript）三部分。

HTML用于描述页面的结构，CSS用于控制页面中的元素样式，JavaScript用于响应用户的操作。

1.什么是HTML

HTML的全称为超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。

超文本：是一种组织信息的方法，通过超级链接将多种媒介关联起来。

标记：就是标签，用<>包裹的具有一定含义的内容，比如：< head> < /head>

HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

2.HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 < html>
HTML 标签通常是成对出现的，比如 < p> 和 < /p>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

例如：

<标签>内容</标签>

所有 HTML 文档必须以 <!DOCTYPE> 声明开头，该声明并非一个 HTML 标签，它是一条“信息”，告知浏览器期望的文档类型。

3.HTML元素

HTML 元素指的是从开始标签到结束标签的所有代码。

例如：

<h1>一级标题</h1>

4.HTML版本

版本	发布时间
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2012
XHTML5	2013

5.web浏览器

Web浏览器（如谷歌浏览器，Edge，Safari 等）用于读取HTML文件，并将其作为网页显示。

浏览器并不是直接显示HTML标签，而是负责网页的渲染和呈现，标签决定了如何展现HTML页面的内容给用户。

例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>HTML</title>
</head>
<body>
	<h1>欢迎！！</h1>
	<p>你好，一起来学习前端吧！</p>	
</body>
</html>

在这里插入图片描述

6.HTML网页结构

在这里插入图片描述

< !DOCTYPE html> 声明为 HTML5 文档
< html> 元素是 HTML 页面的根元素
< head> 元素包含了文档的元（meta）数据，如定义网页编码格式为 utf-8。
< title> 元素描述了文档的标题
< body> 元素包含了可见的页面内容
< h1> 元素定义一个大标题
< p> 元素定义一个段落

注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。

在这里插入图片描述

7.中文编码

当在浏览器输出中文乱码时，需要在头部将字符声明为 UTF-8 或 GBK。

例如：

<meta charset="UTF-8">

二.HTML基础标签

1.HTML 标题

HTML 标题是通过 < h1 > - < h6 > 标签来定义的。

实例：

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>

在这里插入图片描述

2.HTML 段落

HTML 段落是通过标签 < p > 来定义的。

实例：

    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>

在这里插入图片描述

3.HTML 链接

HTML 链接是通过 < a > 标签进行定义的。a标签也叫跳转锚点标签，通过它可以实现页面的跳转。

< a href= " " > < /a>

href 表示路径，后面跟的是链接的地址

实例：

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

此时只需在浏览器中点击 “百度一下” 即可跳转。

4.HTML 图像

HTML 图像是通过 < img > 标签进行定义的。

img是一个单标签，没有结束标签，< img src=" " />

实例：

<img src = "images/1.jpg" alt = "图片路径加载错误" />

参数src为图片的路径，这里可以选择网页图片的地址，或者是本地图片；
参数alt为当图片路径不对加载图片出现错误时显示的内容（可自定义）。

height（高度）与 width（宽度）属性用于设置图像的高度与宽度。默认单位是像素（px）。

实例：

<img src="baidu.jpg" alt="百度" width="200" height="100">

注意：加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。

三.HTML元素

1.HTML 元素语法

HTML 元素以开始标签起始，以结束标签终止
元素的内容是开始标签与结束标签之间的内容，某些 HTML 元素具有空内容
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

2.嵌套的 HTML 元素

大多数 HTML 元素可以嵌套使用，即HTML 元素可以包含其他 HTML 元素。HTML 文档由相互嵌套的 HTML 元素构成。

实例：

<!DOCTYPE html>
<html>

<body>
<p>百度：<a href = "https://www.baidu.com/">百度一下</a></p>
</body>

</html>

可以看到< p >中包含了< a >标签

3.HTML 空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

实例：

    <p>段落1</p>
    <br />
    <p>段落2</p>

< br > 就是没有关闭标签的空元素（< br > 标签定义换行）。

在开始标签中添加斜杠，比如 < br />，是关闭空元素的正确方法。

四.HTML属性

属性是 HTML 元素提供的附加信息，属性值应该始终被包括在引号内，如果属性值本身就含有双引号，那么必须使用单引号包含属性值。

HTML元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name=“value”。

实例：

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

这里的href就是a标签的属性，且是设置在a标签的开始标签里面的。

总结：

1.标签由标签名、标签属性和文本内容三部分组成。

2.标签属性是对标签的一种描述方式。

3.标签属性分通用属性、自有属性和自定义属性。

1）通用属性：所有标签都具有的属性。

通用属性有：

id：用来给标签取一个唯一的名称。id名称在一个网页必须是唯一的。

class：用来给标签取一个类名。

style：用来设置该标签的行内样式。

title：当鼠标已到该标签，所显示的提示内容。

2）自定义标签属性：通常用来传值或用于图片懒加载（未滑到当前页面图片暂时不加载）等方面。

格式：data-自定义名称

<img data-src=“图片名” alt=“提示文本” / >

< p data-id=“goodsid” >文本内容

五.HTML区块

HTML 可以通过 < div > 和 < span >将元素组合起来。

大多数 HTML 元素被定义为块级元素或内联元素。

1.HTML区块元素

块级元素在浏览器显示时，通常会以新行来开始和结束。

在浏览器中会独占一行，识别宽高，例如< div >标签，相当执行了display：block操作（display：显示；block：块的意思）也叫块级元素。

独占一行
宽度和高度是可控的，如果没有设置其宽度，将会默认铺满整行
其内可以包含块级元素和行级元素。

< div >标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。

2.HTML内联元素

内联元素在浏览器显示时通常不会以新行开始。

在浏览器中不会独占一行，且不识别宽高，例如< span >标签，相当执行了display：inline操作（inline：行的意思）也叫行级元素。

不会独占一行，与相邻的行级元素占同一行，直到行占满，会自动掉到下一行
宽度和高度是不可控的
其内只包含行级元素

< span > 用于对文档中的行内元素进行组合。

块级标签转行级标签只需要在样式中设置 display：inline，行级转块级则反之。

3.标签嵌套规则

标签嵌套规则：

1.块元素可以包含块元素和内联元素（也就是行级元素），但行级元素不能包含块元素，它只能包含行级元素；

2.< p >标签内不能放块级元素，能放行级元素，只能在块元素里放< p >标签；

3.有几个特殊块元素只能放行级元素，不能放块级元素，例如：h1,h2,h3,h4,h5,h6,p,dt ;

4.块元素要跟块元素并列，行级元素要跟行级元素并列，不能在一个块元素中块元素与行级元素并列。

六.HTML文本样式

HTML 使用标签 < b >(“bold”) 与 < i >(“italic”) 对输出的文本进行格式, 如：粗体 or 斜体。也可使用标签 < strong > 替换加粗标签 < b > 来使用, < em > 替换 < i >标签使用。但是两者的含义不同，< strong > 或者 < em >标签表示呈现的文本是重要的，所以有突出显示的意思。

标签	作用
< b >	定义粗体文本
< em >	定义着重文字
< i >	定义斜体文字
< small >	定义小号文字
< strong >	定义加重语气文本
< sub >	定义下标
< sup >	定义上标
< ins>	定义插入字
< del >	定义删除字

实例：

<body>
    <p>定义<b>粗体文本</b></p>
    <p>定义<em>着重文本</em></p>
    <p>定义<i>斜体文本</i></p>
    <p>定义<small>小号文本</small></p>
    <p>定义<strong>加重语气文本</strong></p>
    <p>定义<sub>下标</sub>H<sub>2</sub>O</p>
    <p>定义<sup>上标</sup>2<sup>10</sup></p>
    <p>定义<ins>插入字</ins></p>
    <p>定义<del>删除字</del></p>
</body>

在这里插入图片描述

1.HTML 水平线

< hr> 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容。

实例：

<body>
	<p>hr 标签定义水平线：</p>
	<hr />
	<p>这是段落。</p>
	<hr />
	<p>这是段落。</p>
	<hr />
	<p>这是段落。</p>
</body>

在这里插入图片描述

2.HTML 注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

编译器 VScode 中加注释快捷键是 Ctrl + /

实例：

<body>

<!--这是一个注释，注释在浏览器中不会显示-->

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

</body>

在这里插入图片描述

七.HTML链接

实例：

< a href="https://www.baidu.com/">访问百度< /a>

点击这个链接会把用户带到百度的首页。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签< a> 中使用了href属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。

注意：如果为这些链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。

1.a标签的target属性

target 属性定义被链接的文档在何处显示。

实例：

<a href="https://www.baidu.com/" target="_blank" >访问百度!</a>

属性值	描述
_blank	在新窗口打开
_parent	在父窗口中打开链接
_self	默认，在当前页面跳转
_top	在当前窗口打开链接，并替换当前的整个窗体

八.HTML头部信息

一个默认的HTML文件头部信息如下：

<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>
</head>

上面包含了 meta 和 title 两个元素，当然html的头部中你还可以插入脚本（scripts）, 样式文件（CSS）以及style，link，base等元素。

1. < meta > 标签

元数据（Metadata）是数据的数据信息。< meta > 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。

< meta >标签没有结束标签

实例：

1.1 定义文档字符编码

<meta charset="UTF-8">

1.2 把content属性关联到HTTP头部

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

1.3 为搜索引擎定义关键词

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

1.4 为网页定义描述内容

<meta name="description" content="免费 Web & 编程 教程">

另外还可以进行对页面的刷新和定义页面作者等信息。

1.5 页面的刷新

 //每30秒刷新页面
 <meta http-equiv="refresh" content = "30">

1.6 定义页面作者

<meta name="author" content="hu xiao qi">

2. < title > 标签

< title > 标签定义了不同文档的标题。

< title > 元素:

定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

实例：

<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>前端学习</title>
</head>

在这里插入图片描述

3. < link > 标签

< link > 标签定义文档与外部资源的关系。
< link > 标签最常见的用途是链接样式表。

注意：此元素只能存在于 head 部分，不过它可出现任何次数。

实例：

<link rel="stylesheet" type="text/css" href="mystyle.css">

4. < style > 标签

< style > 标签定义了HTML文档的样式文件引用地址.
在< style > 元素中你也可以直接添加样式来渲染 HTML 文档

实例：

<style type="text/css">
body {
background-color:yellow
}
p {
color:blue
}
</style>

5. < base > 标签

定义了页面链接标签的默认链接地址

实例：

<head>
   <base href="https://www.baidu.com/" target="_blank">
</head>
<body>
    <p><a href="">点击打开百度</a></p>

</body>

这里的< a> 标签链接没有设置路径，所以就默认使用上面< base> 标签里的路径，此时点击一下也会跳转到百度首页

九.HTML表格

表格由 < table > 标签来定义。每个表格均有若干行（由 < tr > 标签定义），每行被分割为若干单元格 ---- 列（由 < td > 标签定义）。

1.带边框表格的创建

若直接创建表格，那么创建出来的表格是不带边框的，而大多数情况下，我们需要的往往是一个带有边框的表格，那么我们则需要在< table >标签中设置属性 border。

实例：

<body>
    <table border="1">
        <tr>
            <td>李白</td>
            <td>韩信</td>
        </tr>
        <tr>
            <td>嬴政</td>
            <td>妲己</td>
        </tr>
    </table>
</body>

在这里插入图片描述

2.设置单元格内边距和间距

2.1 设置单元格内边距:cellpadding

单元格内容与其边框之间的距离。

实例:

<body>
    <h3>没有单元格边距：</h3>
    <table border="1">
        <tr>
            <td>李白</td>
            <td>韩信</td>
        </tr>
        <tr>
            <td>嬴政</td>
            <td>妲己</td>
        </tr>
    </table>
    <h3>设置了单元格边距：</h3>
    <table border="1" cellpadding="20">
        <tr>
            <td>李白</td>
            <td>韩信</td>
        </tr>
        <tr>
            <td>嬴政</td>
            <td>妲己</td>
        </tr>
    </table>
</body>

在这里插入图片描述

2.2 设置单元格间距:cellspacing

单元格之间的距离

实例：

<body>
    <h3>没有单元格间距：</h3>
    <table border="1">
        <tr>
            <td>李白</td>
            <td>韩信</td>
        </tr>
        <tr>
            <td>嬴政</td>
            <td>妲己</td>
        </tr>
    </table>
    <h3>设置单元格间距为0：</h3>
    <table border="1" cellspacing="0">
        <tr>
            <td>李白</td>
            <td>韩信</td>
        </tr>
        <tr>
            <td>嬴政</td>
            <td>妲己</td>
        </tr>
    </table>
    <h3>设置单元格间距为20：</h3>
    <table border="1" cellspacing="20">
        <tr>
            <td>李白</td>
            <td>韩信</td>
        </tr>
        <tr>
            <td>嬴政</td>
            <td>妲己</td>
        </tr>
    </table>
</body>

在这里插入图片描述

2.3 设置表格及单元格的背景

实例：

<body>
    <table border="1" bgcolor="green">
        <tr bgcolor="yellow">
            <td>李白</td>
            <td>韩信</td>
        </tr>
        <tr>
            <td bgcolor="red">嬴政</td>
            <td>妲己</td>
        </tr>
    </table>
</body>

在这里插入图片描述

4.HTML表格的表头

表格的表头使用 < th > 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本

实例：

<body>
   <table border="1">
       <tr>
           <th>英雄名称</th>
           <th>英雄类型</th>
       </tr>
       <tr>
       <td>李白</td>
       <td>刺客</td>
       </tr>
       <tr>
       <td>妲己</td>
       <td>法师</td>
       </tr>
   </table>
</body>

在这里插入图片描述

5.跨行跟跨列

跨行/跨列属性主要用来绘制复杂表格

rowspan:跨行

colspan：跨列

实例：

<body>

<h4>单元格跨两列:</h4>
<table border="1">
<tr>
  <th>英雄名称</th>
  <th colspan="2">技能名称</th>
</tr>
<tr>
  <td>李白</td>
  <td>青莲剑歌</td>
  <td>神来之笔</td>
</tr>
</table>

<h4>单元格跨两行:</h4>
<table border="1">
<tr>
  <th>英雄名称</th>
  <td>韩信</td>
</tr>
<tr>
  <th rowspan="2">技能名称</th>
  <td>国士无双</td>
</tr>
<tr>
  <td>背水一战</td>
</tr>
</table>

</body>

在这里插入图片描述

十.HTML列表

1.有序列表

有序列表是一列项目，列表项目使用数字进行标记。

有序列表是用 < ol > 标签。每个列表项是用 < li > 标签。

注意：（有序、无序、自定义列表都适用）

< ol >标签中只允许包含< li > 标签；
< li > 标签中可包含任意内容。

实例：

<body>
   <ol>
       <li>李白</li>
       <li>韩信</li>
       <li>妲己</li>
   </ol>
</body>

在这里插入图片描述

2.无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表是用 < ul > 标签。每个列表项是用 < li > 标签。

实例：

<body>
   <ul>
       <li>赵云</li>
       <li>澜</li>
       <li>镜</li>
   </ul>
</body>

在这里插入图片描述

3.嵌套列表

有序列表跟无序列表混合着用

实例：

<body>
   <ul>
      <li>刺客</li>
      <ol>
             <li>赵云</li>
             <li>澜</li>
             <li>镜</li>
      </ol>
      <li>辅助</li>
      <ol>
             <li>明世隐</li>
             <li>太乙真人</li>
             <li>瑶</li>
      </ol>
   </ul>
</body>

在这里插入图片描述

4.自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 < dl > 标签开始。每个自定义列表项以 < dt > 开始。每个自定义列表项的定义以 < dd > 开始。

实例：

<body>
   <dl>
       <dt>刺客英雄：</dt>
       <dd>李白-青莲剑歌</dd>
	   <dd>韩信-国士无双</dd>
       <dt>法师英雄：</dt>
       <dd>妲己-魅力之狐</dd>
	   <dd>嬴政-王者独尊</dd>
   </dl>
</body>

在这里插入图片描述

十一.HTML表单

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

1.form 元素

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

表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）等等。

我们可以使用 < form > 标签来创建表单

1.1 action 属性

action 属性定义在提交表单时执行的动作。向服务器提交表单的通常做法是使用提交按钮。通常，表单会被提交到指定的网页。

<form action="xxx.html">

实例：

<body>
<form action="提交的网页.html" target="_blank">
<input type="submit" name="点击提交" >

</form>
</body>

在这里插入图片描述

此时点击一下提交按钮就会跳转到提交的网页这个页面

1.2 method 属性（get/post）

method 属性规定在提交表单时所用的 HTTP 方法（get/post）。

<form action="提交的网页.html" method="get">
<form action="提交的网页.html" method="post">

get注意事项

如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。当您使用 GET 时，表单数据在页面地址栏中是可见的。

注：GET 最适合少量数据的提交。浏览器会设定容量限制。

以名称/值对的形式将表单数据追加到 URL
永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）
URL 的长度受到限制（2048 个字符）
对于用户希望将结果添加为书签的表单提交很有用
GET 适用于非安全数据，例如 Google 中的查询字符串

post注意事项

如果表单正在更新数据，或者包含敏感信息（例如密码）。POST 的安全性更好，因为在页面地址栏中被提交的数据是不可见的。

将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）
POST 没有大小限制，可用于发送大量数据。
带有 POST 的表单提交无法添加书签

1.3 target 属性

target 属性规定提交表单后在何处显示响应

target 属性可设置以下值：

值	描述
_blank	响应显示在新窗口或选项卡中。
_self	响应显示在当前窗口中。
_parent	响应显示在父框架中。
_top	响应显示在窗口的整个 body 中。
framename	响应显示在命名的 iframe 中。

1.4 autocomplete 属性

autocomplete 属性规定表单是否应打开自动完成功能。启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值。

1.5 fieldset 组合表单数据

< fieldset > 元素组合表单中的相关数据
< legend > 元素为 < fieldset > 元素定义标题。

实例：

<!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>
         .biaodan{ 
             margin-right: 500px; 
         }
    </style>
</head>
<body>
<form >
<fieldset class="biaodan">
<legend>登录管理</legend>
<p>账号：<input type="text" placeholder="请输入账号"></p>
<p>密码：<input type="password" placeholder="请输入密码"></p>
<p><input type="submit" name = "点击提交"></p>
</fieldset>

</form>
</body>
</html>

在这里插入图片描述

2.input 元素

常见输入类型：

text（文本输入，常用属性：placeholder（提示文本）、name（命名）、minlength和maxlength（最少/多输入的字符个数）、disabled(失效)、readonly(只读)、value(默认值)、pattern(正则匹配)）
password（密码字段，常用属性跟text一样）
submit（提交按钮，用来将表单数据提交到后台。常用属性有：value（按钮的标题）/disabled(失效））
radio（单选按钮，通常是两项以上。常用属性有：name(分组，同一组内只会有一个被选中，必须要有)/value/checked(选中)/disabled(失效)/readonly(只读)）
checkbox（复选框，可以用来选择0项、1项或多项。常用属性有：name/value/checked(默认)/disabled(失效)/readonly(只读)）
button（按钮，常用属性有：value（按钮的标题）/disabled(失效））
reset (重置按钮，将表单所有组件输入的内容全部清空，还原为初始状态。常用属性有：value（按钮的标题）/disabled(失效）)
file（文件上传按钮，multiple：选中多个文件上传）

实例：

<!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>
</head>
<body>
<form >
<p>文本输入: <input type="text"></p>
<p>密码: <input type="password"></p>
<p>提交按钮: <input type="submit"></p>
<p>单选按钮:</p>
<p><input type="radio">李白</p>
<p><input type="radio">韩信</p>
<p>复选框: </p>
<p><input type="checkbox">澜</p>
<p><input type="checkbox">镜</p>
<p><input type="checkbox">曜</p>	
<p>按钮: <input type="button" value="我是一个小按钮"></p>
</form>
</body>
</html>

在这里插入图片描述

2.1 number 类型

实例：

<form>
输入数字: <input type="number" min="0" max="5" >

</form>

在这里插入图片描述

输入限制

属性	描述
disabled	规定输入字段应该被禁用。
max	规定输入字段的最大值。
maxlength	规定输入字段的最大字符数。
min	规定输入字段的最小值。
pattern	规定通过其检查输入值的正则表达式。
readonly	规定输入字段为只读（无法修改）。
required	规定输入字段是必需的（必需填写）。
size	规定输入字段的宽度（以字符计）。
step	规定输入字段的合法数字间隔。
value	规定输入字段的默认值。

2.2 date 类型

实例：

<form>
输入日期：<input type="date" >

</form>

在这里插入图片描述

对日期进行限制：

<form>
<p>最大日期：<input type="date" max="2000-01-01"></p>
<p>最小日期：<input type="date" min="2022-06-30"></p>

</form>

在这里插入图片描述

2.3 color 类型

实例：

<form>
选择颜色：<input type="color">
</form>

在这里插入图片描述

2.4 range 类型

实例：

<form>
选择范围：<input type="range" min="10" max="100" >
</form>

在这里插入图片描述

2.5 时间类型（month,week,time,datetime-local）

实例：

<form>
month: <input type="month"><br>
week: <input type="week"><br>
time: <input type="time"><br>
datetime_local: <input type="datetime-local">
</form>

在这里插入图片描述

2.6 email 类型

实例：

<form>
email： <input type="email">
</form>

在这里插入图片描述

2.7 search 类型（搜索）

常用于搜索框

实例：

<form>
搜索：<input type="search">
</form>

在这里插入图片描述

3.select 元素（下拉列表）

< option > 元素定义待选择的选项。列表通常会把首个选项显示为被选选项。可通过添加 selected 属性来定义预定义选项。

multiple属性：表示可以多选，这时的下拉列表框变成了列表框。
size：最多显示的行数

实例：

<form>
你要选择的英雄是：
<select name="下拉列表">
    <option value="">李白</option>
    <option value="">韩信</option>
    <option value="" selected>赵云</option>
    <option value="">妲己</option>
    <option value="">嬴政</option>
</select>
</form>

在这里插入图片描述

4.textarea 元素（文本域）

文本域（也可以叫多行文本框），主要用来输入大批量的内容。

常用属性：cols(列数）/rows(行数）/required(必须输入的意思）

实例：

<form>
<textarea rows="20" cols="20">
    请输入文字...
</textarea>
</form>

在这里插入图片描述

4.1 required 属性

required 属性规定一个文本区域是必需的/必须填写（以提交表单）。

实例：

<form action="已经提交的网页.html">
<textarea rows="4" cols="50" name="comment" required>
</textarea>
<input type="submit">
</form>

在这里插入图片描述

5.label 标签

label标签：点击文本也能选中单选框

方法1：使用label标签把文本包裹起来，在表单里添加id属性，在label标签的for属性中设置与表单id属性对应的属性值

方法2：使用label把表单与文本都包裹起来，然后删掉label标签中的for属性

实例：

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

在这里插入图片描述

6.button 元素

普通按钮，具有提交功能。可以单独使用，不写在form元素中；

如果写在form元素中，有提交功能。

实例：

<form>
<button>我是一个小按钮</button>
</form> 
<br/>
<button>我是一个提交按钮</button>

在这里插入图片描述

十二.HTML框架

有时候我们希望在同一个浏览器界面中显示不止一个页面，这时候就要用到框架（iframe）

< iframe src=“另一个页面的路径”>< /iframe >

1.iframe设置高度和宽度

height 和 width 属性用来定义iframe标签的高度与宽度。

实例：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head> 
<body>

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

</body>
</html>

在这里插入图片描述

2.iframe去除边框

frameborder 属性用于定义iframe表示是否显示边框。

实例：

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

在这里插入图片描述

3.常用属性

属性	定义
name	框架名
src	引入的外部html文件
scrolling	滚动条（yes/no/auto)
width	宽度（%/px)
height	高度（%/px)
frameborder	是否有边框（1/0)
marginheight	框架离顶部和底端的距离（%/px)
marginwidth	框架离左右的距离（%/px)

十三.HTML脚本

1.HTML的 script 标签

< script > 标签用于定义客户端脚本，比如 JavaScript。< script > 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。

JavaScript 最常用于图片操作、表单验证以及内容动态更新。

下面的脚本会向浏览器输出"Hello World!"：

<script>
document.write("Hello World!");
</script>

2.HTML的 noscript 标签

标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，< noscript >元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素，在浏览器禁止使用脚本时，会显示该标签内的内容。

<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

十四.字符实体

HTML中预留的字符和一些键盘上找不到的字符必须使用字符实体来替换！

如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。

显示结果	描述	实体名称
	空格	& nbsp;
<	小于号	& lt;
>	大于号	& gt;
&	和号	& amp;
"	引号	& quot;
’	撇号	& apos; (IE不支持)
￠	分	& cent;
£	镑	& pound;
¥	人民币/日元	& yen;
€	欧元	& euro;
§	小节	& sect;
©	版权	& copy;
®	注册商标	& reg;
™	商标	& trade;
×	乘号	& times;
÷	除号	& divide;

虽然 html 不区分大小写，但实体字符对大小写敏感。

十五.URL

URL(统一资源定位器)是一个网页地址，可以使用网址(例如：www.baidu.com)或者使用IP地址来访问。

Web浏览器通过URL从Web服务器请求页面。

当您点击 HTML 页面中的某个链接时，对应的 < a > 标签指向万维网上的一个地址。

一个统一资源定位器(URL) 用于定位万维网上的文档。

一个网页地址实例: https://www.baidu.com/html/html-tutorial.html

语法规则:
scheme://host.domain:port/path/filename

说明:

scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain-定义因特网域名，比如 baidu.com
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称

1.常见的 URL Scheme

Scheme	访问	作用
http	超文本传输协议	以 http:// 开头的普通网页。不加密。
https	安全超文本传输协议	安全网页，加密所有信息交换。
ftp	文件传输协议	用于将文件下载或上传至网站。
	file	您计算机上的文件。

2.URL 字符编码

URL 只能使用 ASCII 字符集.

来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。

URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。

URL 不能包含空格。URL 编码通常使用 + 来替换空格。

十六.HTML5 新增元素

1. HTML5中新的语义元素

许多现有网站都包含以下HTML代码： < div id=“nav”>, < div class=“header”>, 或者 < div id=“footer”>, 来指明导航链接, 头部, 以及尾部.

HTML5 提供了新的语义元素来明确一个Web页面的不同部分:

< header> ：页首
< nav> ：导航栏
< section> ：区块
< article> ：文章
< aside> ：侧边栏
< footer> ：页尾

在这里插入图片描述

2.HTML5 Video 标签

Video 标签：视频标签、加载视频。IE9以下的版本不支持。

a)支持的格式
.mp4/.ogg/.webm

b)属性
src:文件路径
autoplay:自动播放
loop:循环
controls:控制条
muted:静音
preload:预加载（当使用autoplay时，preload自动失效）
width:宽度
height:高度
poster:海报

实例：

<body>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

</body>

在这里插入图片描述

3.HTML5 audio 标签

audio 标签：播放音乐或音频。IE9以下的版本不支持。

a)支持的格式
.mp3/.ogg/.wav

b)属性
src:文件路径
autoplay:自动播放
loop:循环
controls:控制条
muted:静音
preload:预加载（当使用autoplay时，preload自动失效）

实例：

<body>

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
</audio>

</body>

在这里插入图片描述