HTML5笔记

本文最后更新于：1 年前

HTML笔记

HTML介绍

什么是HTML

HTML的全称为超文本标记语言(HyperText Markup Language)，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便

来源：百度百科

  • 超文本标记语言: HyperText Markup Language
  • 不是一种编程语言，而是一种标记语言(markup language)
  • 标记语言是一套标记标签 (markup tag)
  • 使用标记标签来描述网页

HTML发展史

历史版本 简介
HTML1.0 在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
HTML2.0 1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。
HTML3.2 1997年1月14日，W3C推荐标准。
HTML4.0 1997年12月18日，W3C推荐标准。
HTML4.01 1999年12月24日，W3C推荐标准。
HTML5 HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。

HTML5的优势

  • 世界知名浏览器厂商对HTML5的支持

  • 跨平台

  • 市场需求

W3C标准

什么是W3C

W3C 指万维网联盟（World Wide Web Consortium）

W3C 创建于1994年10月

W3C 的工作是对 web 进行标准化

  • 结构化标准语言（HTML、XML）
  • 表现标准语言（CSS）
  • 行为标准（DOM、ECMAScript）

常见IDE

  • 记事本、Notepad++
  • Dreamweaver
  • IDEA
  • WebStorm
  • VS Code
  • …

HTML标签

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

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

我的第一个网页

HTML基本结构

实例

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

其中

所有的HTML文档都应该有<html>，标签<html>标签包含两个部分:<head>头部、 <body>主体

<head>、</head>这样成对的标签称为开放标签(OPEN TAG)、闭合标签(CLOSE TAG)

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

对于中文网页需要使用 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 。

网页的基本信息

DOCTYPE声明

<!DOCTYPE>标签声明使用的HTML语言版本，利于浏览器显示网页

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

doctype 声明不区分大小写

HTML5

1
<!DOCTYPE html>

HTML4.01

1
2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

meta标签

使用 元素来描述网站的一些信息

1
2
3
4
5
6
7
8
9
<!--  meta标签 描述网站的一些信息  -->
	<!--字符编码-->
    <meta charset="UTF-8">
	<!--关键词-->
    <meta name="keywords" content="Linsip博客">
	<!--描述-->
    <meta name="description" content="我的私人博客">
	<!--作者-->
	<meta name="author" content="ml">

注意事项

meta标签描述了一些基本的元数据。

<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

<meta> 一般放置于 <head> 区域

title标签

1
2
<!--title标签代表网页标题-->
   <title>我的第一个网页</title>

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!--DOCTYPE: 声明是不区分大小写的，用来告知 Web 浏览器页面使用了哪种 HTML 版本-->
<!DOCTYPE html>

<!--总标签-->
<html lang="en">

<!--head标签代表网页头部-->
<head>
    <!--  meta标签 描述网站的一些信息  -->
    <meta charset="UTF-8">
    <meta name="keywords" content="Linsip博客">
    <meta name="description" content="我的私人博客">

    <!--title标签代表网页标题-->
    <title>我的第一个网页</title>
</head>

<!--body标签代表网页主体-->
<body>

</body>
</html>

网页基本标签

HTML标题

<h1> 定义最大的标题。<h6> 定义最小的标题。

1
2
3
<h1>这是一个一级标题</h1>
<h2>这是一个二级标题</h2>
<h3>这是一个三级标题</h3>

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题标签</title>
</head>
<body>

<h1>这是一级标题 1</h1>
<h2>这是二级标题 2</h2>
<h3>这是三级标题 3</h3>
<h4>这是四级标题 4</h4>
<h5>这是五级标题 5</h5>
<h6>这是六级标题 6</h6>

</body>
</html>

运行结果

标题标签

段落

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

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>段落标签</title>
</head>
<body>

<p>两只老虎爱跳舞，小兔子乖乖拔萝卜，</p>
<p>我和小鸭子学走路，童年是最美的礼物。</p>
<p>小螺号呀嘀嘀地吹，我学海鸥展翅飞，</p>
<p>不怕风雨不怕累，快快把本领都学会。</p>

</body>
</html>

运行结果

换行标签

换行

如果我们只希望换行，而不产生新的段落，可以使用换行标签

1
<br/>

注意事项

<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>换行标签</title>
</head>
<body>
两只老虎爱跳舞，小兔子乖乖拔萝卜，<br/>
我和小鸭子学走路，童年是最美的礼物。<br/>
小螺号呀嘀嘀地吹，我学海鸥展翅飞，<br/>
不怕风雨不怕累，快快把本领都学会。<br/>
</body>
</html>

运行结果

换行标签

水平线标签

hr 元素可用于分隔内容。

1
<hr/>

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平线标签</title>
</head>
<body>
两只老虎爱跳舞，小兔子乖乖拔萝卜，<br/>
我和小鸭子学走路，童年是最美的礼物。<br/>
<hr/>
小螺号呀嘀嘀地吹，我学海鸥展翅飞，<br/>
不怕风雨不怕累，快快把本领都学会。<br/>
</body>
</html>

运行结果

image-20210523191416414

字体样式

粗体与斜体

1
2
<strong>加粗字体<strong/>
<em>斜体<em/>

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>换行标签</title>
</head>
<body>
<strong>两只老虎爱跳舞，小兔子乖乖拔萝卜，<strong/><br/>
<strong>我和小鸭子学走路，童年是最美的礼物。<strong/><br/>
<strong>小螺号呀嘀嘀地吹，我学海鸥展翅飞，<strong/><br/>
<strong>不怕风雨不怕累，快快把本领都学会。<strong/><br/>
<em>两只老虎爱跳舞，小兔子乖乖拔萝卜，<em/><br/>
<em>我和小鸭子学走路，童年是最美的礼物。<em/><br/>
<em>小螺号呀嘀嘀地吹，我学海鸥展翅飞，<em/><br/>
<em>不怕风雨不怕累，快快把本领都学会。<em/><br/>

</body>
</html>

运行结果

字体样式

注释和特殊符号

注释

1
<!--这是注释-->

特殊符号

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>特殊符号</title>
</head>
<body>
<!--这是空格-->
空&nbsp;格<br/>
<!--大于-->
&gt;大于<br/>
<!--小于-->
&lt;小于<br/>
<!--版权-->
&copy;版权
</body>
</html>

运行结果

特殊符号

图像标签

常见的图像格式

  • JPG
  • GIF
  • PNG
  • BMP
  • …

在 HTML 中，图像由 标签定义。

1
<img src="path" alt="text" title="x" height="y"/>

其中src和alt为必填项

  • src:图片地址（必填）
  • alt:图片加载失败，显示字符串（必填）
  • title:鼠标悬停显示的文字
  • width:图片宽度
  • height:图片高度

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>
<!--
图片标签
src:图片地址（必填）
    相对地址    ../ 代表上一级目录
    绝对地址    一般不推荐，直接把路径写死

alt:图片加载失败，显示字符串（必填）

title:鼠标悬停显示的文字

width:图片宽度

height:图片高度
-->
<img src="../resources/image/404.jpg" alt="背景图片" title="Hello">
</body>
</html>

链接标签

1
<a href="链接地址或网页" target="目标窗口如何打开">链接文本或图片</a>

功能性链接拓展

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--
a标签学习
href:表示要跳转到哪个页面（必填）
target:表示窗口在那里打开
    _blank:在新标签页打开
    _self:在本页面打开（默认）
    _

-->
<!--使用name作为一个标记-->
<a name="顶部"></a>

<a href="1我的第一个网页.html">点击我跳转到我的第一个网页</a>
<br/>
<a href="https://www.baidu.com" target="_blank">点击我跳转到百度</a>

<!--
锚链接
1需要一个标记:<a name="xxx">xxx</a>
2跳转到标记:<a href="#xxx">xxx</a>
#
-->
<p><img src="../resources/image/404.jpg" alt="背景图片" title="Hello"></p>
<p><img src="../resources/image/404.jpg" alt="背景图片" title="Hello"></p>
<p><img src="../resources/image/404.jpg" alt="背景图片" title="Hello"></p>
<p><img src="../resources/image/404.jpg" alt="背景图片" title="Hello"></p>
<p><img src="../resources/image/404.jpg" alt="背景图片" title="Hello"></p>


<a href="#顶部">点击回到顶部</a>

<!--
功能性链接
    mailto:邮件
    QQ链接:
-->
<a href="mailto:719004051@qq.com">联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=719004051&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:719004051:53" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
</body>
</html>

列表

有序列表

1
2
3
4
5
<ol>
    <li>第一</li>
    <li>第二</li>
    <li>第三</li>
</ol>

无序列表

1
2
3
4
5
<ul>
    <li>第一</li>
    <li>第二</li>
    <li>第三</li>
</ul>

自定义列表

1
2
3
4
5
6
7
8
<dl>
    <dt>自定义名称</dt>

    <dd>内容一</dd>
    <dd>内容二</dd>
    <dd>内容三</dd>

</dl>

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<!--有序列表-->
<ol>
    <li>第一</li>
    <li>第二</li>
    <li>第三</li>
    <li>第四</li>
    <li>第五</li>
    <li>第六</li>
</ol>
<hr/>
<!--无序列表-->
<ul>
    <li>第一</li>
    <li>第二</li>
    <li>第三</li>
    <li>第四</li>
    <li>第五</li>
    <li>第六</li>
</ul>
<hr/>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容

应用范围
    公司网站底部
-->
<dl>
    <dt>课程</dt>

    <dd>Java</dd>
    <dd>Physon</dd>
    <dd>C/C++</dd>

</dl>
</body>
</html>

运行结果

列表

表格

基本结构

  • 单元格
  • 行
  • 列
  • 跨行
  • 跨列

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--表格
border:表格宽度
tr:行
td:列
td colspan="xx":跨列
td rowspan="xx":跨行

-->
<table border="1px">
    <tr>
        <td colspan="3">1.1</td>
    </tr>
    <tr>
        <td rowspan="2">2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
    <tr>
    <td>3.1</td>
    <td>3.2</td>
    </tr>


</table>
</body>
</html>

运行结果

表格

媒体元素

视频

1
2
3
4
5
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

音频

1
2
3
4
5
<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音频视频</title>
</head>
<body>
<!--视频音频
src:地址
controls:添加控制标签
autoplay:自动播放
-->
<video src="../resources/video/周杰伦2000_2011发行MV1080P修复版【Jay】黑色幽默4K修复.mp4" controls autoplay></video>
<hr/>
<audio src="../resources/audio/爱情陷阱%20-%20谭咏麟.flac" controls></audio>
</body>
</html>

运行结果

音频视频

网页元素

行内元素和块元素

块元素

  • 无论内容多少，该元素独占一行
  • 例如<h1>, <p>, <ul>, <table>

行内元素（内联元素）

  • 内容撑开宽度，左右都是行内元素的可以排在一行
  • 例如 <b>, <td>, <a>, <img>

页面结构分析

元素名 描述
header 标题头部区域内容（用于页面或页面中的一块区域）
footer 标记脚部区域的内容（用于整个页面或页面中的一块区域）
section Web页面中一块独立区域
article 独立的文章内容
aside 相关内容或应用（常用于侧边栏）
nav 导航类辅助内容

实例

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构</title>
</head>
<body>
<header><h2>页面头部</h2></header>
<section><h2>页面主体</h2></section>
<footer><h2>页面脚部</h2></footer>
</body>
</html>

iframe内联框架

简介

使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

语法

1
<iframe src="https://linsip.cn" name="hello" frameborder="0" width="900" height="6000"></iframe>

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<!--iframe内联框架
src:地址(必填)
name:
width:宽度
height:高度

-->
<iframe src="https://www.baidu.com" name="hello" frameborder="0" width="1600" height="800"></iframe>
<!--iframe可以显示一个目标链接的页面-->
<a href="https://linsip.cn" target="hello">点击跳转到我的博客</a>
<!---->
</body>
</html>

表单

表单简介

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

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 <form> 来设置:

1
2
3
4
5
<form>
.
input 元素
.
</form>

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<h1>登陆注册</h1>
<!--表单
action:表单提交的位置
method:
    post:可以在url看到提交的信息,不安全,传输效率高
    get:比较安全,可以传输大文件
-->
<form action="1我的第一个网页.html"method="post">
    <!--文本输入框标签-->
    <p>姓名: <input type="text" name="username"> </p>
    <!--密码输入框-->
    <p>密码: <input type="password" name="password"> </p>

<p>
    <input type="submit">
    <input type="reset">
</p>
</form>
</body>
</html>

运行结果

表单初识

输入元素

多数情况下被用到的表单标签是输入标签（<input>）。

输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

文本输入框

1
<input type="text" name="username">

密码输入框

1
<input type="password" name="password">

单选按钮

1
2
3
4
5
6
7
8
9
10
<!--radio:单选框
        注意事项:
            name:单选框name必须一样才是一组
            value:单选框的值
    -->
    <p>
        性别:
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
    </p>

复选按钮

1
2
3
4
5
6
7
8
9
10
11
<!--多选框
        checkbox
        checked:默认选中
    -->
    <p>
        爱好:
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby"checked>敲代码
        <input type="checkbox" value="game" name="hobby">打游戏
        <input type="checkbox" value="girl" name="hobby">女孩
    </p>

自定义按钮

1
2
3
4
<!--按钮-->
    <p>自定义按钮: <input type="button" value="点击一下" name="btn1"></p>
    <p>图片按钮: <br/> <input type="image" src="../resources/image/wechat.jpg" width="300" height="300"></p>

下拉框

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--下拉框
    select:列表框
    option:列表选项
    selected:默认选项
    -->
    <p>
        国籍:
        <select name="列表名称">
            <option value="选项的值"selected>中国</option>
            <option value="选项的值">美国</option>
            <option value="选项的值">日本</option>
            <option value="选项的值">韩国</option>
        </select>>

文本域

1
2
3
4
5
<!--文本域
    cols:列
    rows:行
    -->
    <p>反馈:<textarea name="textarea"  cols="30" rows="10"></textarea></p>

文件域

1
2
3
4
5
<!--文件域-->
    <p>
        <input type="file" name="files">
        <input type="button" name="upload" value="上传">
    </p>

邮箱验证

1
2
3
4
<!--邮箱验证-->
    <p>邮箱: <input type="email"name="email"></p>
    <!--url-->
    <p>ULR: <input type="url"name="url"></p>

数字

1
2
3
4
<!--数字-->
    <p>
        商品数量: <input type="number" name="num" max="100" min="10" step="1">
    </p>

滑块

1
2
3
4
<!--滑块-->
   <p>
      音量: <input type="range" name="voice" max="100"min="0">
   </p>

搜索框

1
2
<!--搜素框-->
   <p>搜索:<input type="search"name="search"></p>

提交重置

1
2
3
4
5
6
7
8
<!--
    submit:提交
    reset:重置
-->
<p>
    <input type="submit">
    <input type="reset">
</p>

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<h1>登陆注册</h1>
<!--表单
action:表单提交的位置
method:表单提交的方式
    post:可以在url看到提交的信息,不安全,传输效率高
    get:比较安全,可以传输大文件
-->
<form action="1我的第一个网页.html"method="post">
    <!--文本输入框标签-->
    <p>姓名: <input type="text" name="username"> </p>
    <!--密码输入框-->
    <p>密码: <input type="password" name="password"> </p>
    <!--radio:单选框
        注意事项:
            name:单选框name必须一样才是一组
            value:单选框的值
    -->
    <p>
        性别:
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
    </p>
    <!--多选框
        checkbox
        checked:默认选中
    -->
    <p>
        爱好:
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby"checked>敲代码
        <input type="checkbox" value="game" name="hobby">打游戏
        <input type="checkbox" value="girl" name="hobby">女孩
    </p>
    <!--按钮-->
    <p>自定义按钮: <input type="button" value="点击一下" name="btn1"></p>
    <p>图片按钮: <br/> <input type="image" src="../resources/image/wechat.jpg" width="300" height="300"></p>

    <!--下拉框
    select:列表框
    option:列表选项
    selected:默认选项
    -->
    <p>
        国籍:
        <select name="列表名称">
            <option value="选项的值"selected>中国</option>
            <option value="选项的值">美国</option>
            <option value="选项的值">日本</option>
            <option value="选项的值">韩国</option>
        </select>
    </p>
    <!--文本域
    cols:列
    rows:行
    -->
    <p>反馈:<textarea name="textarea"  cols="30" rows="10"></textarea></p>
    
    <!--文件域-->
    <p>
        <input type="file" name="files">
        <input type="button" name="upload" value="上传">
    </p>

    <!--邮箱验证-->
    <p>邮箱: <input type="email"name="email"></p>
    <!--url-->
    <p>ULR: <input type="url"name="url"></p>
    <!--数字-->
    <p>
        商品数量: <input type="number" name="num" max="100" min="10" step="1">
    </p>
    <!--滑块-->
    <p>
       音量: <input type="range" name="voice" max="100"min="0">
    </p>
    
    <!--搜素框-->
    <p>搜索:<input type="search"name="search"></p>
<!--
    submit:提交
    reset:重置
-->
<p>
    <input type="submit">
    <input type="reset">
</p>
<!--文本输入框拓展
value:默认值
maxlength:最大字符长度
size:文本框大小

...
-->

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

运行结果

表单

表单应用

  • 隐藏域

    • 想要隐藏一个文本输入框，只需要在标签内添加一个hidden

    • ```html

      姓名: 

      1
      2
      3
      4
      5
      6
      7
      8
      9

        - 添加hidden后，输入框被隐藏 通常会添加一个value作为默认值

      - 只读

        - readonly

        - ```html
          <p>姓名: <input type="text" name="username" value="admin" readonly> </p>

    • 添加了readonly后，姓名只读不可改变

  • 禁用

    • disable

    • ```html

      性别: 男 女 

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17

        - 添加了disable不可选中

      #### **增强鼠标可用性**

      如何点击文字锁定输入框

      需要用到`<label>`标签

      通过在输入框中定一个`id="xxx"`然后用`<label> for="xxx"`实现

      ```html
      <!--增强鼠标可用性-->
          <p>
              <label for="mark">点击</label>
              <input type="text" id="mark">
          </p>

表单的初级验证

placehoder 提示信息+required 非空判断

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
</head>
<body>
<form action="1我的第一个网页.html"method="post">
    <!--文本输入框标签-->
    <p>姓名: <input type="text" name="username" placeholder="请输入用户名" required> </p>
    <!--密码输入框-->
    <p>密码: <input type="password" name="password" placeholder="请输入密码" required> </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>
</body>
</html>

运行结果

image-20210525160046240

pattern 正则表达式

1
2
3
4
<!--自定义邮箱--->
    <p>
        <input type="text" name="dchyemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
    </p>
笔记
html

博主码字不易，本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！