过一遍HTML标签（五）

最新推荐文章于 2022-12-05 19:00:27 发布

gigi就是我

最新推荐文章于 2022-12-05 19:00:27 发布

阅读量696

点赞数

分类专栏： html 文章标签： html 标签

本文链接：https://blog.csdn.net/crystal6918/article/details/53715847

版权

html 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

表格

table（块级）

HTML中table标签 (<table>) 用来展示多行的数据。

caption

HTML <caption> 元素展示一个表格的标题，它常常作为 <table> 的第一个子元素出现，同时显示在表格内容的最前面。
它同样可以被CSS样式化，所以，它同样可以出现在一个相对于表格的任意位置。

<table>
  <caption>Awesome caption</caption>
  <tr>
    <td>Awesome data</td>
  </tr>
</table>

这里写图片描述

colgroup

HTML 中的<colgroup>标签用来定义表中的一组列表。
一般用于对表格中的列进行组合，以便对其进行格式化。

属性：

span：规定列组应该横跨的列数。

<p>Table with colgroup</p>
<table>
  <colgroup span="2" class="columns"></colgroup>
  <tr>
    <th>Countries</th>
    <th>Capitals</th>
    <th>Population</th>
    <th>Language</th>
  </tr>
  <tr>
    <td>USA</td>
    <td>Washington D.C.</td>
    <td>309 million</td>
    <td>English</td>
  </tr>
  <tr>
    <td>Sweden</td>
    <td>Stockholm</td>
    <td>9 million</td>
    <td>Swedish</td>
  </tr>
</table>

.columns{
  background-color:red;
}

这里规定了一个列表组，横跨两列，因此其应用的样式只对前两列有效：

这里写图片描述

col

<col> 标签为表格中一个或多个列定义属性值。
如需对全部列应用样式，<col> 标签很有用，这样就不需要对各个单元和各行重复应用样式了。
只能在 table 或 colgroup 元素中使用 <col> 标签。

注意，在HTML中，col没有闭合标签。

属性：

span：规定col元素应该横跨的列数。

<p>Table with colgroup and col</p>
<table>
  <colgroup>
    <col class="column1">
    <col class="columns2plus3" span="2">
  </colgroup>
  <tr>
    <th>Lime</th>
    <th>Lemon</th>
    <th>Orange</th>
  </tr>
  <tr>
    <td>Green</td>
    <td>Yellow</td>
    <td>Orange</td>
  </tr>
</table>

.column1{
  background-color:red;
}
.columns2plus3{
  background-color:yellow;
}

以上应用了两个col元素，第一个对应第一列，第二个横跨两列，因此最终的样式:

这里写图片描述

tbody

<tbody> 标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。

thead

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

tfoot

<tfoot> 标签定义表格的页脚（脚注或表注）。该标签用于组合 HTML 表格中的表注内容。

如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。
它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。
必须在 table 元素内部使用这些标签。

thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。
当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

<p>Table with thead, tfoot, and tbody</p>
<table>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
</table>

这里写图片描述

tr

<tr> 标签定义 HTML 表格中的行。
tr 元素包含一个或多个 th 或 td 元素。

td

<td> 标签定义 HTML 表格中的标准单元格。

HTML 表格有两类单元格：

表头单元 - 包含头部信息（由 th 元素创建）
标准单元 - 包含数据（由 td 元素创建）

属性：

colspan：规定单元格可横跨的列数。
rowspan：规定单元格可横跨的行数。

th

定义表格内的表头单元格。

th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。

属性：

colspan：规定单元格可横跨的列数。
rowspan：规定单元格可横跨的行数。

<p>Simple table with header</p>
<table>
  <tr>
    <th>First name</th>
    <th>Last name</th>
  </tr>
  <tr>
    <td>John！！！！！！！！！</td>
    <td>Doe！！！！！！！！！！！</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

这里写图片描述

表单

form（块级）

HTML <form> 元素表示了文档中的一个区域，这个区域包含有交互控制元件，用来向web服务器提交信息。

属性：

accept-charset：一个空格分隔或逗号分隔的列表，这个列表包括了服务器支持的字符编码。浏览器以这些编码被列举的顺序使用它们。
默认值是一个保留字符串“UNKNOWN”。这个字符串指的是，和包含这个form元素的文档相同的编码。
在之前版本的HTML中，不同的字符编码可以用空格或逗号分隔。在HTML5中，只有空格可以允许作为分隔符。
action：一个处理这个form信息的程序所在的URL。
autocomplete（HTML5）：用于指示 input 元素是否能够拥有一个默认值，这个默认值是由浏览器自动补全的。
这个设定可以被这个form的子元素的 autocomplete 属性重载。
- off：浏览器不会自动补全输入。
- on：浏览器能够根据用户之前在form里输入的值自动补全。
enctype：当 method 属性值为 post 时, enctype 是提交form给服务器的内容的 MIME 类型。
method：浏览器提交表单的HTTP方法
name：这个form的名字。
HTML5中，一个文档中的多个form当中，name必须唯一且不是一个空字符串。
novalidate （HTML5）：
这个布尔类型的属性指示了当提交时form是否没有被验证。
target：用来指示在提交表单之后，在哪里显示收到的回复。
- _self、_blank、_parent、_top

其中，action、enctype、method、novalidable、target属性都能被<button> 或者 <input> 元素中相应属性值覆盖。如formaction、formenctype……


<!-- 一个简单的表单，发送 POST 请求 -->
<form action="" method="post">
  <label for="POST-name">Name:</label>
  <input id="POST-name" type="text" name="name">
  <input type="submit" value="Save">
</form>

fieldset（块级）

fieldset 元素可将表单内的相关元素分组。

当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。

属性：

disabled（HTML5）：规定是否应该禁用 fieldset。
form（HTML5）：规定fieldset所属的form表单。
这个属性的值与其所属的form的ID相同。默认值是最近的那个form。
name：规定 fieldset 的名称。

legend

legend 元素为 fieldset 元素定义标题.

<form action="test.php" method="post">
  <fieldset>
    <legend>Title</legend>
    <input type="radio" id="radio"> <label for="radio">Click me</label>
  </fieldset>
</form>

这里写图片描述

label（行内）

代表表单控件的标题。
它通常关联一个控件：或者是将控件放置在label元素内，或者是用作其属性。这样的控制称作label元素的labeled control 。

属性：

accesskey：从键盘访问该元素的快捷键。
for：相关表单元素的id。
form（HTML5）：表示label元素关联的form元素。此属性值必须是同一文档中<form> 元素的ID。
- 如果未指定此属性值，<label>元素必须是<form>元素的后代。
- 应用此属性值，你可以将label元素放置在文档的任何位置，而不仅仅是作为它的拥有者<form>元素的后代。

<label>Click me <input type="text" id="User" name="Name" /></label>

<!--或者 -->

<label for="User">Click me</label>
<input type="text" id="User" name="Name" />

input（行内）

input元素用来创建基于web表单的可交互控件.
属性：

type：控件类型的显示。如果这个属性没有指定，默认类型是text。
- button：按钮
- checkbox：复选框。必须使用value属性定义此控件被提交时的值。使用checked属性指示控件是否被选择。
- color （HTML5）：指定颜色的控件
- date （HTML5）：用于输入日期的控件
- datetime （HTML5）：基于UTC时区的日期时间输入控件
- datetime-local （HTML5）：用于输入日期时间控件，不包含时区。
- email （HTML5）：用于编辑email的字段。
- file：此控件可以让用户选择文件。使用 accept 属性可以定义控件可以选择的文件类型。
- hidden：不显示在页面上的控件，但它的值会被提交到服务器。
- image：图片提交按钮。必须使用 src 属性定义图片的来源及使用 alt 定义替代文本。还可以使用 height 和 width 属性以像素为单位定义图片的大小。
- month （HTML5）：用于输入年月的控件，不带时区。
- number （HTML5）：用于输入浮点数的控件。
- password：一个值被遮盖的单行文本字段。使用 maxlength 指定可以输入的值的最大长度。
- radio：单选按钮。必须使用 value 属性定义此控件被提交时的值；
  使用checked 必须指示控件是否缺省被选择；
  在同一个”单选按钮组“中，所有单选按钮的 name 属性使用同一个值；
  一个单选按钮组中同一时间只有一个单选按钮可以被选择。
- range （HTML5）：用于输入不精确值控件。
- reset：用于将表单所内容设置为缺省值的按钮。
- search （HTML5）：用于输入搜索字符串的单行文本字段。
- submit：用于提交表单的按钮。
- tel （HTML5）：用于输入电话号码的控件；
- text：单行字段；
- time （HTML5）：用于输入不含时区的时间控件。
- url （HTML5）：用于编辑URL的字段。
- week （HTML5）：用于输入一个由星期-年组成的日期，日期不包括时区。
accept：如果该元素的 type 属性的值是file,则该属性表明了服务器端可接受的文件类型；否则它将被忽略。
autocomplete （HTML5）：这个属性表示这个控件的值是否可被浏览器自动填充。
如果type属性的值是hidden、checkbox、radio、file，或为按钮类型（button、submit、reset、image），则本属性被忽略。
autofocus （HTML5）：当一个页面刚加载完毕时该表单元素是否自动获得焦点。
autosave （HTML5）
checked：如果该元素的type属性的值为radio或者checkbox,则该布尔属性的存在与否表明了该控件是否是默认选择状态.
disabled：这个布尔属性表示此表单控件不可用。
以下一些html5添加的，与form相关属性功能相同：
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
height （HTML5）：如果type类型是image，则此属性定义了图片的高度。
list （HTML5）
max （HTML5）：这个项目的最大值（数字或日期）
maxlength （HTML5）：如果 type 的值是 text, email, search, password, tel, 或 url，那么这个属性指明了用户最多可以输入的字符个数。否则忽略。
min （HTML5）：这个项目的最小值（数字或日期）
multiple （HTML5）：当input类型为email或file时，这个属性声明用户是否可以输入多于一个值。
name
pattern （HTML5）：一个检查输入项的正则表达式。适用于text, search, tel, url，email;
placeholder （HTML5）
readonly （HTML5）：用户无法修改
required （HTML5）：用户必须输入
selectionDirection （HTML5）
size：
spellcheck （HTML5）
src：当类型是image时，图片的地址
step （HTML5）：每一次递增的数目
value
width （HTML5）：如果type类型是image，则此属性定义了图片的宽度。

button（行内）

表示一个可点击的按钮。

select（行内）

代表下拉框。
菜单内的选项为<option> , 可以由 <optgroup> 元素分组。选项可以被用户预先选择。

optgroup

属性：

disabled：如果设置了这个布尔值，那么这个选项组中将没有选项是可以被选择的。
通常浏览器会置灰这样的控件，它不会再接受任何浏览器事件，例如鼠标点击或者焦点相关的事件。
label：选项组的名字，当在用户界面标记(label)选项的时候可以被浏览器使用。使用这个元素时必须加上这个属性

option

属性：

disabled：不可选择
label
selected：被选择的项
value：选项的值

<!-- The second value will be selected initially -->
<select name="select">
  <option value="value1">Value 1</option> 
  <option value="value2" selected>Value 2</option>
  <option value="value3">Value 3</option>
</select>

<select>
  <optgroup label="Group 1">
    <option>Option 1.1</option>
  </optgroup> 
  <optgroup label="Group 2">
    <option>Option 2.1</option>
    <option>Option 2.2</option>
  </optgroup>
  <optgroup label="Group 3" disabled>
    <option>Option 3.1</option>
    <option>Option 3.2</option>
    <option>Option 3.3</option>
  </optgroup>
</select>

datalist（HTML5）

<datalist> 标签定义选项列表。

请与 input 元素配合使用该元素，来定义 input 可能的值。
datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。
请使用 input 元素的 list 属性来绑定 datalist。

<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
</datalist>

textarea（行内）

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

可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。

output（HTML5）

其实就是一个占位符，用于展示一小段计算后的信息。

以前可能用一个有id属性的div作为占位符，之后再用js选择这个div填充计算后的内容。现在用output元素替换这个div，更加语义化。

属性：

for
其它影响计算结果的标签的ID，可以多个。
form
与当前标签有关联的form（从属的表单）。该属性的值必须是当前文档内的表单元素的ID。
如果未指明该属性，output标签必须是一个form的后代标签。
该属性的用处在于可以让output标签脱离form标签，存在于一个网页文档的任意位置。

这两个属性其实没有什么实际作用，唯一的用处就是表明output从哪些控件获取结果。

name
name属性。

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="range" name="b" value="50" /> +
    <input type="number" name="a" value="10" /> =
    <output name="result"></output>
</form>

这里写图片描述

progress（HTML5）

代表进度条。

属性：

max
该属性描述了这个progress元素所表示的任务一共需要完成多少工作.
value
该属性用来指定该进度条已完成的工作量.

<progress value="70" max="100">70 %</progress>

这里写图片描述

progress元素的内容作为一个后备内容，当浏览器不支持progress时就会显示这个内容。本例子中就会显示70%。

meter（HTML5）

定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。
一般需要设定一个最大值和最小值（使用max和min属性）。

注意：<meter> 标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 <progress> 标签。

<p>Heat the oven to <meter min="200" max="500" value="350">350 degrees</meter>.</p>

这里写图片描述

同样，位于meter元素中的内容只会在不支持meter元素的浏览器中显示。

meter标签还支持low和high属性，用于表示过低或过高的值（不超过min和max），有些浏览器会用特殊的样式显示这个范围内的值。

gigi就是我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
过一遍HTML标签（五）

表格table（块级）HTML中table标签 (<table>) 用来展示多行的数据。captionHTML <caption> 元素展示一个表格的标题，它常常作为 <table> 的第一个子元素出现，同时显示在表格内容的最前面。它同样可以被CSS样式化，所以，它同样可以出现在一个相对于表格的任意位置。<table> <caption>Awesome caption</caption>
复制链接

扫一扫