HTML是英文Hypr Text Markup Language(超文本标记语言）。

1. h1元素通常被用作主标题，h2元素通常被用作副标题，还有h3、h4、h5、h6元素，它们分别用作不同级别的标题。可以叫做元素或标签，通常h2等标签也可以使用很多次。

<h1>Hello World</h1>

p是paragraph的缩写，通常被用来创建一个段落，就和你写作文一样。

<p>I'm a p tag!</p>

HTML 添加注释

注释的开始标记是。

HTML5 引入了很多更具描述性的 HTML 元素，例如：header、footer、nav、video、article、section。main元素让搜索引擎和开发者瞬间就能找到网页的主要内容。

添加图片

用img元素来为你的网站添加图片，其中src属性指向一个图片的地址。所有的img元素必须有alt属性，alt属性的文本是当图片无法加载时显示的替代文本，这对于通过屏幕阅读器来浏览网页的用户非常重要。

<img src="https://www.your-image-source.com/your-image.jpg" alt="作者站在沙滩上竖起两个大拇指">

HTML 基础：用锚点实现网页间的跳转

a锚点（Anchor，简写 a）来实现网页间的跳转。

绝对 URL - 指向另一个站点：<a href="http://freecatphotoapp.com">cat photos</a>

相对 URL - 指向站点内的某个文件（href="index.html"）

在a标签里面 target="_blank" 点击链接会打开新的网页

<a href="http://freecatphotoapp.com" target="_blank">cat photos</a>

HTML 基础：用a标签（锚点）实现网页内部跳转

设置锚点的href属性值为井号#加上想跳转区域对应的id属性值，这样就可以创建一个内部跳转。id是用来描述网页元素的一个属性，它的值在整个页面中唯一。href=#，可以创建固定链接。

<a href="#contacts-header">Contacts</a>

<h2 id="contacts-header">Contacts</h2>

href=#，可以创建固定链接。

创建一个无序列表

无序列表unordered lists（缩写 ul）。

无序列表以<ul>开始，中间包含一个或多个<li>元素，最后以</ul>结尾

<ul>

<li>机械</li>

<li>飞机</li>

</ul>

创建一个有序列表

有序列表ordered lists（缩写 ol）。

无序列表以<ol>开始，中间包含一个或多个<li>元素，最后以</ol>结尾

<ol>

<li>机械</li>

<li>飞机</li>

</ol>

创建一个输入框

现在让我们来创建一个form表单。

input输入框可以让你轻松获得用户的输入。

你可以像这样创建一个文本输入框：

<input type="text">

注意：input输入框是没有结束标记的

给输入框添加占位符文本

Placeholder占位符是用户在input输入框中输入任何东西前的预定义文本。

你可以像这样创建一个占位符：

<input type="text" placeholder="这是输入框">

创建一个表单

给form表单添加一个action属性，你可以使用纯 HTML 来构建向服务器提交数据的 Web 表单。在 HTML5 中，action 属性不再是必需的。

<form action="URL">

绝对 URL - 指向另一个网站（比如 action="http://www.example.com/example.htm"）相对 URL - 指向网站内的一个文件（比如 action="example.htm"）

给表单添加提交按钮

<button> 标签定义一个按钮。

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

提示：请始终为元素规定 type 属性。不同的浏览器对元素的 type 属性使用不同的默认值。

<button type="submit">提交</button>

onclick鼠标单击，alert提示，警示

<button type="button" onclick="alert('你好，世界!')">点我!</button>

给表单添加一个必填字段

把文本输入框设置为必填项，在input元素中加上required属性就可以了，没有输入内容，就无法提交。例如：

<input type="text" required>

创建一组单选按钮

（单选按钮）就好比单项选择题，正确答案只有一个。单选按钮只是input输入框的一种类型。每一个单选按钮都应该嵌套在它自己的label（标签）元素中。所有关联的单选按钮应该拥有相同的name属性。

<input id="indoor" type="radio" name="indoor-outdoor" value="indoor">Indoor

</label>

创建一组复选框

checkboxes（复选框）就好比多项选择题，正确答案有多个。每一个复选框都应该嵌套在它自己的label（标签）元素中。所有关联的复选框应该拥有相同的name属性。最佳实践是在label元素上设置for属性，让其值与复选框的id属性值相等，这样就在label元素和它的子元素复选框之间创建了一种链接关系。例如：

<label for="loving"> <input id="loving" type="checkbox" name="personality"> Loving </label>

<label><input type="checkbox" name="personality"></label> <label><input type="checkbox" name="personality"></label> <label><input type="checkbox" name="personality"></label>

给单选按钮和复选框添加默认选中项

<input type="radio" name="test-name" checked>

元素嵌套

div元素，也叫division（层）元素，是一个盛装其他元素的通用容器。

它也是 HTML 中出现频率最高的元素。

和其他普通元素一样，你可以用<div>来标记一个div元素的开始，用</div>来标记一个div元素的结束。

<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。

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

提示：

元素经常与 CSS 一起使用，用来布局网页。

注释：默认情况下，浏览器通常会在

元素前后放置一个换行符。然而，您可以通过使用 CSS 改变这种情况。

<div>

<p></p>

</div>

声明 HTML 文档的文档类型

!和大写的DOCTYPE是很重要的，特别是对于老的浏览器。但html大写小写都可以。<!DOCTYPE html>对应的就是 HTML5。!与DOCTYPE紧密相连

<!DOCTYPE html>

定义 HTML 文档的标题和正文

html的结构主要分为两大部分：head、body。关于网页的描述都应该放入head标签，网页的内容都应该放入body标签。

比如link、meta、title和style都应该放入head标签。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style></style>

</head>

<body>

</body>

</html>

HTML <abbr> 标签

<abbr> 标签用来表示一个缩写词或者首字母缩略词，如"WWW"或者"NATO"。

The<abbr title="World Health Organization">WHO</abbr> was founded in 1948.

HTML <address> 标签

<address> 标签定义文档作者/所有者的联系信息。

如果 <address> 元素位于 <body> 元素内部，则它表示该文档作者/所有者的联系信息。

如果 <address> 元素位于 <article> 元素内部，则它表示该文章作者/所有者的联系信息。

元素的文本通常呈现为斜体。大多数浏览器会在该元素的前后添加换行。<p>Contact the author of this page:</p>

<address>

<a href="mailto:jim@rock.com">jim@rock.com</a><br>

<a href="tel:+13115552368">(311) 555-2368</a>

</address>

当表示一个和联系信息无关的任意的地址时，请改用 <p> 元素而不是 <address> 元素。

这个元素不能包含除联系信息之外的任何信息，比如出版日期（这应当被包含在 <time> 元素之中）。

通常，<address> 元素可以放在 <footer> 元素之中（如果存在的话）。

HTML <article> 标签

<article> 标签定义独立的内容。

<article> 标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。

<article> 的潜在来源：论坛帖子、博客文章、新闻故事、评论

<article>

<h1>Internet Explorer 9</h1>

<p> Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。</p>

</article>

HTML <aside> 标签

<aside> 标签定义 <article> 标签外的内容。

aside 的内容应该与附近的内容相关。其通常表现为侧边栏或者标注框。

<p>My family and I visited The Epcot center this summer.</p>

<aside>

<h4>Epcot Center</h4>

<p>The Epcot Center is a theme park in Disney World, Florida.</p>

</aside>

HTML <audio> 标签

<audio> 标签定义声音，比如音乐或其他音频流。

目前，<audio> 元素支持的3种文件格式：MP3、Wav、Ogg。

提示：可以在 <audio> 和 </audio> 之间放置文本内容，这些文本信息将会被显示在那些不支持 <audio> 标签的浏览器中。

<audio controls>

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

<source src="horse.mp3" type="audio/mpeg">

您的浏览器不支持 audio 元素。

</audio>

HTML <b> 标签与 HTML <strong>标签

<b>定义粗体文本，<strong>定义粗体，重要的文本，带有语义化重要的。

<b>粗体文本</b>

<strong>重要的文本</strong>

HTML <i> 标签与HTML<em>标签

<i> 标签被用来表示科技术语、其他语种的成语俗语、想法、宇宙飞船的名字等等

<em> 标签是一个短语标签，用来呈现为被强调的文本，带有语义化。

<p>He named his car <i>The lightning</i>, because it was very fast.</p>

<em>强调文本</em>

HTML <head> 标签

<head> 元素是所有头部元素的容器。

<head> 元素必须包含文档的标题（title），可以包含脚本、样式、meta 信息以及其他更多的信息。

HTML <link> 标签

rel：stylesheet（样式表）必需。定义当前文档与被链接文档之间的关系。

type：规定被链接文档的 MIME 类型。

href：定义被链接文档的位置。

<head>

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

</head>

HTML <meta> 标签

元数据（Metadata）是数据的数据信息。

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

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

<head>

<meta name="description" content="免费在线教程">

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

<meta name="author" content="runoob"><meta charset="UTF-8">

</head>

HTML <style> 标签

在 <style> 元素中，您可以规定在浏览器中如何呈现 HTML 文档。

每个 HTML 文档能包含多个 <style> 标签。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>菜鸟教程(runoob.com)</title>

    <style type="text/css">

        h1 {color:red;}p {color:blue;}

    </style>

</head>

<body>

    <h1>这是一个标题</h1>

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

</body>

</html>

HTML <title> 标签

<title> 标签定义文档的标题，在所有 HTML 文档中是必需的。只能有一个。

<title>元素：

定义浏览器工具栏中的标题

提供页面被添加到收藏夹时的标题

显示在搜索引擎结果中的页面标题

<html>

<head>

<meta charset="utf-8">

<title>文档标题</title>

</head>

<body>文档内容......</body>

</html>

HTML <header> 标签

<header> 标签定义文档或者文档的一部分区域的页眉。

<header> 元素应该作为介绍内容或者导航链接栏的容器。

在一个文档中，您可以定义多个 <header> 元素。

注释：<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。

<article>

    <header>

        <h1>Internet Explorer 9</h1>

        <p><time pubdate datetime="2011-03-15"></time></p>

    </header>

    <p> Windows Internet Explorer 9(缩写为 IE9 )是在2011年3月14日21:00发布的</p>

</article>

HTML <nav> 标签

<nav> 标签定义导航链接的部分。

并不是所有的 HTML 文档都要使用到 <nav> 元素。<nav> 元素只是作为标注一个导航链接的区域。

在不同设备上（手机或者PC）可以制定导航链接是否显示，以适应不同屏幕的需求。

<nav>

<a href="/html/">HTML</a> |

<a href="/css/">CSS</a> |

<a href="/js/">JavaScript</a> |

<a href="/jquery/">jQuery</a>

</nav>

HTML <footer> 标签

<footer> 标签定义文档或者文档的一部分区域的页脚。

<footer> 元素应该包含它所包含的元素的信息。

在典型情况下，该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。

在一个文档中，您可以定义多个 <footer> 元素。

提示：假如您使用元素来插入联系信息，应该在元素内使用 <address> 标签。

<footer>

<p>Posted by: Hege Refsnes</p>

<p><time pubdate datetime="2012-03-01"></time></p>

</footer>

HTML <section> 标签

HTML <section>元素表示一个包含在HTML文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。<section> 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。

例如，导航菜单应该包含在<nav>元素中，但搜索结果列表和地图显示及其控件没有特定元素，可以放在<section>里。

注意：如果元素的内容作为一个独立的有意义的集合，<article>元素可能是更好的选择。

一般通过是否包含一个标题 (<h1>-<h6> element) 作为子节点来辨识每一个<section>。

如果元素内容可以分为几个部分的话，应该使用 <article> 而不是<section>。

不要把 <section> 元素作为一个普通的容器来使用，这是本应该是<div>的用法（特别是当片段（the sectioning ）仅仅是为了美化样式的时候）。一般来说，一个 <section> 应该出现在文档大纲中。

<section>

<h1>WWF</h1>

<p>The World Wide Fund for Nature (WWF) is....</p>

</section>

HTML <figure> 标签

<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。

<figure> 元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。

使用 <figure> 元素标记文档中的一个图像：

<figure> <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"></figure>

HTML <figcaption> 标签

使用 <figure> 元素标记文档中的一个图像。<figure> 元素带有一个标题：

标签为 <figure> 元素定义标题。

<figcaption> 元素应该被置于 <figure> 元素的第一个或最后一个子元素的位置。

<figure>

<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">

<figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>

</figure>

HTML <cite> 标签

<cite> 标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题。但人名不算。

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

HTML<code>标签

<code> 标签是一个短语标签，用来定义计算机代码文本。

<code>一段电脑代码</code>

HTML5 <mark> 标签

被mark标签的milk黄色高亮显示。<mark> 标签定义带有记号的文本。HTML新属性

<p>Do not forget to buy <mark>milk</mark> today.</p>

HTML <del>、<ins> 标签

一段带有删除部分的文本和新插入部分的文本。

<del> 标签定义文档中已删除的文本。

<del> 和 <ins> 一起使用，描述文档中的更新和修正。浏览器通常会在已删除文本上添加一条删除线，在新插入文本下添加一条下划线。

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

HTML <small> 标签

定义小型字体或旁注

<p> runoob.com - the world's largest web development site.</p>

<p><small> Copyright 1999-2050 by Refsnes Data.</small></p>

HTML <span> 标签

行内容器，行内元素，没有语义， <span> 与 <div> 元素很相似，但<div> 是一个块元素而 <span> 则是行内元素。

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

<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。

<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

使用 <span> 元素对文本中的一部分进行着色：

<p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p>

HTML<var>标签

<var> 标签是一个短语标签，用来定义变量。

对文档中的文本进行格式化：

<var>变量</var>

HTML <video> 标签

<video> 标签定义视频，比如电影片段或其他视频流。

目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。

可以在 <video> 和 </video> 标签之间放置文本内容，这样不支持 <video> 元素的浏览器就可以显示出该标签的信息。

<video width="320" height="240" controls>

     <source src="movie.mp4" type="video/mp4">

     <source src="movie.ogg" type="video/ogg">

     您的浏览器不支持 video 标签。

</video>

HTML <script> 标签

JavaScript 通常用于图像操作、表单验证以及动态内容更改。

注释：如果使用 "src" 属性，则 <script> 元素必须是空的。

通过 JavaScript 输出 "Hello world"：

<script type="text/javascript">

document.write("Hello World!")

</script>

HTML <script>src 属性

指向一个外部 JavaScript 文件：

<script src="myscripts.js"></script>

src 属性规定外部脚本文件的 URL。

如果您希望在网站中的多个页面上运行相同的 JavaScript，就应该创建外部 JavaScript 文件，而不是重复编写相同的脚本。把脚本文件以 .js 扩展名进行保存，然后在 <script> 标签中使用 src 属性引用它。

注意：外部脚本文件不能包含 <script> 标签。

表格

HTML <table> 标签

<table> 标签定义 HTML 表格

一个 HTML 表格包括元素，一个或多个 <tr>、<th> 以及 <td> 元素。

<tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格单元。

表头单元格 - 包含头部信息（由 <th> 元素创建）

标准单元格 - 包含数据（由 <td> 元素创建）

<th> 元素中的文本通常呈现为粗体并且居中。

<td> 元素中的文本通常是普通的左对齐文本。

<table border="1">

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

<td>$100</td>

</tr>

</table>

HTML rowspan 属性

rowspan 属性定义单元格应该横跨的行数。

<table border="1">

<tr>

<th>Month</th>

<th>Savings</th>

<th>Savings for holiday!</th>

</tr>

<tr>

<td>January</td>

<td>$100</td>

<td rowspan="2">$50</td>

</tr>

<tr>

<td>February</td>

<td>$80</td>

</tr>

</table>

HTML colspan 属性

<table border="1">

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

<td>$100</td>

</tr>

<tr>

<td>February</td>

<td>$100</td>

</tr>

<tr>

<td colspan="2">Sum: $180</td>

</tr>

</table>

HTML <caption> 标签

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<table border="1">

<caption>Monthly savings</caption>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

<td>$100</td>

</tr>

<tr>

<td>February</td>

<td>$50</td>

</tr>

</table>

</body>

</html>

HTML <thead> 标签

<thead> 标签用于组合 HTML 表格的表头内容。

元素应该与 <tbody> 和 <tfoot> 元素结合起来使用，用来规定表格的各个部分（表头、主体、页脚）。

通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

<thead> 标签必须被用在以下情境中：作为 <table> 元素的子元素，出现在 <caption>、<colgroup> 元素之后，<tbody>、 <tfoot> 和 <tr> 元素之前。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style type="text/css">

thead {color:green;}

tbody {color:blue;}

tfoot {color:red;}

</style>

</head>

<body>

<table border="1">

<thead>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

</thead>

<tfoot>

<tr>

<td>Sum</td>

<td>$180</td>

</tr>

</tfoot>

<tbody>

<tr>

<td>January</td>

<td>$100</td>

</tr>

<tr>

<td>February</td>

<td>$80</td>

</tr>

</tbody>

</table>

<p><b>提示:</b> thead, tbody, 和 tfoot 元素默认不会影响表格的布局。不过，您可以使用 CSS 来为这些元素定义样式，从而改变表格的外观。</p>

</body>

</html>

tbody(tr,th,td)

<tbody> 标签用于组合 HTML 表格的主体内容。

元素应该与 <thead> and <tfoot> 元素结合起来使用，用来规定表格的各个部分（主体、表头、页脚）

tfoot

<tfoot> 标签用于组合 HTML 表格的页脚内容。

元素应该与 <thead> 和 <tbody> 元素结合起来使用，用来规定表格的各个部分（页脚、表头、主体）。

表单

HTML <form> 标签

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<form action="demo-form.php">

First name: <input type="text" name="FirstName" value="Mickey"><br>

Last name: <input type="text" name="LastName" value="Mouse"><br>

<input type="submit" value="提交">

</form>

<p>点击"提交"按钮，表单数据将被发送到服务器上的“demo-form.php”。</p>

</body>

</html>

HTML <input> 标签

<input> 标签规定了用户可以在其中输入数据的输入字段。

<input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件。

输入字段可通过多种方式改变，取决于 type 属性。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<form action="demo-form.php">

First name: <input type="text" name="FirstName" value="Mickey"><br>

Last name: <input type="text" name="LastName" value="Mouse"><br>

<input type="submit" value="提交">

</form>

<p>点击"提交"按钮，表单数据将被发送到服务器上的“demo-form.php”。</p>

</body>

</html>

HTML <label> 标签

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<p>点击其中一个文本标签选中选项：</p>

<form action="demo_form.php">

<label for="male">Male</label>

<input type="radio" name="sex" id="male" value="male"><br>

<label for="female">Female</label>

<input type="radio" name="sex" id="female" value="female"><br><br>

<input type="submit" value="提交">

</form>

</body>

</html>

fieldset

<fieldset> 标签可以将表单内的相关元素分组。

<fieldset> 标签会在相关表单元素周围绘制边框

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<form>

<fieldset>

<legend>Personalia:</legend>

Name: <input type="text"><br>

Email: <input type="text"><br>

Date of birth: <input type="text">

</fieldset>

</form>

</body>

</html>

legend:提示：<legend> 标签为元素定义标题。

HTML <datalist> 标签

<datalist> 标签规定了 <input> 元素可能的选项列表。

<datalist> 标签被用来在为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。

请使用 <input> 元素的 list 属性来绑定 <datalist> 元素。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<form action="demo-form.php" method="get">

<input list="browsers" name="browser">

<datalist id="browsers">

<option value="Internet Explorer">

<option value="Firefox">

<option value="Chrome">

<option value="Opera">

<option value="Safari">

</datalist>

<input type="submit">

</form>

<p><strong>注意:</strong> Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 标签。</p>

</body>

</html>

HTML <select> 标签

<select> 元素用来创建下拉列表。

<select> 元素中的<option>标签定义了列表中的可用选项。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<select>

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="opel">Opel</option>

<option value="audi">Audi</option>

</select>

</body>

</html>

datalist比select更高级！！

之前使用select制作下拉菜单，但是H5之后，datalist也可以充当select的角色，而且两者还有一点小的不同。

对于select来说，select的下拉菜单是供用户选择的，用户只能选择其中的选项不能自己添加。

但是datalist就不同了，datalist不仅可以供用户选择，用户还可以自己输入，而且datalist还可以达到模糊匹配的效果，使用很方便。

————————————————

HTML <textarea> 标签

rows:规定文本区域内可见的行数。

cols:规定文本区域内可见的宽度。

最好的方法是用css控制 height 和 width 属性。

<textarea> 标签定义一个多行的文本输入控件。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<textarea rows="10" cols="30">

我是一个文本框。

</textarea>

</body>

</html>

HTML基础-2020-05-28