小白写的文章,其中可能会有错误,或者说得不够详细,欢迎大家斧正,初学者可以看一看作为自己学习的参考,笔者会尽全力保证文章的质量。
1 简介
html文件有他自己的格式要求,在这里,我会简单的介绍一下目前常用的文本格式,仅作参考,初学者仅需了解大致上的结构即可,想要详细了解的朋友可以自行搜索
<!DOCTYPE html> // 声明文件,告知计算机这是 html5 类型
<html lang="en"> // html5 文件均以标签<html>开始,以标签</html>结束
<head> // <head>标签是HTML文件的头部部分,在这里定义网页的基本信息,如标题、样式等
<meta charset="UTF-8"> // <meta>标签可以描述页面的作者、摘要、关键字、版权、自动刷新等页面信息(UTF-8 是字符集编码,h5设置该属性所需代码量大幅减少)
<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> // <body>标签是HTML文件的身体部分,大部分代码都要写在这里
<div>Hello World!</div>
</body>
</html>
上述代码的实例效果
2 标签
2.1 标签的概念
像上面的<head><body><meta>等都是标签,它是HTML的重要组成部分,分为单标记和双标记两种,单标记只有起始标记没有结束标记,双标记有成对的开始标记和结束标记。
<hr/> <!--单标记,也叫自结束标记-->
<div></div> <!--标准标记,前面是开始标记,后面是结束标记,标记可以嵌套,但是不能交叉嵌套-->
标签有三种类别,分别是块级标签和行级标签
- 块级标签在网页中显示为块,一般都是独占一行,新的块级标签会从下一行开始排列,它可以容纳内联元素和其他块级元素。
- 与块级标签不同,行级标签在页面中可以和其他元素在同行显示,直到一行不能放下一个完整的元素,并且通常行级元素内不会包含其他元素。
注意:块级标签与行级标签的特点与区别
- 块级标签自动换行,前后隔一行;行级标签不会自动换行,从左往右依次显示。
- 块级标签的宽度默认是 100%;行级标签的宽度由文字内容撑开。
- 块级标签可以设置宽度、高度、边距等属性;行级标签不能设置上述属性
2.2 标签的属性
标签属性是标签的一部分,用于包含额外的信息,每个标签可以有多个属性,同时属性和属性值成对出现。
<img src="../image/a.png" with="100" height="100"/>
<!-- 结构为: 属性名 = "属性值" -->
2.3 块级标签
下面是总结的比较常用的一些块级元素,足够初学者的日常使用
- <h1/></h1>···<h6></h6>:标题标签
标题标签的作用是这个段落的大小,一共六级,字体大小逐级递减
<body>
<h1>h1 标题标签</h1>
<h2>h2 标题标签</h2>
<h3>h3 标题标签</h3>
<h4>h4 标题标签</h4>
<h5>h5 标题标签</h5>
<h6>h6 标题标签</h6>
</body>
- <hr/>:水平线标签
作用:添加一条水平分隔线,让页面更容易区分。
<body>
<span>我在水平线上面</span>
<hr/>
<span>我在水平线下面</span>
</body>
- <p></p>:段落标签
使用段落标签可以区分段落,不同的段落间会自动增加换行符,段落上下方各会有一个空行的间隔。
<body>
<p>我是第一段文字</p>
<p>我是第二段文字</p>
</body>
- <br/>:换行标签
换行标签可以控制段落中的文字的换行显示,一般的浏览器会根据窗口的宽度自动将文本进行换行显示
<body>
<p>
我是第一段文字<br/>我是第二段文字
</p>
</body>
- <ul><li></li></ul>:无序列表标签
无序列表是将文字段落向内缩进,并在每个列表项前面加上圆形(●)、空心圆形(○)或方形(■)等符号,以达到醒目的效果。由于无序列表没有顺序编号,而是采用项目符号的形式,所以又被称为符号列表。
<body>
<ul type="disc">
<li>鼠标</li>
<li>键盘</li>
<li>显示器</li>
</ul>
<ul type="circle">
<li>鼠标</li>
<li>键盘</li>
<li>显示器</li>
</ul>
<ul type="square">
<li>鼠标</li>
<li>键盘</li>
<li>显示器</li>
</ul>
</body>
- <ol><li></li></ol>:有序列表标签
有序列表是将文字以特定的顺序来进行排列,每个列表项会向内缩进,并且它们之间以编号来标记,比如 1、2、3、…。
有序列表有一些特殊的属性,比如:
type 用于设置编号样式,其值可以是:1、A、a、Ⅰ、i
start 用于设置编号的起始值,其值可以是:1、2、3等数字
reversed 用于反向排序
我尽可能写出更多的情况,还是不太会的朋友可以自己实操试试
<body>
<h4>阿拉伯数字列表</h4>
<ol type="1">
<li>鼠标</li>
<li>键盘</li>
<li>显示器</li>
</ol>
<h4>大写字母列表</h4>
<!-- 从第二位开始 -->
<ol type="A" start="2">
<li>鼠标</li>
<li>键盘</li>
<li>显示器</li>
</ol>
<h4>大写罗马数字列表</h4>
<!-- 列表序号反转 -->
<ol type="I" reversed>
<li>鼠标</li>
<li>键盘</li>
<li>显示器</li>
</ol>
</body>
- <dl></dl>:定义列表标签
定义列表适用于对名词、概念或主题的定义,第一部分是名词、概念或主题,并且通常只有一项,第二部分是相应的解释和描述,可以有多项。
<body>
<dl>
<dt>咖啡</dt>
<dd>一种黑色的热饮料,原料是咖啡豆,非洲盛产这类原料。</dd>
<dd>可以提神,刺激神经。</dd>
</dl>
<dl>
<dt>茶</dt>
<dd>是中国特有的一种著名饮品,畅销海内外。</dd>
<dd>茶叶可作饮品,含有多种有益成分,并有保健功效。</dd>
</dl>
</body>
- <div></div>:分区标签
<body>
<div style="width: 100px; height: 100px; background-color: red;">这是一个 div</div>
</body>
2.4 行级标签
<img/>:图片标签
网页中除了文本,最常用的就是图片,合理的布局加上适当的图片能有效的提高用户的观感,图片一般都不会太大,太大的图片你会影响页面的加载速度,太小的会模糊不清。网页中图片的常用格式为 GIF、JPG 和 PNG 等。
<img src = "图片链接" alt = "图标加载失败显示的文本" title = "图片的标题">
图片标签主要有5个属性:
1、src 属性
src 属性表示引用图片的路径地址。
路径地址的写法共有三种:
(1)相对路径:以当前文件为准,去寻找图片地址。
1.与当前文件处于同一层的图片,直接写图片名。
2.图片在当前文件下一层:文件夹名/图片名。
3.图片在当前文件上一层:…/图片名
(2) 绝对路径:file:///盘符:/文件夹/图片.扩展名。但这种方式严禁使用,原因有两点:
1.绝对路径只在当前计算机生效,若将网站转移服务器,则路径会失效。
2.通过绝对路径打开图片使用的是 file 协议,但网页中使用的是http 协议,因此会出现跨域问题,造成图片无法显示。
(3)网络地址:使用网络上的图片链接。但是,一般不使用网络地址,原因是网络图片可能由于各种原因被删除、转移位置,使图片无法打开
2、alt 属性
该属性可设置由于图片无法加载时显示的文字。
3、title 属性
该属性用于设置图片的标题,即当鼠标指在图片上后显示的文字。
4、height 和 width 属性
height 和 width 属性分别表示图片的宽度和高度。
在这里推荐用 CSS代替。CSS 代码如下:
style="width: 100px; height: 100px;"
5、align 属性
该属性可设置图片周围文字相对于图片的位置。常用属性值有 top、center、bottom,用处不大,推荐用 CSS 来控制样式,此处不再详细解释。
<a></a>:超链接标签
通常,一个网站是由多个页面组成的,而不同页面的跳转就需要使用链接。<a>标签可以设置一个超链接,单击超链接可以跳转到新的文档或者当前文档中的某个部分。
<a href="#">这是一个超链接</a>
1.超链接标签的属性
(1)href 属性
在<a>标签中使用 href 属性来描述链接的地址,这个地址可以是网络链接,也可以是本地文件。当用#时,表示这是一个空的超链接。
(2)target 属性
使用 target 属性可以定义通过超链接打开的文档在何处显示。常用的两个属性值分别为:_self(在与链接相同的框架中打开被链接文档)和 _blank (在新窗口中打开链接),默认属性值为_self,其他属性值可以通过查阅帮助文档了解。
2.锚链接的用法
(1)本页面锚链接
- 设置锚点:
<a name="top"></a>
- 在超链接上,使用#name 跳转到对应锚点。基本语法如下:
<a href="#top" target="_self">这是一个超链接</a>
(2)页面间锚链接
- 在即将跳转页面的指定位置,设置锚点。
- 在超链接的 href 属性中,使用"页面地址.html#name"。
<a href="t.html#weixin">跳转到新页面指定部分</a>
其他常用的行级标签
除了较为重要的图片标签和超链接标签,还有一些常见的行级标签,如:<span>、<em>、<strong>、<i>、<b>等,这些标签的使用较少,这里不再详解,可自行前往文档查看
详细了解HTML标签:HTML标签列表
HTML5新增标签
标签 | 作用 |
---|---|
<section> | 表示页面中的一个内容区块、文档的主体部分,用于将网页或文章划分章节、区块 |
<article> | 表示页面中的一块与上下文不相关的独立内容,如博客中的一篇文章 |
<aside> | 表示 article 元素内容之外的,与 article 元素内容相关的辅助信息 |
<header> | 网页或文章的头部 |
<footer> | 网页或文章的底部 |
<nav> | 表示页面中导航链接的部分 |
<hgroup> | 将整个页面或页面中一个内容区块的标题进行组合 |
3 表格
表格是 HTML5 中的重要布局之一,虽然在实际开发中它有着自己局限性,但是这并不妨碍我们要对它有足够的了解,并能熟练的使用它,通过对表格的学习,学会网页的布局思想。
3.1 简介
表格在网页布局中非常常用,表格可以用一种非常简单的方式,把网页的各个板块以行列的方式排列,对我们的网页布局有很好的提升作用。
3.1.1 表格的基本结构
表格的基本结构由行列组成,单元格是表格的最基本单位,如下图所示
3.1.2 表格的定义
表格由 <table> 标签定义。每个标签均有若干行,行由 <tr> 标签定义,每行被分割为若干单元格,列由 <td> 标签定义。如果表格的第一行为表头,那么 <td> 标签需要用 <th> 标签替换掉。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。
<body>
<table>
<tr>
<th>表头 1</th>
<th>表头 2</th>
<th>表头 3</th>
</tr>
<tr>
<td>第一行 1</td>
<td>第一行 2</td>
<td>第一行 3</td>
</tr>
<tr>
<td>第二行 1</td>
<td>第二行 2</td>
<td>第二行 3</td>
</tr>
</table>
</body>
3.2 表格的基本属性
表格的属性可以分为两大类,分别为作用于<table>标签的(即对表格的整体样式进行设置)和作用于行<tr>、列<td>的(即对单个行列的宽高背景色等属性设置)属性。下面介绍作用于<table>标签的各种属性。
- border:表格边框属性
border 属性定义表格边框,属性值可以接收整数类型的数字,表示设置表格的宽度。
注意:如果 border 的值增大,则只有表格最外围框线增加,每个单元格上的边框并不会变化。
<table border="1"> </table>
- width/height:表格(宽度/高度)属性
width 属性和 height 属性分别定义表格宽度和高度。
<table border="1" width="400" height="200"> </table>
- bgcolor:表格背景色属性
bgcolor 属性定义表格的背景色,设置颜色值,即可修改表格的背景色。
<table border="1" bgcolor="red"> </table>
- background:表格背景图属性
background 属性定义表格的背景图,需要传入一张图片的路径地址。当background 背景图属性与 bgcolor 背景色属性同时存在时,背景图会覆盖掉背景色。
<table border="1" background="img/img.png"> </table>
- bordercolor: 表格边框颜色属性
bordercolor 属性定义表格的边框颜色,设置颜色值,修改边框颜色。
<table border="1" bordercolor="blue"> </table>
- cellspacing:表格单元格间距属性
cellspacing 属性定义表格单元格与单元格之间的间距。 通过实际操作可知,表格单元格与单元格之间默认存在一定的间距。 使用 cellspacing 属性可以手动调整这个间距的大小。当 cellspacing 设为 0 时,单元格之间没有间距。
<table border="1" cellspacing="10"> </table>
注意:使用“cellspace=“0””设置单元格之间没有间距,并不能合并相邻边框。
合并相邻边框可以使用 CSS ,(注:使用这行 CSS 语法后,cellspacing 属性将会失效)基本语法如下:
<table border="1" style="border-collapse: collapse;"> </table>
- cellpadding:表格单元格内边距属性
cellpadding 属性定义单元格的内边距,即单元格中的文字与单元格边框之间的距离。
<table border="1" cellpadding="10"> </table>
- align:表格对齐属性
align 属性用于调整表格在其父容器中的位置,可选值有 left(居左)、center(居中)、right(居右)。
注意:表格的 align 属性现在不再建议使用。它的相关功能已经被 CSS 中的浮动(float)所取代,大家了解即可。
<table border="1" align="center"> </table>
3.3 行列属性
了解了用于表格的各种属性,接下来继续学习作用于行<tr>、列<td>的属性。
- width/height:单元格宽度/高度属性
width/height 属性主要用于调整表格中单元格的宽和高。
<table>
<tr>
<td width="100" height="50">第一行 1</td>
<td>第一行 2</td>
<td>第一行 3</td>
</tr>
</table>
该代码仅会修改第一个单元格的宽度、高度为 100px、50px,不会影响其他单元格
注意:当表格属性与行列属性冲突时,以行列属性为准。
- bgcolor:单元格背景色属性
bgcolor 属性主要是修改单元格的背景色。
<table border="1">
<tr>
<td bgcolor="#0000FF">第一行 1</td>
<td>第一行 2</td>
<td>第一行 3</td>
</tr>
</table>
该代码仅会修改第一个单元格的背景色为蓝色,不影响其他单元格
- align:单元格内容水平对齐属性
align 属性控制单元格中内容的水平位置。基本语法如下:
<table border="1" width="300" height="50">
<tr>
<td align="left">第一行 1</td>
<td align="center">第二行 2</td>
<td align="right">第三行 3</td>
</tr>
</table>
该代码三个单元格中的文字分别为相对于单元格水平方向居左、居中、居右。
注意:表格的 align 属性是控制表格自身在浏览器中的显示位置,而行列的 align 属性是控制单元格中文字在单元格中的对齐方式。
表格的 align 属性并不影响表格内文字的水平方式,<tr>标签的 align 属性可以控制一行中所有单元格的水平对其方式。
- valign:单元格内容垂直对齐属性
valign 属性控制单元格中内容的垂直位置。其属性值分别为:top(顶部)、center(居中)、bottom(底部)
<table border="1" width="200" height="100">
<tr>
<td valign="top">第一行 1</td>
<td valign="center">第一行 2</td>
<td valign="bottom">第一行 3</td>
</tr>
</table>
该代码三个单元格中的文字分别为相对于单元格垂直方向居上、居中、居下。
注意:当表格属性与行列属性冲突时,以行列属性为准(近者优先)。
- colspan /rowspan:表格的跨行与跨列
在实际见到的表格中,很多都是组合类表格。如下图所示,单元格“学生成绩”属于跨三列,单元格“张三”、单元格“李四”属于跨两行。为了实现这类的表格需求,就需要掌握表格单元格合并属性,通常也叫跨行或者跨列合并属性。
代码实现:
<table border="1">
<tr>
<td colspan="3">学生成绩</td> <!-- 设置占据的列数 -->
</tr>
<tr>
<td rowspan="2">张三</td> <!-- 设置占据的行数 -->
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>88</td>
</tr>
<tr>
<td>数学</td>
<td>91</td>
</tr>
</table>
注意:
colspan 属性表示跨列,当某个格跨 N 列时,其右边 N-1 个单元格需删除。
rowspan 属性表示跨行,当某个格跨 N 行时,其下方 N-1 个单元格需删除。
3.4 表格的结构化与直列化
为了更好地管理及格式化表格,更好地语义化标签,需要掌握表格的结构化与直列化。
3.4.1 表格的结构化
表格的结构化就是将表格分为表头、表体、表尾三部分,这样在修改其中一部分时不会
影响到其他部分,方便对表格进行操作。
一个完整的表格通常包括以下四部分:
1)caption:表格的标题,通常出现在表格的顶部。
2)thead:定义表格表头,通常表现为标题行。
3)tbody:定义一段表格主体,一个表格可以有多个主体,可以按照行来进行分组。
4)tfoot:定义表格的脚尾,通常表现为总计行。
<table width="500">
<caption>表格标题</caption>
<thead>
<tr>
<th>表格头部</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格主体</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>表格底部</td>
</tr>
</tfoot>
</table>
tbody 包含行的内容下载完优先显示,不必等待表格结束。另外,还需要注意表格行本
来是从上向下显示的,但是应用了<thead><tbody><tfoot>以后,就“从头到脚”显示,即不
管行代码顺序如何,即使<thead>写在了<tbody>的后面,网页显示时,还是先<thead>后
<tbody>显示。
3.4.2 表格的直列化
通过设置表格的直列化可以对表格的列进行分组,以便对其进行格式化。
基本语法如下:
<table width="500">
<!--前两列为一组-->
<colgroup style="background-color: yellow;">
<!--第一列-->
<col />
<!--第二列-->
<col />
</colgroup>
<!--第三列-->
<col style="background-color: blue;" />
<caption>表格标题</caption>
<thead>
<tr>
<th>头 1</th>
<th>头 2</th>
<th>头 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>尾 1</td>
<td>尾 2</td>
<td>尾 3</td>
</tr>
</tfoot>
</table>
如需对全部列应用样式,<colgroup> 标签很有用,这样就不需要对各个单
代码如下:
<body>
<h2 style="width: 500px;text-align: center; text-decoration: underline;">特别休假申请单</h2>
<p>申请日期: 年 月 日</p>
<table width="500" border="1" style="border-collapse: collapse;">
<tr>
<td>所属单位</td>
<td> 部 组 班</td>
<td>职称</td>
<td>111</td>
<td>姓名</td>
<td>111</td>
<td>厂长</td>
</tr>
<tr>
<td rowspan="2">期间</td>
<td colspan="3"> 年 月 日</td>
<td rowspan="2" colspan="2">天数</td>
<td>111</td>
</tr>
<tr>
<td colspan="3"> 年 月 日</td>
<td>主管</td>
</tr>
<tr>
<td colspan="2">职务代理人</td>
<td colspan="4">盖章</td>
<td>111</td>
</tr>
<tr>
<td>到期日期</td>
<td colspan="3"> 年 月 日</td>
<td colspan="2">审核意见</td>
<td>组长</td>
</tr>
<tr>
<td colspan="2">全年特别休假数</td>
<td colspan="2" align="right">天</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td colspan="2">已请假数</td>
<td colspan="2" align="right">天</td>
<td>人事主任</td>
<td>人事经办</td>
<td>组长</td>
</tr>
<tr>
<td colspan="2">本次申请日数</td>
<td colspan="2" align="right">天</td>
<td rowspan="2">111</td>
<td rowspan="2">111</td>
<td rowspan="2">111</td>
</tr>
<tr>
<td colspan="2">尚剩申请日数</td>
<td colspan="2" align="right">天</td>
</tr>
</table>
</body>
4 表单
网页中,表单主要是用于让客户填写信息,然后把信息提交到后台服务器,使网页具有交互作用。
4.1 简介
表单是网页的交互功能的重要体现,使用表单可以非常简单的实现用户和后台服务器之间的数据交换,像我们平时常用的账号的注册页面,论坛的发帖留言,在线购物的购物车都会用到表单功能。
4.1.1 表单的结构
表单由许多表单控件实现,主要包括用户填写信息部分和表单提交按钮。用户填写数据完成后,点击“提交”按钮即可将数据发送到服务器,之后经过后台软件的程序处理后将用户所需的信息返回客户端,格式如下:
<form>
input 元素(<input type = " ">)
</form>
注意:表单内容由<form></form>包裹,所有的表单控件都需要写在<from>中
4.1.2 <form>的常用属性
1.action 属性
action 属性用于指定表单提交时向何处发送表单数据,即需要发送的服务器地址。
2.method 属性
method 属性用于指定表单向服务器提交数据的方法,包括两种方法,分别是 get 和
post。
3.enctype 属性
enctype 属性指定表单发送的编码方式,只有 method="post"时才有效,共有三种属性值。
注意:初学者使用较少,不过多赘述
4.2 imput 输入框
输入框用于收集用户信息,用户通过在输入框中输入数据,然后实现数据的传输。
input 常用属性
1.type 属性
type 属性表示 input 输入框的类型,它的默认值是 text。可用属性值如下:
button 自定义按钮 submit 提交按钮 reset 重置按钮
file 文件上传按钮 image:图形提交按钮
text 普通文本域 textarea 多行文本域 password 密码字段
checkbox 复选框 radio 单选按钮
注意:所有浏览器都支持 type 属性,但是 type 的属性值并不是所有浏览器都可以支持,在实际使用的时候要考虑到属性值的兼容问题,本文介绍的属性值在大部分浏览器上都可以使用,如果出现兼容问题,可以尝试自行百度解决。
2.name 属性
name 属性表示 input 输入框的名称,一般必填。因为传递数据时,使用“name=value”的形式传递。
注意:只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
3.value 属性
value 属性表示 input 输入框的初始值。
对于不同的输入类型,value 属性的用法也不同:
- type=“button”, “reset”, “submit” - 定义按钮上的显示的文本
- type=“text”, “password”, “hidden” - 定义输入字段的初始值
- type=“checkbox”, “radio”, “image” - 定义与输入相关联的值
注:<input type=“checkbox”> 和 <input type=“radio”> 中必须设置 value 属性。
注:value 属性无法与 <input type=“file”> 一同使用。
4.placeholder 属性
placeholder 属性表示输入框中的提示信息,当输入框有 value 属性的时候,提示内容会
消失,转而显示 value 属性值。
5.tabindex 属性
tabindex=“1” 此属性控制按 Tab 键时的跳转顺序,从最小的数值开始,逐个往大的数值
跳转,依次获得焦点。
6.input 元素的其他属性
除以上属性外,input 还有一些属性名等于属性值的特殊属性,具体如下:
1) checked=“checked” 默认选中。
2)disabled=“disabled” 设置控件不能使用。用在按钮上效果为不能单击,用在输入框上
则表示不能修改。而且,如果输入框设置为 disabled,则输入框中的信息不能往后台传递。
3)hidden=“hidden” 设置隐藏控件。
4.3 select 下拉选择控件
在表单中通过控件可以创建一个下拉式的列表或带有滚动条的列表,可以在列
表中选中一个或多个选项,通常用于填写生日、所在地区等信息。
<form action="" multiple size="1">
<select name="week">
<optgroup label="一组">
<option value="1" title="你好">周一</option>
<option value="2" selected>周二</option>
<option value="3">周三</option>
</optgroup>
<optgroup label="二组">
<option value="1">周四</option>
<option value="2">周五</option>
</optgroup>
</select>
</form>
1.<select>标签的属性
1)name=“列表名”:所有选项只有一个 name。
2)multiple:设置 select 控件为多选,可在列表中使用 Ctrl 键+鼠标进行多选。一般不用。
3)size=“1”:规定下拉列表中可见选项的数目。如果 size 属性的值大于 1,但是小于
列表中选项的总数目,下拉列表就会显示出滚动条,
2. <option>标签的属性
1)value="":分为两种情况。
当选项 option 没有 value 属性时,往后台传递的是<option></option>标签中的文字;
当选项 option 有 value 属性时,往后台传递的是 value 属性的值。
2)title="":鼠标移动上去后显示的文字,与图片的 title 属性类似。
3)selected:默认选中,即默认选中的选项。
3.利用<optgroup>标签分组
<optgroup label=“分组名”></optgroup>用于将<option>标签进行分组,label 属性表示分组名。
4.4 补充
autocomplete 属性可用于 开启(on)/关闭(off) 浏览器对输入项的记忆
适用的标签:text, search, url, telephone, email, password, datepickers, range 以及 color
formaction 属性用于描述表单提交的URL地址。(跳转地址)
formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method=“post” 表单),覆盖 form 元素的 enctype 属性。
formmethod 属性重新定义了表单提交的方式,覆盖了 元素的 method 属性。
formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示(即新页面的打开方法)。
注意: formaction formenctype formmethod formtarget 属性用于 type=“submit” 和 type=“image”.
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。(即取消对输入内容的验证)(boolean 属性)
autofocus 属性规定在页面加载时,域自动地获得焦点。( boolean 属性.)
formnovalidate 属性会覆盖 元素的novalidate(无法验证)属性。( boolean 属性.)
required 属性规定输入域不能为空。( boolean 属性.)
multiple 属性规定 元素中可选择多个值。(适用标签email 和 file)
placeholder 属性提供一种提示(hint),描述输入域所期待的值。
pattern 属性对输入的数据的类型和数目进行定义
step 属性为输入域规定合法的数字间隔。(如果 step=“3”,则合法的数是 -3,0,3,6 等)
<datalist> 元素规定输入域的选项列表。
<keygen> 元素的作用是提供一种验证用户的可靠方法。
<output> 元素用于不同类型的输出,比如计算或脚本输出。
感谢观看,如有问题可以在评论区提出,谢谢!