HTML基础标签（二）列表列表可分为有序列表、无序列表以及自定义列表。标签描述 <ol> 定义有序列表 <ul>

列表

列表可分为有序列表、无序列表以及 自定义列表。

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

`<ol>`有序列表

ol是ordered lists的缩写（有序列表）
<ol> 标签定义了一个有序列表. 列表排序以数字来显示。
使用 <li> 标签来定义列表选项。
属性：

标签	值	描述
reversed	reversed	指定列表倒序 (9,8,7…)
start	number	一个整数值属性，指定了列表编号的起始值。这个属性在 HTML4 中弃用，但是在 HTML5 中被重新引入。
type	a 表示小写英文字母编号 A 表示大写英文字母编号 i 表示小写罗马数字编号 I 表示大写罗马数字编号 1 表示数字编号（默认）	规定列表的类型。不赞成使用。请使用样式代替。

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
 
<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

`<ul>`无序列表

ul是unordered lists的缩写 (无序列表)
将 <ul> 标签与 <li> 标签一起使用，创建无序列表。

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

`<dl> <dt> <dd>`自定义列表

<dl> 标签定义一个描述列表。
<dl> 标签与 <dt> （定义项目/名字）和 <dd> （描述每一个项目/名字）一起使用。

<dl>
  <dt>Coffee</dt>
    <dd>Black hot drink</dd>
  <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

区块

大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
内联元素在显示时通常不会以新行开始。

`<div>` 标签

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。定义 HTML 文档中的一个分隔区块或者一个区域部分。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

<div style="color:#0000FF">
  <h3>这是一个在 div 元素中的标题。</h3>
  <p>这是一个在 div 元素中的文本。</p>
</div>

`<span>` 标签

用于对文档中的行内元素进行组合。
提供了一种将文本的一部分或者文档的一部分独立出来的方式。
当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。

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

表单

表单是一个包含表单元素的区域。
也就是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 <form> 来设置:

标签	描述
`<form>`	定义供用户输入的表单
`<input>`	定义输入域
`<textarea>`	定义文本域 (一个多行的输入控件)
`<label>`	定义了 `<input>` 元素的标签，一般为输入标题
`<fieldset>`	定义了一组相关的表单元素，并使用外框包含起来
`<legend>`	定义了 `<fieldset>` 元素的标题
`<select>`	定义了下拉选项列表
`<optgroup>`	定义选项组
`<option>`	定义下拉列表中的选项
`<button>`	定义一个点击按钮
`<datalist>`	指定一个预先定义的输入控件选项列表
`<keygen>`	定义了表单的密钥对生成器字段
`<output>`	定义一个计算结果

`<form>`标签

用于创建供用户输入的 HTML 表单。
属性： | 标签 | 值 | 描述 | | :-------------: | :----------------------------------------------------------------------: | :---------------------------------------------------------------------------: | | accept-charset | character_set | 规定服务器可处理的表单数据字符集。 | | action | URL | 规定当提交表单时向何处发送表单数据。 | | autocompleteNew | on
off | 规定是否启用表单的自动完成功能。 | | enctype | application/x-www-form-urlencoded
multipart/form-data
text/plain | 规定在向服务器发送表单数据之前如何对其进行编码（适用于 method="post" 的情况） | | method | get
post | 规定用于发送表单数据的 HTTP 方法。 | | name | text | 规定表单的名称。 | | novalidateNew | novalidate | 如果使用该属性，则提交表单时不进行验证。 | | target | _blank
_self
_parent
_top | 规定在何处打开 action URL。 |

`<input>`标签

规定了用户可以在其中输入数据的输入字段。
输入字段可通过多种方式改变，取决于 type 属性。
你可以使用 <label> 元素来定义 <input> 元素的标注。
属性：

属性	值	描述
accept	audio/* video/* image/* MIME_type	规定通过文件上传来提交的文件的类型。 (只针对type="file")
alt	text	定义图像输入的替代文本。 (只针对type="image")
autocomplete	on off	autocomplete 属性规定 <input> 元素输入字段是否应该启用自动完成功能。
autofocus	autofocus	属性规定当页面加载时 <input> 元素应该自动获得焦点。
checked	checked	checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio")
disabled	disabled	disabled 属性规定应该禁用的 <input> 元素。
form	form 属性规定 <input> 元素所属的一个或多个表单。
formaction	URL	属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image")
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	属性规定当表单数据提交到服务器时如何编码(只适合 type="submit" 和 type="image")。
formmethod	get post	定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type="submit" 和 type="image")
formnovalidate	formnovalidate	formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。
formtarget	_blank _self _parent _top framename	规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type="submit" 和 type="image")
height	pixels	规定 <input>元素的高度。(只针对type="image")
list	datalist_id	属性引用 <datalist> 元素，其中包含 <input> 元素的预定义选项。
max	number date	属性规定 <input> 元素的最大值。
maxlength	number	属性规定 <input> 元素中允许的最大字符数。
min	number date	属性规定 <input>元素的最小值。
multiple	multiple	属性规定允许用户输入到 <input> 元素的多个值。
name	text	name 属性规定 <input> 元素的名称。
pattern	regexp	pattern 属性规定用于验证 <input> 元素的值的正则表达式。
placeholder	text	placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息。
readonly	readonly	readonly 属性规定输入字段是只读的。
required	required	属性规定必需在提交表单之前填写输入字段。
size	number	size 属性规定以字符数计的 <input> 元素的可见宽度。
src	URL	src 属性规定显示为提交按钮的图像的 URL。 (只针对 type="image")
step	number	step 属性规定 <input> 元素的合法数字间隔。
type	button checkbox color date datetime datetime-local email file hidden image month number password radio range reset search submit tel text time url week	type 属性规定要显示的 <input> 元素的类型。
value	text	指定 <input> 元素 value 的值。
width	pixels	width 属性规定 <input> 元素的宽度。 (只针对type="image")

`<textarea>` 标签

定义一个多行的文本输入控件。
属性：

属性	值	描述
autofocus	autofocus	规定当页面加载时，文本区域自动获得焦点。
cols	number	规定文本区域内可见的宽度。
cols	disabled	规定禁用文本区域。
cols	form_id	定义文本区域所属的一个或多个表单。
maxlength	number	规定文本区域允许的最大字符数。
name	text	规定文本区域的名称。
placeholder	text	规定一个简短的提示，描述文本区域期望的输入值。
readonly	readonly	规定文本区域为只读。
required	required	规定文本区域是必需的/必填的。
rows	number	规定文本区域内可见的行数。
wrap	hard soft	规定当提交表单时，文本区域中的文本应该怎样换行。

`<label>` 标签

为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
属性：
属性值描述
for element_id 规定 label 与哪个表单元素绑定。
form form_id 规定 label 字段所属的一个或多个表单。

属性	值	描述
for	element_id	规定 label 与哪个表单元素绑定。
form	form_id	规定 label 字段所属的一个或多个表单。

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

`<fieldset>`标签

<fieldset> 标签可以将表单内的相关元素分组，会在相关表单元素周围绘制边框。
<legend> 标签为 <fieldset> 元素定义标题。
属性：
属性值描述
disabledNew disabled 规定该组中的相关表单元素应该被禁用。
formNew form_id 规定 fieldset 所属的一个或多个表单。
nameNew text 规定 fieldset 的名称。

属性	值	描述
disabledNew	disabled	规定该组中的相关表单元素应该被禁用。
formNew	form_id	规定 fieldset 所属的一个或多个表单。
nameNew	text	规定 fieldset 的名称。

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>
</form>

`<legend>`标签

为 <fieldset>元素定义标题。

`<select>`标签

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

属性：

属性	值	描述
autofocusNew	autofocus	规定在页面加载时下拉列表自动获得焦点。
disabled	disabled	当该属性为 true 时，会禁用下拉列表。
formNew	form_id	定义 select 字段所属的一个或多个表单。
multiple	multiple	当该属性为 true 时，可选择多个选项。
name	text	定义下拉列表的名称。
requiredNew	required	规定用户在提交表单前必须选择一个下拉列表中的选项。
size	number	规定下拉列表中可见选项的数目。

`<option>`标签

定义下拉列表中的一个选项（一个条目）。
<option> 标签可以在不带有任何属性的情况下使用，但是您通常需要使用 value 属性，此属性会指示出被送往服务器的内容。

<option>属性：

属性	值	描述
disabled	disabled	规定此选项应在首次加载时被禁用。
label	text	定义当使用 `<optgroup>` 时所使用的标注。
selected	selected	规定选项（在首次显示在列表中时）表现为选中状态。
value	text	定义送往服务器的选项值。

<select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

`<optgroup>`标签

<optgroup> 标签经常用于把相关的选项组合在一起。
如果你有很多的选项组合, 你可以使用<optgroup> 标签能够很简单的将相关选项组合在一起。
属性：
属性值描述
disabled disabled 规定禁用该选项组。
label text 为选项组规定描述。

属性	值	描述
disabled	disabled	规定禁用该选项组。
label	text	为选项组规定描述。

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

`<button>`标签

定义一个按钮。
在 <button> 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。
请始终为 <button> 元素规定 type 属性。不同的浏览器对 <button> 元素的 type 属性使用不同的默认值。
属性：

属性	值	描述
autofocus	autofocus	规定当页面加载时按钮应当自动地获得焦点。
disabled	disabled	规定应该禁用该按钮。
form	form_id	规定按钮属于一个或多个表单。
formaction	URL	规定当提交表单时向何处发送表单数据。覆盖 form 元素的 action 属性。该属性与 type="submit" 配合使用。
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	规定在向服务器发送表单数据之前如何对其进行编码。覆盖 form 元素的 enctype 属性。该属性与 type="submit" 配合使用。
formmethod	get post	规定用于发送表单数据的 HTTP 方法。覆盖 form 元素的 method 属性。该属性与 type="submit" 配合使用。
formnovalidate	formnovalidate	如果使用该属性，则提交表单时不进行验证。覆盖 form 元素的 novalidate 属性。该属性与 type="submit" 配合使用。
formtarget	_blank _self _parent _top framename	规定在何处打开 action URL。覆盖 form 元素的 target 属性。该属性与 type="submit" 配合使用。
name	name	规定按钮的名称。
type	button reset submit	规定按钮的类型。
value	text	规定按钮的初始值。可由脚本进行修改。

`<datalist>`标签

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

<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

`<datalist>`标签

标签作为计算结果输出显示(比如执行脚本的输出)。

属性：

属性	值	描述
for	element_id	描述计算中使用的元素与计算结果之间的关系。
form	form_id	定义输入字段所属的一个或多个表单。
name	name	定义对象的唯一名称（表单提交时使用）。

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
  <input type="range" id="a" value="50">100
  +<input type="number" id="b" value="50">
  =<output name="x" for="a b"></output>

框架

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

`<iframe>`标签

规定一个内联框架。
属性： | 属性 | 值 | 描述 | | :---------: | :-------: | :------------------------------------------: | | height | pixels | 规定 <iframe> 的高度。 | | name | name | 规定 <iframe> 的名称。 | | seamlessNew | seamless | 规定 <iframe> 看起来像是父文档中的一部分。 | | src | URL | 规定在 <iframe> 中显示的文档的 URL。 | | srcdocNew | HTML_code | 规定页面中的 HTML 内容显示在 <iframe> 中。 | | width | pixels | 规定 <iframe> 的宽度。 |

<--!固定大小-->
<iframe loading="lazy" src="demo_iframe.htm" width="200" height="200"></iframe>
<--!无边框-->
<iframe src="demo_iframe.htm" frameborder="0"></iframe>

<--!显示一个目标链接的页面-->
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>

HTML基础标签（二）

列表

<ol>有序列表

<ul>无序列表

<dl> <dt> <dd>自定义列表

区块

<div> 标签

<span> 标签

表单

<form>标签

<input>标签

<textarea> 标签

<label> 标签

<fieldset>标签

<legend>标签

<select>标签

<option>标签

<optgroup>标签

<button>标签

<datalist>标签

<datalist>标签

框架

<iframe>标签

`<ol>`有序列表

`<ul>`无序列表

`<dl> <dt> <dd>`自定义列表

`<div>` 标签

`<span>` 标签

`<form>`标签

`<input>`标签

`<textarea>` 标签

`<label>` 标签

`<fieldset>`标签

`<legend>`标签

`<select>`标签

`<option>`标签

`<optgroup>`标签

`<button>`标签

`<datalist>`标签

`<datalist>`标签

`<iframe>`标签