HTML学习

    xiaoxiao2023-03-24  8

    参考:http://www.w3school.com.cn/html/html_tables.asp#more_examples

    HTML 标签

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

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

    HTML 文档 = 网页

    HTML 文档描述网页HTML 文档包含 HTML 标签和纯文本HTML 文档也被称为网页

    Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容:

    <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>

    例子解释

    <html> 与 </html> 之间的文本描述网页<body> 与 </body> 之间的文本是可见的页面内容<h1> 与 </h1> 之间的文本被显示为标题<p> 与 </p> 之间的文本被显示为段落

    HTML 标题

    HTML 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的。

    <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>

    HTML 段落

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

    <p>This is a paragraph.</p> <p>This is another paragraph.</p>

    HTML 链接

    HTML 链接是通过 <a> 标签进行定义的。

    实例

    <a href="http://www.w3school.com.cn">This is a link</a>

    HTML 图像

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

    实例

    <img src="w3school.jpg" width="104" height="142" /> 注释:图像的名称和尺寸是以属性的形式提供的。

    HTML 元素

    HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。

    开始标签 元素内容 结束标签 <p> This is a paragraph </p> <a href="default.htm" > This is a link </a> <br />    

    注释:开始标签常被称为开放标签(opening tag),结束标签常称为闭合标签(closing tag)

    HTML 元素语法

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

    嵌套的 HTML 元素

    大多数 HTML 元素可以嵌套(可以包含其他 HTML 元素)。

    <html> <body> <p>This is my first paragraph.</p> </body> </html>

    这个 <p> 元素定义了 HTML 文档中的一个段落。

    这个元素拥有一个开始标签 <p>,以及一个结束标签 </p>。

    元素内容是:This is my first paragraph。

    <body> 元素定义了 HTML 文档的主体。

    这个元素拥有一个开始标签 <body>,以及一个结束标签 </body>。

    元素内容是另一个 HTML 元素(p 元素)

    <html> 元素定义了整个 HTML 文档。

    这个元素拥有一个开始标签 <html>,以及一个结束标签 </html>。

    元素内容是另一个 HTML 元素(body 元素)

    空的 HTML 元素

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

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

    在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。

    在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。

    即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。

    HTML 水平线

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

    hr 元素可用于分隔内容。

    实例

    <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p>

    文本格式化标签

    标签 描述 <b> 定义粗体文本。 <big> 定义大号字。 <em> 定义着重文字。 <i> 定义斜体字。 <small> 定义小号字。 <strong> 定义加重语气。 <sub> 定义下标字。 <sup> 定义上标字。 <ins> 定义插入字。 <del> 定义删除字。 <s> 不赞成使用。使用 <del> 代替。 <strike> 不赞成使用。使用 <del> 代替。 <u> 不赞成使用。使用样式(style)代替。

    “计算机输出”标签

    标签 描述 <code> 定义计算机代码。 <kbd> 定义键盘码。 <samp> 定义计算机代码样本。 <tt> 定义打字机代码。 <var> 定义变量。 <pre> 定义预格式文本。 <listing> 不赞成使用。使用 <pre> 代替。 <plaintext> 不赞成使用。使用 <pre> 代替。 <xmp> 不赞成使用。使用 <pre> 代替。

    引用、引用和术语定义

    标签 描述 <abbr> 定义缩写。 <acronym> 定义首字母缩写。 <address> 定义地址。 <bdo> 定义文字方向。 <blockquote> 定义长的引用。 <q> 定义短的引用语。 <cite> 定义引用、引证。 <dfn> 定义一个定义项目。

    HTML <q> 用于短的引用

    HTML <q> 元素定义短的引用

    浏览器通常会为 <q> 元素包围引号

    实例

    <p>WWF 的目标是:<q>构建人与自然和谐共存的世界。</q></p>

    用于长引用的 HTML <blockquote>

    HTML <blockquote> 元素定义被引用的节。

    浏览器通常会对 <blockquote> 元素进行缩进处理。

    实例

    <p>以下内容引用自 WWF 的网站:</p> <blockquote cite="http://www.worldwildlife.org/who/index.html"> 五十年来,WWF 一直致力于保护自然界的未来。 世界领先的环保组织,WWF 工作于 100 个国家, 并得到美国一百二十万会员及全球近五百万会员的支持。 </blockquote>

    如何使用样式

    当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表:

    外部样式表

    当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。

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

    内部样式表

    当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

    <head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head>

    内联样式

    当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

    <p style="color: red; margin-left: 20px"> This is a paragraph </p>

    HTML 超链接(链接)

    超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,

    有两种使用 <a> 标签的方式:

    通过使用 href 属性 - 创建指向另一个文档的链接通过使用 name 属性 - 创建文档内的书签

    HTML 链接 - target 属性

    使用 Target 属性,你可以定义被链接的文档在何处显示。

    下面的这行会在新窗口打开文档:

    <a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

    HTML 链接 - name 属性

    name 属性规定锚(anchor)的名称。

    您可以使用 name 属性创建 HTML 页面中的书签。

    书签不会以任何特殊方式显示,它对读者是不可见的。

    当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

    命名锚的语法:

    <a name="label">锚(显示在页面上的文本)</a>

    提示:锚的名称可以是任何你喜欢的名字。

    提示:您可以使用 id 属性来替代 name 属性,命名锚同样有效。

    图像标签(<img>)和源属性(Src)

    在 HTML 中,图像由 <img> 标签定义。

    <img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。

    要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。

    定义图像的语法是:

    <img src="url" />

    替换文本属性(Alt)

    alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

    <img src="boat.gif" alt="Big Boat">

    在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。

    表格

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

    <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

    表格的表头

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

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

    <table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>表格的标题

    表格的标题

    <caption>我的标题</caption>

    横跨两列的表格 <table border="1"> <tr>   <th>姓名</th>   <th colspan="2">电话</th> </tr> <tr>   <td>Bill Gates</td>   <td>555 77 854</td>   <td>555 77 855</td> </tr> </table> 横跨两行的表格 <table border="1"> <tr>   <th>姓名</th>   <td>Bill Gates</td> </tr> <tr>   <th rowspan="2">电话</th>   <td>555 77 854</td> </tr> <tr>   <td>555 77 855</td> </tr> </table> 表格 单元格的边距 cellpadding="10" 给表格设置背景颜色(同样可以给某个单元格添加) bgcolor="red" 给表格设置背景图片(同样可以给某个单元格添加) background="/i/eg_bg_07.gif"

    无序列表

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

    无序列表始于 <ul> 标签。每个列表项始于 <li>。

    <ul> <li>Coffee</li> <li>Milk</li> </ul>

    有序列表

    同样,有序列表也是一列项目,列表项目使用数字进行标记。

    有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

    <ol> <li>Coffee</li> <li>Milk</li> </ol>

    定义列表

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

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

    <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> type="" 无序列表前小点的样式,有序列表钱的索引的样式

    列表标签

    标签 描述 <ol> 定义有序列表。 <ul> 定义无序列表。 <li> 定义列表项。 <dl> 定义定义列表。 <dt> 定义定义项目。 <dd> 定义定义的描述。

    HTML 块元素

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

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

    例子:<h1>, <p>, <ul>, <table>

    HTML 内联元素

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

    例子:<b>, <td>, <a>, <img>

    HTML <div> 元素

    HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。

    <div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。

    如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。

    <div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

    HTML <span> 元素

    HTML <span> 元素是内联元素,可用作文本的容器。

    <span> 元素也没有特定的含义。

    当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。

    HTML的类

    对 HTML 进行分类(设置类),使我们能够为元素的类定义 CSS 样式。

    为相同的类设置相同的样式,或者为不同的类设置不同的样式。

    分类块级元素

    HTML <div> 元素是块级元素。它能够用作其他 HTML 元素的容器。

    设置 <div> 元素的类,使我们能够为相同的 <div> 元素设置相同的类:

    实例

    <!DOCTYPE html> <html> <head> <style> .cities { background-color:black; color:white; margin:20px; padding:20px; } </style> </head> <body> <div class="cities"> <h2>London</h2> <p> London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. </p> </div> </body> </html>

    分类行内元素

    HTML <span> 元素是行内元素,能够用作文本的容器。

    设置 <span> 元素的类,能够为相同的 <span> 元素设置相同的样式。

    实例

    <!DOCTYPE html> <html> <head> <style> span.red {color:red;} </style> </head> <body> <h1>My <span class="red">Important</span> Heading</h1> </body> </html>

    使用 <div> 元素的 HTML 布局

    注释:<div> 元素常用作布局工具,因为能够轻松地通过 CSS 对其进行定位。

    这个例子使用了四个 <div> 元素来创建多列布局:

    实例

    <body> <div id="header"> <h1>City Gallery</h1> </div> <div id="nav"> London<br> Paris<br> Tokyo<br> </div> <div id="section"> <h1>London</h1> <p> London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. </p> <p> Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium. </p> </div> <div id="footer"> Copyright W3School.com.cn </div> </body>

    使用 HTML5 的网站布局

    HTML5 提供的新语义元素定义了网页的不同部分:

    HTML5 语义元素 header 定义文档或节的页眉 nav 定义导航链接的容器 section 定义文档中的节 article 定义独立的自包含文章 aside 定义内容之外的内容(比如侧栏) footer 定义文档或节的页脚 details 定义额外的细节 summary 定义 details 元素的标题

    这个例子使用 <header>, <nav>, <section>, 以及 <footer> 来创建多列布局:

    实例

    <body> <header> <h1>City Gallery</h1> </header> <nav> London<br> Paris<br> Tokyo<br> </nav> <section> <h1>London</h1> <p> London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. </p> <p> Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium. </p> </section> <footer> Copyright W3School.com.cn </footer> </body>

    使用表格的 HTML 布局

    注释:<table> 元素不是作为布局工具而设计的。

    <table> 元素的作用是显示表格化的数据。

    使用 <table> 元素能够取得布局效果,因为能够通过 CSS 设置表格元素的样式:

    实例

    <body> <table class="lamp"> <tr> <th> <img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px"> </th> <td> The table element was not designed to be a layout tool. </td> </tr> </table> </body>

    框架标签(Frame)

    Frame 标签定义了放置在每个框架中的 HTML 文档。

    在下面的这个例子中,我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中,而 HTML 文档 "frame_b.htm" 被置于第二个列中:

    <frameset cols="25%,75%">    <frame src="frame_a.htm">    <frame src="frame_b.htm"> </frameset>

    基本的注意事项 - 有用的提示:

    假如一个框架有可见边框,用户可以拖动边框来改变它的大小。为了避免这种情况发生,可以在 <frame> 标签中加入:noresize="noresize"。

    为不支持框架的浏览器添加 <noframes> 标签。

    重要提示:不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用!不过,假如你添加包含一段文本的 <noframes> 标签,就必须将这段文字嵌套于 <body></body> 标签内。(在下面的第一个实例中,可以查看它是如何实现的。)

    iframe 用于在网页内显示网页。 <iframe src="URL"></iframe>

    实例

    <iframe src="demo_iframe.htm" width="200" height="200"></iframe>  frameborder="0"表示是否显示边框,设置为0,不显示

    背景(Backgrounds)

    <body> 拥有两个配置背景的标签。背景可以是颜色或者图像。

    背景颜色(Bgcolor)

    背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。

    背景(Background)

    背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口,那么图像将在整个浏览器窗口进行复制。

    HTML script 元素

    <script> 标签用于定义客户端脚本,比如 JavaScript。

    script 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。

    必需的 type 属性规定脚本的 MIME 类型。

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

    <noscript> 标签

    <noscript> 标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。

    noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。

    只有在浏览器不支持脚本或者禁用脚本时,才会显示 noscript 元素中的内容:

    <script type="text/javascript"> document.write("Hello World!") </script> <noscript>Your browser does not support JavaScript!</noscript>

    HTML <head> 元素

    <head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。

    以下标签都可以添加到 head 部分:<title>、<base>、<link>、<meta>、<script> 以及 <style>。

    HTML <title> 元素

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

    title 元素在所有 HTML/XHTML 文档中都是必需的。

    title 元素能够:

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

    HTML <base> 元素

    <base> 标签为页面上的所有链接规定默认地址或默认目标(target):

    <head> <base href="http://www.w3school.com.cn/images/" /> <base target="_blank" /> </head>

    HTML <link> 元素

    <link> 标签定义文档与外部资源之间的关系。

    <link> 标签最常用于连接样式表:

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

    HTML <style> 元素

    <style> 标签用于为 HTML 文档定义样式信息。

    您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式:

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

    HTML <meta> 元素

    元数据(metadata)是关于数据的信息。

    <meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。

    典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

    <meta> 标签始终位于 head 元素中。

    元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。

    针对搜索引擎的关键词

    一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。

    下面的 meta 元素定义页面的描述:

    <meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

    下面的 meta 元素定义页面的关键词:

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

    name 和 content 属性的作用是描述页面的内容。

    HTML 中有用的字符实体

    注释:实体名称对大小写敏感!

    显示结果 描述 实体名称 实体编号   空格 &nbsp; &#160; < 小于号 &lt; &#60; > 大于号 &gt; &#62; & 和号 &amp; &#38; " 引号 &quot; &#34; ' 撇号  &apos; (IE不支持) &#39; ¢ 分 &cent; &#162; £ 镑 &pound; &#163; ¥ 日圆 &yen; &#165; € 欧元 &euro; &#8364; § 小节 &sect; &#167; © 版权 &copy; &#169; ® 注册商标 &reg; &#174; ™ 商标 &trade; &#8482; × 乘号 &times; &#215; ÷ 除号 &divide; &#247;

    URL Schemes

    以下是其中一些最流行的 scheme:

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

    HTML 表单用于搜集不同类型的用户输入。

    <form> 元素

    HTML 表单用于收集用户输入。

    <form> 元素定义 HTML 表单:

    HTML 表单包含表单元素

    表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

    Action 属性

    action 属性定义在提交表单时执行的动作。

    向服务器提交表单的通常做法是使用提交按钮。

    通常,表单会被提交到 web 服务器上的网页。

    在上面的例子中,指定了某个服务器脚本来处理被提交表单:

    <form action="action_page.php">

    如果省略 action 属性,则 action 会被设置为当前页面。

    Method 属性

    method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST):

    <form action="action_page.php" method="GET">

    或:

    <form action="action_page.php" method="POST">

    何时使用 GET?

    您能够使用 GET(默认方法):

    如果表单提交是被动的(比如搜索引擎查询),并且没有敏感信息。

    当您使用 GET 时,表单数据在页面地址栏中是可见的:

    action_page.php?firstname=Mickey&lastname=Mouse

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

    何时使用 POST?

    您应该使用 POST:

    如果表单正在更新数据,或者包含敏感信息(例如密码)。

    POST 的安全性更加,因为在页面地址栏中被提交的数据是不可见的。

    Name 属性

    如果要正确地被提交,每个输入字段必须设置一个 name 属性。

    用 <fieldset> 组合表单数据

    <fieldset> 元素组合表单中的相关数据

    <legend> 元素为 <fieldset> 元素定义标题。

    实例

    <form action="action_page.php"> <fieldset> <legend>Personal information:</legend> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"></fieldset> </form> 属性 描述 accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集)。 action 规定向何处提交表单的地址(URL)(提交页面)。 autocomplete 规定浏览器应该自动完成表单(默认:开启)。 enctype 规定被提交数据的编码(默认:url-encoded)。 method 规定在提交表单时所用的 HTTP 方法(默认:GET)。 name 规定识别表单的名称(对于 DOM 使用:document.forms.name)。 novalidate 规定浏览器不验证表单。 target 规定 action 属性中地址的目标(默认:_self)。

    <select> 元素(下拉列表)

    <select> 元素定义下拉列表

    实例

    <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select>

    <textarea> 元素

    <textarea> 元素定义多行输入字段(文本域):

    实例

    <textarea name="message" rows="10" cols="30"> The cat was playing in the garden. </textarea>

    HTML5 <datalist> 元素

    <datalist> 元素为 <input> 元素规定预定义选项列表。

    用户会在他们输入数据时看到预定义选项的下拉列表。

    <input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。

    实例

    通过 <datalist> 设置预定义值的 <input> 元素:

    <form action="action_page.php"> <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </form>

    输入类型:number

    <input type="number"> 用于应该包含数字值的输入字段。

    您能够对数字做出限制。

    根据浏览器支持,限制可应用到输入字段。

    实例

    <form> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"> </form>

    输入限制

    这里列出了一些常用的输入限制(其中一些是 HTML5 中新增的):

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

    输入类型:date

    <input type="date"> 用于应该包含日期的输入字段。

    根据浏览器支持,日期选择器会出现输入字段中。

    实例

    <form> Birthday: <input type="date" name="bday"> </form>

    您可以向输入添加限制:

    实例

    <form> Enter a date before 1980-01-01: <input type="date" name="bday" max="1979-12-31"><br> Enter a date after 2000-01-01: <input type="date" name="bday" min="2000-01-02"><br> </form>

    输入类型:color

    <input type="color"> 用于应该包含颜色的输入字段。

    根据浏览器支持,颜色选择器会出现输入字段中。

    实例

    <form> Select your favorite color: <input type="color" name="favcolor"> </form>

    输入类型:range

    <input type="range"> 用于应该包含一定范围内的值的输入字段。

    根据浏览器支持,输入字段能够显示为滑块控件。

    实例

    <form> <input type="range" name="points" min="0" max="10"> </form> 您能够使用如下属性来规定限制:min、max、step、value。

    输入类型:time

    <input type="time"> 允许用户选择时间(无时区)。

    根据浏览器支持,时间选择器会出现输入字段中。

    实例

    <form> Select a time: <input type="time" name="usr_time"> </form>

    输入类型:search

    <input type="search"> 用于搜索字段(搜索字段的表现类似常规文本字段)。

    实例

    <form> Search Google: <input type="search" name="googlesearch"> </form>

    输入类型:tel

    <input type="tel"> 用于应该包含电话号码的输入字段。

    目前只有 Safari 8 支持 tel 类型。

    实例

    <form> Telephone: <input type="tel" name="usrtel"> </form>

    输入类型:url

    <input type="url"> 用于应该包含 URL 地址的输入字段。

    根据浏览器支持,在提交时能够自动验证 url 字段。

    某些智能手机识别 url 类型,并向键盘添加 ".com" 以匹配 url 输入。

    实例

    <form> Add your homepage: <input type="url" name="homepage"> </form>

    value 属性

    value 属性规定输入字段的初始值:

    readonly 属性

    readonly 属性规定输入字段为只读(不能修改):

    实例

    <form action=""> First name:<br> <input type="text" name="firstname" value="John" readonly> <br> Last name:<br> <input type="text" name="lastname"> </form> readonly 属性不需要值。它等同于 readonly="readonly"。

    disabled 属性

    disabled 属性规定输入字段是禁用的。

    被禁用的元素是不可用和不可点击的。

    被禁用的元素不会被提交。

    实例

    <form action=""> First name:<br> <input type="text" name="firstname" value="John" disabled> <br> Last name:<br> <input type="text" name="lastname"> </form> disabled 属性不需要值。它等同于 disabled="disabled"。

    size 属性

    size 属性规定输入字段的尺寸(以字符计):

    实例

    <form action=""> First name:<br> <input type="text" name="firstname" value="John" size="40"> <br> Last name:<br> <input type="text" name="lastname"> </form>

    maxlength 属性

    maxlength 属性规定输入字段允许的最大长度:

    实例

    <form action=""> First name:<br> <input type="text" name="firstname" maxlength="10"> <br> Last name:<br> <input type="text" name="lastname"> </form>

    如设置 maxlength 属性,则输入控件不会接受超过所允许数的字符。

    该属性不会提供任何反馈。如果需要提醒用户,则必须编写 JavaScript 代码。

    注释:输入限制并非万无一失。JavaScript 提供了很多方法来增加非法输入。如需安全地限制输入,则接受者(服务器)必须同时对限制进行检查。

    autocomplete 属性

    autocomplete 属性规定表单或输入字段是否应该自动完成。

    当自动完成开启,浏览器会基于用户之前的输入值自动填写值。

    提示:

    Tip: It is possible to have autocomplete "on" for the form、and "off" for specific input fields、or vice versa.

    autocomplete 属性适用于 <form> 以及如下 <input> 类型:text、search、url、tel、email、password、datepickers、range 以及 color。

    Opera Safari Chrome Firefox Internet Explorer

    实例

    自动完成开启的 HTML 表单(某个输入字段为 off):

    <form action="action_page.php" autocomplete="on"> First name:<input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> E-mail: <input type="email" name="email" autocomplete="off"><br> <input type="submit"> </form>

    novalidate 属性

    novalidate 属性属于 <form> 属性。

    如果设置,则 novalidate 规定在提交表单时不对表单数据进行验证。

    Opera Safari Chrome Firefox Internet Explorer

    实例

    指示表单在被提交时不进行验证:

    <form action="action_page.php" novalidate> E-mail: <input type="email" name="user_email"> <input type="submit"> </form>

    form 属性

    form 属性规定 <input> 元素所属的一个或多个表单。

    提示:如需引用一个以上的表单,请使用空格分隔的表单 id 列表。

    Opera Safari Chrome Firefox Internet Explorer

    实例

    输入字段位于 HTML 表单之外(但仍属表单):

    <form action="action_page.php" id="form1"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> </form> Last name: <input type="text" name="lname" form="form1">

    formaction 属性

    formaction 属性规定当提交表单时处理该输入控件的文件的 URL。

    formaction 属性覆盖 <form> 元素的 action 属性。

    formaction 属性适用于 type="submit" 以及 type="image"。

    Opera Safari Chrome Firefox Internet Explorer

    实例

    拥有两个两个提交按钮并对于不同动作的 HTML 表单:

    <form action="action_page.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"><br> <input type="submit" formaction="demo_admin.asp" value="Submit as admin"> </form>

    pattern 属性

    pattern 属性规定用于检查 <input> 元素值的正则表达式。

    pattern 属性适用于以下输入类型:text、search、url、tel、email、and password。

    提示:请使用全局的 title 属性对模式进行描述以帮助用户。

    提示:请在我们的 JavaScript 教程中学习更多有关正则表达式的知识。

    Opera Safari Chrome Firefox Internet Explorer

    实例

    只能包含三个字母的输入字段(无数字或特殊字符):

    Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

    placeholder 属性

    placeholder 属性规定用以描述输入字段预期值的提示(样本值或有关格式的简短描述)。

    该提示会在用户输入值之前显示在输入字段中。

    placeholder 属性适用于以下输入类型:text、search、url、tel、email 以及 password。

    Opera Safari Chrome Firefox Internet Explorer

    实例

    拥有占位符文本的输入字段:

    <input type="text" name="fname" placeholder="First name">

    required 属性

    required 属性是布尔属性。

    如果设置,则规定在提交表单之前必须填写输入字段。

    required 属性适用于以下输入类型:text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.

    Opera Safari Chrome Firefox Internet Explorer

    实例

    必填的输入字段:

    Username: <input type="text" name="usrname" required>

    step 属性

    step 属性规定 <input> 元素的合法数字间隔。

    示例:如果 step="3",则合法数字应该是 -3、0、3、6、等等。

    提示:step 属性可与 max 以及 min 属性一同使用,来创建合法值的范围。

    step 属性适用于以下输入类型:number、range、date、datetime、datetime-local、month、time 以及 week。

    Opera Safari Chrome Firefox Internet Explorer

    示例

    拥有具体的合法数字间隔的输入字段:

    <input type="number" name="points" step="3">
    转载请注明原文地址: https://ju.6miu.com/read-1202745.html
    最新回复(0)