HTML 标签详解(下)-CFANZ编程社区

图像

介绍：在 HTML 中，图像由 <img> 标签定义。
<img> 是一个单一型标签。要在页面上显示图像，你需要设置img元素的src（source，数据源）属性。源属性的值是图像的 URL 地址。

格式:

<img src="URL">

元素支持的属性：

属性名称	属性值	说明
src	URL	图片的路径
alt	文本内容	给图片做注解
width	像素/百分比	宽
height	像素/百分比	高

<img src="importantLogo.jpeg" alt="Company logo">

超链接

介绍：HTML 提供了 <a> 标签（Anchor，锚点）通过href属性指定URL地址可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。

格式:


<a href="http://www.baidu.com">跳转至网站</a>
<a href="mailto:gecedu@163.com">发送Email</a>
<a href="tel:+123456789">播出电话</a>

支持的属性

download(HTML 5 新增)：接受一个 filename (文件名) 作为属性值或不设置任何属性，此属性指示浏览器下载 URL 而不是导航到它，因此将提示用户将其保存为本地文件。

<a href="/files/file.pdf" download>Download PDF</a>
<a href="/files/file.pdf" download="guide">Download PDF</a>

href：接受一个URL路径地址作为参数，URL 规定链接指向的页面的 URL 或 URL 片段。

<a href="http://www.baidu.com">百度一下</a>
<a href="/index.html">主页</a>
<a href="#somewhere">主页</a>

格式： scheme://host[:post]/path/filename

<a href="http://www.baidu.com:80/index.html">百度一下</a>
<a href="wexin://tencent.com:8080/dl/news/open?data=902323&params=test">唤醒微信</a>

补充：相对路径与绝对路径

绝对路径：绝对路径就是你的主页上的文件或目录在硬盘上真正的路径，(URL和物理路径)例如：
C:\xyz\test.txt 代表了test.txt文件的绝对路径。http://www.sun.com/index.htm也代表了一个
URL绝对路径。
相对路径：相对与某个基准目录的路径。包含Web的相对路径（HTML中的相对目录），例如：在
Servlet中，"/"代表Web应用的根目录。和物理路径的相对表示，例如：./ 代表当前目录,
../代表上级目录。这种类似的表示，也是属于相对路径。

hreflang: 该属性用于指定链接文档的人类语言。其仅提供建议，并没有内置的功能。
media: media_query 规定被链接文档是为何种媒介/设备优化的。(HTML 5 新增)
rel: 规定当前文档与被链接文档之间的关系，rel可选值。
target:规定在何处打开链接文档,可选值包含：

_self (默认)：当前页面加载，即在当前页面打开新的链接。
_blank：新窗口打开超链接。
_parent：加载响应到的HTML5浏览上下文的父浏览上下文。如果没有parent框架或者浏览上下文，此选项的行为方式与 _self 相同。
_top：加载的页面占据整个原来的窗口，加载到顶层浏览上下文。如果没有上层浏览上下文，此选项的行为方式相同_self。

链接到本页的某个部分

<!-- links to element on this page with id="attr-href" -->
<a href="#属性">
Description of Same-Page Links
</a>

<div id="属性"> 点击上面页内的锚点，网易会跳转至与锚点属性同名id的元素上</div>

图片链接

<a href="https://developer.mozilla.org/en-US/">
  <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" 
       alt="MDN logo" />
</a>

基准参考点

概念：HTML <base> 元素用于指定一个文档中包含的所有相对路径的根 URL。一个文档中只能包含一个 <base> 元素。

<head>
    <base href=”http://www.baidu.com”>
</head>

支持的属性：

href 用于文档中相对路径地址的基础 URL。允许绝对和相对URL。
target 默认浏览上下文的关键字或作者定义的名称，当没有明确目标的链接 <a> 或表单 <form> 导致导航被激活时显示其结果。该属性值定位到浏览上下文（例如选项卡，窗口或内联框 <iframe> ）。
以下的关键字指定特殊的意思：
1. _self: 载入结果到当前浏览上下文中。（该值是元素的默认值）。
2. _blank: 载入结果到一个新的未命名的浏览上下文。
3. _parent: 载入结果到父级浏览上下文（如果当前页是内联框）。如果没有父级结构，该选项的行为和_self一样。
4. _top: 载入结果到顶级浏览上下文（该浏览上下文是当前上下文的最顶级上下文）。如果没有父级，该选项的行为和_self一样。

注意：如果指定了以上任一属性，base元素必须在其他任何属性是URL的元素之前。例如：<link> 的 href 属性。并且base对于锚点同样有效。

表单

介绍：HTML表单是用户和web站点或应用程序之间交互的主要内容之一。它们允许用户将数据发送到web站点。大多数情况下，数据被发送到web服务器，但是web页面也可以自己拦截它并使用它。

表单的功能结构：

概念：HTML表单是由一个或多个小部件组成的。这些小部件可以是文本字段(单行或多行)、选择框、按钮、复选框或单选按钮。大多数情况下，这些小部件与描述其目的的标签配对——正确实现的标签能够清楚地指示视力正常的用户和盲人用户输入表单所需的内容。

`<form>` 元素

from元素正式定义了一个表单。它是一个容器元素，但它也支持一些特定的属性来配置表单的行为方式。它的所有属性都是可选的，但实践中最好至少要设置action属性和method属性。

<form action="/my-handling-form-page" method="post">

</form>

支持的属性：

name: 给这个表单起个名字
method: 属性定义了发送数据的HTTP方法(它可以是“get”或“post”).

action: 属性定义了在提交表单时,应该把所收集的数据送给谁(/那个模块)(URL)去处理。
enctype: 当 method 属性值为 post 时，enctype 就是将表单的内容提交给服务器的 MIME 类型。可能的取值有：
1. application/x-www-form-urlencoded：未指定属性时的默认值。
2. multipart/form-data：当表单包含 type=file 的 <input> 元素时使用此值。
3. text/plain：出现于 HTML5，用于调试。
target：表示在提交表单之后，在哪里显示响应信息。在 HTML5 里：
1. _self：默认值。在相同浏览中加载。
2. _blank：在新的未命名的浏览上下文中加载。
3. _parent：在当前上下文的父级浏览上下文中加载，如果没有父级，则与 _self 表现一致。
4. _top：在最顶级的浏览上下文中（即当前上下文的一个没有父级的祖先浏览上下文），如果没有父级，则与 _self 表现一致。

`<input>` 元素

input是一个单一型元素用于为基于Web的表单创建交互式控件，以便接受来自用户的数据。

<input type="text">

type：input的工作方式相当程度上取决于type属性的值，不同的 type 值会赋予input元素不同的功能。如果未指定此属性，则采用的默认类型为 text。

表单输入类型：

text (默认)：单行的文本输入框，输入中的换行会被自动去除。

<input type="text">

password：单行的密码输入框，输入的文本使用密文显示。

<input type="password">

number：只能输入数字的输入框。

<input type="number">

email：编辑邮箱地址的输入框。类似 text 输入，但在支持的浏览器上会有邮箱格式的规则验证提示。

<input type="email">

search (H5新增)：用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标。

<input type="search">

tel (H5新增)：用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘。

<input type="tel">

url (H5新增)：用于输入 URL 的控件。类似 text 输入，在支持的浏览器上会有URL的规则验证提示，在支持动态键盘的设备上有相应的键盘。

表单日期类型：

week：用于输入以年和周数组成的日期，不带时区。

<input type="week">

month (H5新增)：输入年和月的控件，不带时区。

<input type="month">

time (H5新增)：于输入时间的控件，不包括时区。

<input type="time">

date (H5新增)：输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时会打开日期选择器或年月日的数字滚轮。

<input type="date">

datetime-local(H5新增)：输入日期和时间的控件，使用户所在时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。(目前支持的浏览器为数不多)

<input type="datetime-local">

表单单复选类型：

checkbox：复选框，可设为选中或未选中。

<input type="checkbox">
<input type="checkbox">

radio：单选框

<input type="radio">

单选栏位 :<input type=”radio” name=” 栏位名称 ” value=” 内定值 ”
checked=”checked” disabled=”disabled ”>

表单按钮类型：

button：没有默认行为的按钮，上面显示 value 属性的值，默认为空。
submit：用于提交表单的按钮。
image：带图像的 submit 按钮。显示的图像由 src 属性规定。如果 src 缺失，alt 属性就会显示。
reset：此按钮将表单的所有内容重置为默认值。不推荐。

表单文件类型

file：让用户选择文件的控件。使用accept属性规定控件能选择的文件类型。

<input type="file" accept="image/png">

表单颜色类型

color (H5新增)：用于指定颜色的控件；在支持的浏览器中，激活时会打开取色器。

<input type="color">

表单范围控制类型

range (H5新增)：此控件用于输入不需要精确的数字。控件是一个范围组件，默认值为正中间的值。同时使用htmlattrdefmin 和 htmlattrdefmax来规定值的范围。

表单范围控制类型

hidden：不显示的控件，其值仍会提交到服务器。举个例子，右边就是一个隐形的控件。

`<input>`元素的属性

type：所有input元素,input表单控件的type
autocomplete：所有input元素，用于表单的自动填充功能
autofocus：所有input元素,页面加载时自动聚焦到此表单控件
disabled：所有input元素,表单控件是否被禁用
form：所有input元素,将控件和一个form元素联系在一起
name：所有input元素,input表单控件的名字。以名字/值对的形式随表单一起提交
value：所有input元素,表单控件的值。以名字/值对的形式随表单一起提交

list：绝大部分input元素,自动填充选项的 <datalist> 的id值
readonly：绝大部分input元素,存在时表示控件的值不可编辑(布尔值)
required：绝大部分input元素,表示此值为必填项或者提交表单前必须先检查该值(布尔值)
checked：当input元素type为radio, checkbox时，用于控制控件是否被选中
alt：当input元素type为image时，alt属性是可访问性的要求。
accept：当input元素type为file时，用于规定文件上传控件中期望的文件类型。
capture：当input元素type为file时，文件上传控件中媒体拍摄的方式
dirname：当input元素type为text, search时，表单区域的一个名字，用于在提交表单时发送元素的方向性
formaction：当input元素type为image, submit时，用于提交表单的URL
formenctype：当input元素type为image, submit时，表单数据集的编码方式，用于表单提交
formmethod：当input元素type为image, submit时，用于表单提交的HTTP方法
formnovalidate：当input元素type为image, submit时，提交表单时绕过对表单控件的验证
formtarget：当input元素type为image, submit时，表单提交的浏览上下文
height： image 和 <img> 的 height 属性相同；垂直方向
src： image 和<img> 的 src 属性一样；图像资源的地址
width： image 与 <img> 的 width 属性一样
max：当input元素type为number时，当前数字表单元素可以输入的最大值
min：当input元素type为number时，当前数字表单元素可以输入的最小值
step：当input元素type为number时，当前数字表单元素有效的递增值
maxlength：当input元素type为password, search, tel, text, url时，value 的最大长度（最多字符数目）
minlength：当input元素type为password, search, tel, text, url时， value 的最小长度（最少字符数目）
placeholder：当input元素type为password, search, tel, text, url时，当表单控件为空时，控件中显示的内容
pattern：当input元素type为password, text, tel，匹配有效 value 的模式（pattern）
size：当input元素email, password, tel, text时,控件的大小
multiple：当input元素type为email, file时。是否允许多个值(布尔值)

`<label>` 元素

概念：<label> 元素（标签）表示用户界面中某个元素的说明。

<div class="preference">
    <label for="html">你喜欢HTML5吗?</label>
    <input type="checkbox" name="html" id="html">
</div>

<div class="preference">
    <label for="program">你喜欢编程吗?</label>
    <input type="checkbox" name="program" id="program">
</div>

实现关联的方法有有两种：

你需要给 <input> 一个 id 属性。而 <label> 需要一个 for 属性，其值和 <input> 的 id 一样。

<label for="apple">Do you like apple?</label>
<input type="checkbox" name="apple" id="apple">

你也可以将 <input> 直接放在 <label> 里，此时则不需要 for 和 id 属性，因为关联已隐含存在。

<label>Do you like apple?
  <input type="checkbox" name="apple">
</label>

支持的属性：

for：即和 <label> 元素在同一文档中的可关联标表单元素的 id。

form：表示与 label 元素关联的 <form> 元素（即它的表单拥有者）。其值应是同一文档中 <form> 元素的 id。因此你可以将 label 元素放在文档的任何位置，而不仅作为 <form> 元素的后代。

多行文本输入框

概念：HTML <textarea> 元素表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用。

<label for="proposal">请提出宝贵的建议</label>

<textarea id="proposal" name="proposal"
          rows="5" cols="33">
    这里是多行文本输入框的内容......
</textarea>

支持的属性：

name：元素的名称。
autocomplete：是否使用浏览器的记忆功能自动填充文本。可能的值有：
off: 不使用浏览器的记忆自动填充，使用者必须输入他们想要输入的所有内容。或者网页提供了自己的自动填充方法。
on: 浏览器根据用户之前输入的内容或者习惯，在用户输入的时候给出相应输入提示。
autofocus：页面加载完毕之后是否自动给本元素添加焦点。只有跟表格关联的才能使本属性生效。
disabled：禁用文本域。默认为false。
form：指定跟自身相关联的表单。值必须为本文档内的表单的ID，如果未指定，就是跟当前所在的表单元素相关联。这就允许你在文档的任意地方放置文本域元素。
placeholder：向用户提示可以在控件中输入的内容。在渲染提示时，占位符文本中的回车符(\r)或换行符(\n)一定会被作为行断（换行）处理。
readonly：不允许用户修改元素内文本。和 disabled 属性不同的是，这个能让用户点击和选择元素内的文本。如果在表单里，这个元素的值还是会跟随表单一起提交。
required：提示用户这个元素的内容必填。
cols：文本域的可视宽度。必须为正数，默认为20 (HTML5)。
rows：元素的输入文本的行数（显示的高度）。
maxlength：允许用户输入的最大字符长度 (Unicode) 。未指定表示无限长度。
minlength：允许用户输入的最小字符长度(Unicode)
wrap：指定文本换行的方式。默认为soft。可能的值为：
hard: 在文本到达元素最大宽度的时候，浏览器自动插入换行符(CR+LF) 。比如指定 cols值。
soft: 在到达元素最大宽度的时候，不会自动插入换行符。

窗体选项栏

概念：HTML <select> 元素表示一个提供选项菜单的控件

格式：

<label for="关联id">Choose:</label>
<select name=”栏位名称” size=”数字” id="关联id">
    <option value=”选项值” selected=”selected”>
    <option value=”选项值”>…
    <option value=”选项值”>…
</select>
<!-- 
你还可以将 <option> 元素放在 <optgroup> 元素中以为下拉菜单创建不同的选项分组。
-->
<select>
    <optgroup label="分组名称">
        <option>Tyrannosaurus</option>
        <option>Velociraptor</option>
        <option>Deinonychus</option>
    </optgroup>
    <optgroup label="分组名称">
        <option>Diplodocus</option>
        <option>Saltasaurus</option>
        <option>Apatosaurus</option>
    </optgroup>
</select>

   
<!--  multiple-->
<select name=”栏位名称” size=”数字” multiple>
    <option value=”选项值” selected=”selected”>
    <option value=”选项值”>…
    <option value=”选项值”>…
</select>

select支持的属性：

autofocus：这个布尔值属性能够让一个对象在页面加载的时候获得焦点。一个文档中只有一个对象可以有这个属性。
disabled：这个布尔值的属性表示用户不能与该表单控件交互。
form：<select> 所关联的 <form> (它的"表单拥有者")。其值必须是在同一文档中的 <form> 元素的id（如果没有设置这个属性， <select> 元素则与其任何存在的祖先 <form> 元素关联）。
multiple：这个布尔值属性表示列表中的选项是否支持多选。没有声明该值时，一次只能选中一个选项。声明这个属性后，大多数浏览器都会显示一个可滚动的列表框，而非一个下拉菜单。
name：该属性规定了控件的名称。
required （H5新增）：一个布尔值属性，表示必须选中一个有非空字符串值的选项。
size：如果控件显示为滚动列表框（如声明了 multiple），则此属性表示为控件中同时可见的行数。浏览器不需要将选择元素呈现为滚动列表框。默认值为 0。

option支持的属性：

disabled：如果设置了这个布尔属性，则该选项不可选。浏览器通常会将这种控件显示为灰色，并且不再接受任何浏览器事件，例如鼠标点击或者焦点相关的事件。如果这个属性没有设置，而这个元素的其中一个父元素是被禁用的 <optgroup> 元素，则这个元素仍然是禁用的。
label：这个属性是用于表示选项含义的文本。如果 label 属性没有定义，它的值就是元素文本内容。
selected：这个布尔属性存在时表明这个选项是否一开始就被选中。 <select> 元素的 multiple 属性没有设置，则 <select> 元素中只有一个 <option> 元素可以拥有 selected 属性。
value: 这个属性的值表示该选项被选中时提交给表单的值。如果省略了这个属性，值就从选项元素的文本内容中获取。