HTML5知识全解

明月落乌江

已于 2022-10-12 16:33:15 修改

阅读量2k

点赞数 3

分类专栏： HTML 文章标签： html5

于 2022-03-23 08:57:11 首次发布

本文链接：https://blog.csdn.net/qq_54334713/article/details/123673358

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML5

HTML5语法

HTML5的标签

标签是HTML5最基本单位和最重要的组成。

使用“<”和“>”括起来，标签都是闭合的(规范)

单标记只有起始标记而没有结束标记

双标记是成对的开始标记和结束标记

<hr/> 
<!--单标记，也叫自结束标记-->
<title></title>
 <!--标准标记，前面是开始标记，后面是结束标记，标记可以嵌套，但不能交叉嵌套-->

HTML5标签属性

标签属性是标签的一部分，用于包含额外的信息。一个标签中可以有多个属性，并且属性和属性值成对出现

<img src="../image/a.png" width="100" height="100"/><!-- 结构是 属性名="属性值" -->

HTML5 文档注释

注释是对文档的解释，浏览器不会对注释内容进行解析并呈现到页面上，只有查看HTML5 文件源代码时才会看到注释，基本语法如下

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

HTML5的文档结构

HTML5 的基本格式

<!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>
</body>
</html>

基本格式解读

DOCTYPE

文档类型声明（Document Type Declaration，也称 Doctype）

它主要告诉浏览器所查看的文件类型。在以往的 HTML4.01 和 XHTML1.0 中，它表示具体的 HTML 版本和风格，而如今 HTML5 不需要表示版本和风格了。

<!DOCTYPE html> 不分区大小写

html

首先，元素就是标签的意思，html 元素即 html 标签。html 元素是文档开始和结尾的元素。它是一个双标签，头尾呼应，包含内容。

这个元素有一个属性和值：lang="zh-cn"，

表示文档采用语言为：简体中文。

<html lang="zh-cn"> //如果是英文则为 en’

简体中文页面：html lang=zh-cmn-Hans

繁体中文页面：html lang=zh-cmn-Hant

英语页面：html lang=en

head

用来包含元数据内容，元数据包括：<link>、<meta>、<noscript>、<script>、<style>、<title>。

这些内容用来浏览器提供信息，比如 link 提供 CSS 信息，script提供 JavaScript 信息，title 提供页面标题等。

这些信息在页面不可见

meta

这个元素用来提供关于文档的信息，可以描述页面的作者、摘要、关键词、版权、自动刷新等页面信息。

（1）charset 属性

表示告诉浏览器页面采用的什么编码，一般来说我们就用 utf8。当然，文件保存的时候也是utf8，而浏览器也设置 utf8 即可正确显示中文（不写此属性会乱码）

（2）http-equiv 属性

http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

meat标签的http-equiv属性语法格式是：＜meta http-equiv="参数" content="参数变量值"＞

（3）name 属性

将信息写给搜索引擎看。

使用方法同 http-equiv 属性。

常用的属性值有 author（作者）、keywords（网页关键字）、description（网页描述），它们在网页中必不可少。

<!--作者-->
<meta name="author" content="xxxxx" />
<!--网页关键字：多个关键字用英文逗号分隔-->
<meta name="keywords" content="HTML5,网页,Web 前端开发" />
<!--网页描述：搜索网站时，title 下面的解释文字。-->
<meta name="description" content="这是第一个网页" />

link

link 元素是空元素，它仅包含属性。

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

rel 属性：声明被链接文件与当前文件的关系
type 属性：声明被链接文件的类型，可以省略。
href 属性：表示图片的路径地址。

在网页标签中的标题文字前显示一个小图片，这就是网页的图标。

<link rel="icon" type="image/x-icon" href="img/icon.jpg" />

title

这个元素很简单，顾名思义：设置浏览器左上角的标题。

body

用来包含文档内容的元素，也就是浏览器可见区域部分。所有的可见内容，都应该在这

个元素内部进行添加。

HTML5 常见的块级标签和行级标签

常见的块级标签

标题标签

<body>
    <h1>h1 标题标签</h1>
    <h2>h2 标题标签</h2>
    <h3>h3 标题标签</h3>
    <h4>h4 标题标签</h4>
    <h5>h5 标题标签</h5>
    <h6>h6 标题标签</h6>
</body>

标题标签的作用是:

设置段落标题的大小，共设置了 6 级，从 1 级到 6 级每级标题的字体大小依次递减。

水平线标签

<hr/>

<body>
    <span>我在水平线上面</span>
    <hr />
    <span>我在水平线下面</span>
</body>

水平线标签的作用

是添加水平分隔线，让页面更容易区分段落。

段落标签

<body>
    <p>我是第一段文字</p>
    <p>我是第二段文字</p>
    <p>我是第三段文字</p>
</body>

使用段落标签可以区分段落，不同的段落间会自动增加换行符，段落上下方各会有一个空行的间隔。

换行标签

<br/>

<body>
    <p>我是第一 <br> 段文字</p>
    <p>我是第二段文字</p>
    <p>我是第三段文字</p>
</body>

使用换行标签可以控制段落中文字的换行显示。

一般的浏览器会根据窗口的宽度自动将文本进行换行显示。

引用标签

<blockquote cite="哔哩哔哩 (゜-゜)つロ干杯~-bilibili">引用的文字</blockquote>

<body>
    <p>我是第一段文字</p>
    <blockquote cite="https://www.bilibili.com/">引用的文字</blockquote>
    <p>我是第二段文字</p>
    <p>我是第三段文字</p>
</body>

使用引用标签来表示引用的文字，同时会将标签内的文字缩进显示。

其 cite 属性表明引用的来源，一般表明引用网址。

预格式标签

<pre>需要按原格式显示的文字</pre>

<body>
    <pre>
      1
     1 1 
   1  1  1
   2  2  2
   3  3  3    
     </pre>
</body>

预格式标签可以将文字按照原始的排列方式进行显示。

无序列表标签

<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 type="1">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>

有序列表是将文字以特定的顺序来进行排列，每个列表项会向内缩进，并且它们之间以编号来标记，比如 1、2、3、…。

定义列表标签

<dl>
<dt>这是定义列表的标题</dt>
<dd>描述项第一项</dd>
<dd>描述项第二项</dd>
<dd>描述项第三项</dd>
</dl>

定义列表适用于对名词、概念或主题的定义，

第一部分是名词、概念或主题，并且通常只有一项，

第二部分是相应的解释和描述，可以有多项。

分区标签

<div style="width: 100px; height: 100px; background-color: red;">
这是一个 div
</div>

标签可定义文档中的分区或节，将文档分割为独立的、不同的部分。

标签的一个常见的用途是文档布局。它可以取代使用表格定义布局的老式方法。如果与 CSS 一同使用，标签可用于对大的内容块设置样式属性。

常见的行级标签

图片标签

src 属性

src 属性表示引用图片的路径地址。路径地址的写法共有三种，分别为相对路径、绝对路径、网络地址。

height 和 width 属性

height 和 width 属性分别表示图片的宽度和高度，推荐用 CSS(style="width: 100px; height: 100px;")代替。

title 属性

该属性用于设置图片的标题，即当鼠标指在图片上后显示的文字

alt 属性

该属性可设置由于图片无法加载时显示的文字

align 属性

该属性可设置图片周围文字相对于图片的位置。常用属性值有 top、center、bottom，用处不大，推荐用 CSS 来控制样式，此处不再赘述。

超链接标签

超链接标签的属性

href 属性

在<a>标签中使用 href 属性来描述链接的地址，这个地址可以是网络链接，也可以是本

地文件。当用#时，表示这是一个空的超链接。

target 属性

使用 target 属性可以定义通过超链接打开的文档在何处显示。

常用的两个属性值分别为

_self（在与链接相同的框架中打开被链接文档）

_blank （在新窗口中打开链接），默认属性值为_self

锚链接的用法

本页面锚链接

设置锚点：<a name="top"></a>
在超链接上，使用#name 跳转到对应锚点

<a href="#top" target="_self">这是一个超链接</a>

页面间锚链接

在即将跳转页面的指定位置，设置锚点。
在超链接的 href 属性中，使用"页面地址.html#name"。

<a href="t.html#weixin">跳转到新页面指定部分</a>

其他常用的行级标签

<em> 侧重点的强调，可嵌套使用，嵌套个数越多，强调级别越高

<strong> 表示内容的重要性，嵌套递增重要性级别

<small> 旁注（side comments），可以用在免责声明，使用条款和版权信息等需要小字体的场景

<s> 有误文本，文本文字上加删除线的样式

<b> 不仅仅是粗体文本，还可以定义一些需要引起注意却没有额外语义的内容，比如摘要的关键和文章导语的加粗等

<i> 不仅是单纯的斜体，还可表示“另一种叙述方式”，常见的场景有外来语、分类名称和技术术语等

<cite> 浏览器显示为倾斜，常用于书、画作、作品的引用

<q> 短引用，显示为文字用""引起来

<code> 只是表示计算机代码，但是浏览器只会显示等宽字体，不会保留代码格式，需配合<pre>标签使用

特点与区别

块级标签自动换行，前后隔一行；行级标签不会自动换行，从左往右依次显示。
块级标签的宽度默认是 100%；行级标签的宽度由文字内容撑开。
块级标签可以设置宽度、高度、边距等属性；行级标签不能设置上述属性。

新增标签

HTML5表格

表格的定义

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

表格由标签定义。行由<tr>标签定义，列由<td>标签定义。

如果表格的第一行为表头，那么标签需要用标签替换掉。

表格的基本属性

作用在<table>

border: 表格边框属性

border 属性定义表格边框，属性值可以接收整数类型的数字，表示设置表格的宽度。

<table border="1"> </table>

如果 border 的值增大，则只有表格最外围框线增加，每个单元格上的边框并不会变化。

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 设为 0 时，单元格之间没有间距

<table border="1" cellspacing="10"> </table>

使用“cellspace="0"”设置单元格之间没有间距，并不能合并相邻边框。

如果需要合并表格边框，则可以使用 CSS，基本语法如下：

<table border="1" style="border-collapse: collapse;"> </table>

关于 CSS 部分将在后续讲解，大家可以先简单了解一下。使用这行 CSS 语法使边框合

并后，cellspacing 属性将会失效

cellpadding: 表格单元格内边距属性

cellpadding 属性定义单元格的内边距，即单元格中的文字与单元格边框之间的距离。

<table border="1" cellpadding="10"> </table>

align:表格对齐属性

align 属性用于调整表格在其父容器中的位置，可选值有 left、center、right，分别表示表格居左、居中、居右。

<table border="1" align="center"> </table>

表格的 align 属性现在不再建议使用。它的相关功能已经被 CSS 中的浮动(float)所取代，大家了解即可。

作用在行<tr>，列<td>

width/height：单元格宽度/高度属性

width/height 属性主要用于调整表格中单元格的宽和高。

<table border="1">
     <tr>
        <td width="100" height="50">第一行 1</td>
        <td>第一行 2</td> 
        <td>第一行 3</td>
    </tr>
</table>

当表格属性与行列属性冲突时，以行列属性为准。

bgcolor：单元格背景色属性

bgcolor 属性主要是修改单元格的背景色。

<table border="1">
      <tr>
        <td bgcolor="#0000FF">第一行 1</td>
        <td>第一行 2</td>
        <td>第一行 3</td>
     </tr>
</table>

align：单元格内容水平对齐属性

align 属性控制单元格中内容的水平位置

表格的 align 属性是控制表格自身在浏览器中的显示位置，而行列的 align 属性是控制单元格中文字在单元格中的对齐方式。

表格的 align 属性并不影响表格内文字的水平方式，标签的 align 属性可以控制一行中所有单元格的水平对其方式。

valign：单元格内容垂直对齐属性

valign 属性控制单元格中内容的垂直位置。

<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：表格的跨行与跨列

colspan 属性表示跨列，当某个格跨 N 列时，其右边 N-1 个单元格需删除。

rowspan 属性表示跨行，当某个格跨 N 行时，其下方 N-1 个单元格需删除。

th&td
<th>和<td>标签都是用于表格单元格显示的。不同的是<th>在单元格中加粗显示。

表格的结构化与直列化

表格的结构化

表格的结构化就是将表格分为表头、表体、表尾三部分，这样在修改其中一部分时不会影响到其他部分，方便对表格进行操作。

一个完整的表格通常包括以下四部分：

caption：表格的标题，通常出现在表格的顶部。
thead：定义表格表头，通常表现为标题行。
tbody：定义一段表格主体，一个表格可以有多个主体，可以按照行来进行分组。
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>显示。

表格的直列化

通过设置表格的直列化可以对表格的列进行分组，以便对其进行格式化。

 <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> 标签只能在中使用。

HTML5表单

表单结构

表单由许多表单控件组成，主要包括用户填写信息部分和表单提交按钮。用户填写数据

完成后，单击“提交”按钮就可以发送数据到服务器，经过后台程序处理后将用户所需的信

息返回到客户端，在浏览器中展示给用户，表单内容由<form></form>包裹。

<form>各种表单控件</form>

表单的常用属性

action 属性

action 属性用于指定表单提交时向何处发送表单数据，即需要发送的服务器地址。

基本语法如下：

<form action="form.php">各种表单控件</form>

method 属性

method 属性用于指定表单向服务器提交数据的方法，包括两种方法，分别是 get 和post。

这两种方法各有特点，下面分别进行具体介绍。

get方法的特点

使用 URL（统一资源定位符）传递参数：http://服务器地址?name1=value1&name2=value2，

其中“?”符号表示要进行参数传递，

“?”符号后面采用“name=value”的形式传递，

多个参数之间，用“&”符号连接。

URL 传递的数据量有限，只能传递少量数据。

注意：使用 URL 传递参数并不安全，所有信息可在地址栏中看到，并且可以通过地址

栏随意传递其他数据。

post 方法的特点

将数据封装后使用 http 请求传递，信息在地址栏中不可见，比较安全，并且传递的数据量理论上没有限制。

综上所述，虽然 get 方法是表单提交的默认方法，但是通常采用 post 方法传递数据。

<form action="form.php" method="post">各种表单控件</form>

enctype 属性

enctype 属性指定表单发送的编码方式，只有 method="post"时才有效，共有三种属性值。

application/x-www-form-urlencoded：此为默认值，如果 enctype 属性省略不写，则表示采取此种编码方式。
multipart/form-data：不对字符编码，用于上传文件时使用。
text/plain：将空格转换为“+”符号，但不编码特殊字符，通常在将表单发送到电子邮箱时使用。

input输入框

作为表单最重要的元素，input 输入框用于搜集用户信息。根据不同的 type 属性值，可

以用多种形式输入内容。

例如，当 type 值为 password 时就可以设置输入框为输入密码形式，此时用户输入的内容用小黑点代替显示。灵活使用 input 输入框可以让表单收集更多的信息，下面来具体学习 input 输入框的相关属性和类型。

input 常用属性

type 属性

type 属性表示 input 输入框的类型，它的默认值是 text。所有浏览器都支持 type 属性，

但是 type 的属性值并不是所有浏览器都可以支持，本节介绍的属性值所有浏览器均可支持，

但后续小节提到的某些 HTML5 表单新增属性值则需要注意浏览器的兼容性。

name 属性

name 属性表示 input 输入框的名称，一般必填。

因为传递数据时，使用“name=value”的形式传递。

value 属性

value 属性表示 input 输入框的默认值。

placeholder 属性

placeholder 属性表示输入框中的提示信息

当输入框有 value 属性的时候，提示内容会消失，转而显示 value 属性值。

<form action="form.php" method="post">

      请输入内容：
     <input name="text1" type="text" placeholder="请输入"/>
</form>

tabindex 属性

tabindex="1" 此属性控制按 Tab 键时的跳转顺序

从最小的数值开始，逐个往大的数值跳转，依次获得焦点。

input 元素的其他属性

checked="checked" 默认选中。
disabled="disabled" 设置控件不能使用。用在按钮上效果为不能单击，用在输入框上则表示不能修改。而且，如果输入框设置为 disabled，则输入框中的信息不能往后台传递。
hidden="hidden" 设置隐藏控件。基本语法如下：

<input type="hidden" name="username" value="1234"/>

它常用于配合 disabled 属性，或根据其他需要，使用隐藏域传递数据。

除了上面介绍的 input 输入框具有此类特殊属性，表单的其他部分控件也有此类属性名等于属性值的属性

text文本输入框

文本输入框用于输入单行文本，默认宽度为 20 个字符。

在登录注册时，常常用到文本输入框，它主要用于填写用户名称。

<form action="form.php" method="post">
     请输入内容：
       <input name="text1" type="text" maxlength="10" size ="5"/>
       <!--上述代码表示这个文本输入框的最大字符长度为 10，可显示的字符数为 5 -->
</form>

password：密码输入框

密码输入框输入的内容会以小黑点的形式替代显示

最常见的一种用法就是用户注册登录时需要输入账号密码框，小黑点的形式可以有效地避免密码泄露。

radio：单选按钮

单选按钮用于填写表单时信息选择，如调查问卷中的单选题。

<form action="form.php" method="post">
<input type="radio" name="sex" value="男" checked="checked" />男  <!--默认选男-->
<input type="radio" name="sex" value="女" />女
</form>

name 和 value 属性需同时存在，提交时，提交的是 value 中的属性值。例如：<input type="radio" name="sex" value="男"/> 提交时，显示"sex=男"。
radio 凭借 name 属性区分是否为同一组。name 相同，为同组，同组中只能选择一个。
checked="checked" 默认选中。radio 只能选一个，checkbox 可以选多个。

checkbox：复选按钮

复选按钮与单选按钮相同，也用于填写表单时信息选择，如调查问卷中的多选题。

file：文件上传按钮

文件上传按钮用于文件上传，单击“选择文件”按钮会弹出对话框，选择需要上传的文

件。

submit：表单提交按钮

表单提交按钮用于提交表单数据，单击按钮后，表单中用户填写的信息会被发送到表单

指定的地方进行处理。

<form action="form.php" method="post">    
  <input type="submit"" value="登录"/></form>

当没有 value值时，submit 按钮中默认显示的文字为“提交”。

reset：重置按钮

重置按钮将表单数据重置为初始状态，通常是清空表单已填内容。

image：图形提交按钮

图形提交按钮需要添加 src 属性来设置图片路径。

功能与 submit 相同，可以提交表单数据，通常在美化网页时会用到图形提交按钮来代替默认的提交按钮，使页面更加美观。

<form action="form.php" method="post"><input type="image" src="http:xxxxx"/></form>

button：可单击按钮

定义一个可单击的按钮，通常与 JavaScript（后面会有专门的篇章讲解）一起使用来启动脚本。

select 下拉选择控件

在表单中通过控件可以创建一个下拉式的列表或带有滚动条的列表，可以在列表中选中一个或多个选项，通常用于填写生日、所在地区等信息。

开发人员提前设计好选项，让用户在填写信息时可以直接选择，更加方便用户使用。

<form action="form.php" method="post">
     <select name="week">
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
       <option value="4">4</option>
       <option value="5">5</option>
       <option value="6">6</option>
       <option value="7">7</option>
     </select>
</form>

<select>标签的属性

name="列表名"：所有选项只有一个 name。
multiple="multiple"：设置 select 控件为多选，可在列表中使用 Ctrl 键+鼠标进行多选。
size="1"：规定下拉列表中可见选项的数目。如果 size 属性的值大于 1，但是小于列表中选项的总数目，下拉列表就会显示出滚动条，表示可以查看更多选项(存在不兼容问题)

<option>标签的属性

value=""：分为两种情况。当选项 option 没有 value 属性时，往后台传递的是<option></option>标签中的文字；当选项 option 有 value 属性时，往后台传递的是 value 属性的值。
title=""：鼠标指上后显示的文字，与图片的 title 属性类似。
selected="selected"：默认选中，即 select 的初始值。

利用<optgroup>标签分组

<optgroup label="分组名"></optgroup>用于将<option>标签进行分组，label 属性表示分组名。

<form action="form.php" method="post">
        <select name="city">
            <optgroup label="山东省">
                <option value="1" title="青岛">青岛</option>
                <option value="2" selected="selected">烟台</option>
                <option value="3">济南</option>
            </optgroup>
            <optgroup label="北京市">
                <option>海淀区</option>
                <option>朝阳区</option>
            </optgroup>
        </select>
    </form>

textarea 文本域

与<input>的 type="text"不同，<textarea>创建的文本域是多行的，文本区中可容纳无限数量的文本，其中文本的默认字体是等宽字体。

通常采用 CSS（层叠样式表）来设置其宽度和高度。文本域常见用于论坛回复的文本框、博客的留言板等。

<form action="form.php" method="post">
        <textarea style="width: 200px; height: 150px;">这是文本域的内容</textarea>
</form>

文本域的属性如下：

设置宽高：cols 规定文本域内可见的列数，rows 规定文本域内可见的行数，但这种方式并不常用。通常用 CSS 来规定其宽度和高度，如：style="width: 200px; height: 150px;"。
readonly="readonly"：设置为只读模式，不允许编辑。
disable="disable"：设置禁用文本域。

除以上文本域自带属性外，还时常通过 CSS 设置其样式。

style="resize: none;"：设置宽高不允许拖放修改。
style="overflow: hidden;"：设置当文字超出区域时，如何处理。当然也可以通过overflow-x/overflow-y 分别设置水平或垂直方向的显示方式。

其中，overflow 有三个常用属性值：hidden 设置超出区域的文字，隐藏无法显示；scroll 设置无论文字多少，均会显示滚动条；auto 设置为自动，根据文字多少自动决定是否显示滚动条（默认样式），这种情况下当文本域中的内容没有超出范围时，滚动条呈灰色状。

button 按钮

<button>的作用是定义一个按钮，与<input>创建的按钮功能类似，也可以与 JavaScript一起使用来启动脚本。

<form action="form.php" method="post">
       <button type="button">这是一个按钮</button>
</form>

在 <button>内部可以放置内容，如文本或图像。这是该元素与使用<input>创建的按钮之间的不同之处。

始终需要为 <button> 元素规定 type 属性。

不同的浏览器对 <button> 元素的type 属性使用不同的默认值。

HTML5智能表单

表单分组

<fieldset>可以组合表单中的相关元素，将表单根据不同的内容进行分组。

<form action="form.php" method="post">
     <fieldset >
       <legend>这是一个表单</legend>
           其他表单控件
     </fieldset>
</form>

其中，<fieldset >表示表单边框，<legend>表示表单标题。

如果想要让标题嵌入到边框中，则需将标题标签写到边框标签里面，就像上面代码示例中所写的一样。

另外，一个表单可以有多个边框与标题的组合。

<form action="form.php" method="post">

      <fieldset >
                  <legend>这是表单的第一部分</legend>
                      其他表单控件
      </fieldset>
      <fieldset >
                  <legend>这是表单的第二部分</legend>
                      其他表单控件
      </fieldset>
</form>

表单新增元素及属性
新增元素
<datalist>

<input>标签定义选项列表。它与<input>元素配合使用来定义<input>可能的值

<datalist>具有和 autocomplete 类似的自动完成功能，但它还有一个功能是 autocomplete属性所没有的，那就是在使用<datalist>时，它可以根据用户输入的内容，在预先设置好的列表中筛选出与用户输入相关的信息作为备选。

 <form action="form.php" method="post">
        请输入：
        <input type="text" list="list" />
        <datalist id="list">
            <option>123</option>
            <option>abc</option>
            <option>456</option>
            <option>def</option>
            <option>789</option>
        </datalist>
    </form>

<keygen>

规定用于表单的密钥对生成器字段。

当提交表单时，私钥存储在本地，公钥发送到服务器。

<output>

可以定义不同类型的输出。

<output>标签的属性：

for 定义输出字段相关的一个或多个元素。

form 定义输入字段所属的一个或多个表单。

name 定义对象的唯一名称（表单提交时使用）。

新增属性
表单新增属性
autocomplete

规定 form 表单具有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项

属性值有 on 和 off

novalidate

规定在提交表单时不进行验证

novalidate 属性值有 true 和 false。

<input>标签新增属性

属性

说明

autocomplete

规定标签具有自动完成功能

autofocus

规定在页面加载时，控件自动地获得焦点（不过一个页面只能有一个控件使用该属性）

required

规定输入的字段是必需的（必须填写）

pattern

规定通过其检查输入值的正则表达式

form overrides

规定表单重写属性

form

规定输入域所属的一个或多个表单

<input>标签新增输

输入类型

作用

浏览器支持

color

定义拾色器

Opera、Chrome

date

限制用户输入时间格式

Opera、Chrome

限制用户输入 email 格式

IE10 以上版本、Firefox、Opera、Chrome、Safari

number

限制用户输入数字格式

IE10 以上版本、Opera、Chrome、Safari

range

定义包含一定范围内的值的数字字段

IE10 以上版本、Opera、Chrome、Safari

定义用于输入搜索字符串的文本字段

Chrome、Safari

后记

如果这篇文章的排版对你造成了不适合，建议转接到有道云笔记，因为原文是写在有道云笔记里面的，但是转发博客的时候发现，笔记的分的层次太多了，无法实现全部还原，望见谅，如有知识点错误的地方，还请指正。

明月落乌江

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5知识全解

HTML5HTML5语法HTML5的标签HTML5标签属性HTML5 文档注释HTML5的文档结构HTML5 的基本格式基本格式解读HTML5 常见的块级标签和行级标签常见的块级标签常见的行级标签特点与区别新增标签HTML5表格表格的定义表格的基本属性表格的结构化与直列化HTML5表单表单结构表单的常用属性textarea 文本域HTML5智能表单HTML5HTML5语法HTML5的标签标签是HTM...
复制链接

扫一扫