【你也能从零基础学会网站开发】Web建站之HTML+CSS入门篇 常用HTML标签(2)

🚀 个人主页 极客小俊
✍🏻 作者简介：web开发者、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步！
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注

超级链接标记

定义和用法
<a> 标签可定义锚。锚 (anchor) 有两种用法：
通过使用 href 属性，创建指向另外一个文档的链接（或超链接）
通过使用 name 或 id 属性，创建一个文档内部的书签（也就是说，
可以创建指向文档片段的链接!

<a> 元素最重要的属性是 href 属性，它指定链接的目标。
在所有浏览器中，链接的默认外观如下解释：
1.未被访问的链接带有下划线而且是蓝色的
2.已被访问的链接带有下划线而且是紫色的
3.活动链接带有下划线而且是红色的

href链接的目标是一个url

超级链接颜色归类

<a>元素可选的属性如下

HTML">rel:规定当前文档与目标 URL 之间的关系。
rev:规定目标 URL 与当前文档之间的关系。
target:在何处打开目标 URL。

表单标签 form

<form>表单，是我们web开发当中的一个重要标签，它经常和我们的后端进行数据交互、提交数据、等处理， 是一个很重要的角色!

定义和用法:
<form> 标签用于为用户输入创建 HTML 表单
表单能够包含很多 input 元素 比如: 文本字段、复选框、单选框、 提交按钮等等
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素

表单的主要作用是向服务器传输数据

举个栗子

<form action="form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>

<form>必需的属性

action:规定当提交表单时，向何处发送表单数据。
可选的属性
a***ept:规定通过文件上传来提交的文件的类型。
a***ept-charset:服务器处理表单数据所接受的字符集。
enctype:规定表单数据在发送到服务器之前应该如何编码。
method:规定如何发送表单数据。参数可以是get/post,默认方式是get.

其中name属性规定表单的名称, target属性规定在何处打开action的URL

get与post区别

1. get:数据会在地址栏显示，只能传输少量的数据。
2. post:数据不会在地址栏显示，用于传输数据量比较大的数据。

参考下表:

以上这些知识点你看不懂也没有关系，等我们学到后端了，自然就会明白!

<input> 表单标签

<input> 是我们在表单中经常使用的一个标签, 它用于搜集用户信息。
根据不同的 type 属性值，输入字段拥有很多种形式。
输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等…
input 标签的 type属性大家可以参考如下列表:

使用效果如下图:

<input> 标签的可选的属性如下:

a***ept:规定通过文件上传来提交的文件的类型。
alt:定义图像输入的替代文本。
checked:规定此 input 元素首次加载时应当被选中。
disabled:当 input 元素加载时禁用此元素。可用于input所有属性。
maxlength规定输入字段中的字符的最大长度。
name:定义 input 元素的名称。
readonly:规定输入字段为只读。
size:定义输入字段的宽度。
src:定义以提交按钮形式显示的图像的 URL。
type:规定 input 元素的类型。
value:规定 input 元素的值。

fieldset表单分组标签

定义和用法
fieldset 元素可将表单内的相关元素分组。
<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。
当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
<fieldset> 标签没有必需的或唯一的属性。
<legend>标签为 fieldset 元素定义标题

例如:

<form>
  <fieldset>
    <legend>health information</legend>
    height: <input type="text" />
    weight: <input type="text" />
  </fieldset>
</form>

如图

textarea 多行控件标签

textarea 标签定义多行的文本输入控件 它必须有name属性
文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体
我们可以通过 cols 和 rows 属性来规定 textarea 的尺寸
不过更好的办法是使用 CSS 的 height 和 width 属性 ,我们后面再说!

必需的属性
cols:规定文本区内的可见宽度
rows:规定文本区内的可见行数

可选的属性
readonly:规定文本区为只读

textarea 标签的wrap 属性
通常情况下，当用户在输入文本区域中键入文本后，浏览器会将它们按照键入时的状态发送给服务器。只有用户按下 Enter 键的地方生成换行

如果您希望启动自动换行功能（word wrapping），请将 wrap 属性设置为 virtual 或 physical。
当用户键入的一行文本长于文本区的宽度时，浏览器会自动将多余的文字挪到下一行，在文字中最近的那一点换行。

wrap="virtual" 将实现文本区内的自动换行，以改善对用户的显示，但在传输给服务器时，文本只在用户按下 Enter 键的地方进行换行，其他地方没有换行的效果。
wrap="physical" 将实现文本区内的自动换行，并以这种形式传送给服务器，就像用户真的那样键入的。因为文本要以用户在文本区内看到的效果传输给服务器，因为使用自动换行是非常有用的方法。
如果把 wrap 设置为 off，将得到默认的动作

label标签

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

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

可选的属性：
for:规定 label 与哪个表单元素绑定

select标签

select 元素可创建单选或多选菜单。
当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 <select> 表单数据提交给服务器时包括 name 属性。
可选的属性

disabled:规定禁用该下拉列表。
multiple:规定可选择多个选项。
name:规定下拉列表的名称。
size:规定下拉列表中可见选项的数目。

opation标签

option 元素定义下拉列表中的一个选项（一个条目）。
浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示。
option 元素位于select 元素内部。
例如：

<select name=“”>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

可选的属性

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