HTML标签

Posted on

<iframe> 标签（可替换标签）

嵌套页面：<iframe src="https://www.baidu.com" name="xxx"></iframe>

  1. 可用 css 调整嵌套页面的宽高度。
  2. 例：可在主页面内与 <a> 标签合用，为 <iframe> 标签设置 name 属性，为 <a> 标签设置相同 value 的 target 属性，即可在当前页面内点击不同链接在嵌套页面中进行跳转。
  3. frameborder 属性为嵌套页面的边框，设置 value 值为 0 即可隐藏边框。
  4. <iframe> 的 src 属性支持相对路径。

<a> 标签

<a> 标签定义超链接，用于从一张页面链接到另一张页面，最重要的属性是 href 属性，它指示链接的目标。（一般为 GET 请求）

  1. target 属性
    • <a href="http://www.qq.com" target="_blank">QQ</a> 在新开页面打开网页。
    • <a href="http://www.qq.com" target="_self">QQ</a> 在当前页面打开网页。
    • <a href="http://www.qq.com" target="_parent">QQ</a> 在上一级页面打开网页。
    • <a href="http://www.qq.com" target="_top">QQ</a> 在最顶级页面打开网页。
  2. download 属性
    • <a herf=“http://qq.com” download>下载</a> 下载链接所指的页面。

      后端一般为：Content-type: application/octet-stream

  3. herf 属性
    • <a href="qq.com">QQ</a> 相对路径，会在当前目录下查找”qq.com”文件。
    • <a href="http://qq.com">QQ</a> 表明HTTP或HTTPS协议，一般这样写。
    • <a href="//qq.com">QQ</a> 浏览器会根据当前协议，补全无协议链接的协议。
    • <a href="#hi">QQ</a> 跳转到页面锚点。
    • <a href="?name=yang">QQ</a> 自动添加查询路径，会发起 GET 请求。
    • <a href="javascript: alert(hi);">QQ</a> 伪协议，点击会直接执行js语句。
    • <a href="javascript:;">QQ</a> 可以实现点击链接不发生任何事。
    • 应该尽量不使用 file:// 协议预览网页，以免无协议链接出错。

<form> 标签

<form>标签用于为用户输入创建 HTML 表单，表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。表单用于向服务器传输数据。

1
2
3
4
5
<form action="users" method="POST">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="提交">
</form>

  1. action 属性：指定请求路径。
  2. 默认 method 为 GET，一般设置为 POST。
  3. 表单提交使用 UTF-8 编码。
  4. name 属性的值会作为 form data 部分的 key 提交。（如果 method 属性为GET，这部分内容会被浏览器添加到查询参数中。）
  5. <form> 必须要有提交按钮，否则无法提交表单。
  6. <form> 标签与 <a> 标签的 target 属性完全一致。

<input> 标签

<input> 标签规定了用户可以在其中输入数据的输入字段。在 <form> 标签中使用，用来声明允许用户输入数据的 input 控件。输入字段可通过多种方式改变，取决于 type 属性。

  1. type 属性：<input> 标签的 type 属性有很多种。
    • button：如果一个 <form> 里面只有一个 <button> 按钮，且没有设置 type 属性，则会自动升级为当前标签的 submit 按钮。这种情况下: <button>button</button> 等价于 <input type="submit" value="提交">。另外<input type="button" value="提交"> 在任何情况下无效。
    • label：可以使用 <label> 元素来定义 <input> 元素的标注。
      点击 select 时，可以同时点击到 <input> 元素。（<input> 中的 id 属性 对应 <label> 中的 for 属性）
      <input type="checkbox" id="1"><label for="1">select</label>
      可以用 <label> 将 <input> 包起来，简化上边的写法。
      <label><input type="checkbox">select</label>
    • radio&checkbox：可以在 type 后边分别设置 name 和 value 的值，提交的时候可以将选择情况一并提交到服务器。另外，当多个<input> 的 type 属性为 radio 时，后边 name 属性名字一样则为担单选，否则为多选，类似于 checkbox 属性。

<select> 标签

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

  1. name 属性：定义下拉列表的名称。
  2. multiple 属性：当该属性为 true 时，可选择多个选项。
  3. size 属性：规定下拉列表中可见选项的数目。
  4. required：规定用户在提交表单前必须选择一个下拉列表中的选项。
  5. disabled：当该属性为 true 时，会禁用下拉列表。
  6. autofocus：规定在页面加载时下拉列表自动获得焦点。
  7. 元素中的 <option> 可以设置 disabled 属性和 selected 属性，分别该选项不可选和默认已选择选项。

<textarea> 标签

<textarea> 标签定义一个多行的文本输入控件。可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性，也可以用 CSS 固定尺寸大小style=resize:none;width=200px;height=100px;

<table> 标签

<table> 标签定义 HTML 表格，border 属性可以调整表格边框。比如可以用CSS使边框合并为一条线。

1
2
3
table{
  border-collapse: collapse;
}

<table> 标签内含有3个主要标签：

  1. <thead> 表格头。
  2. <tbody> 表格主体。
  3. <tfoot> 表格脚。

上边3个主要标签与代码先后顺序无关，浏览器会自动调整为从头到脚的顺序，如果不写上边3个标签，则浏览器则会自动将内容补到<tbody> 里边，这3个标签可以含有以下标签：

  1. <tr> 定义HTML表格中的一行单元格，成对出现，一个 <tr> 元素包含一个或多个 <th> 或 <td> 元素。
  2. <th> 表示HTML表格的表头部分，该标签中的内容会以粗体显示并居中。
  3. <td> 定义 HTML 表格中的标准单元格，表示表格中的数据，通常是普通的左对齐文本。

<colgroup> 表示 HTML 的表格列组，可以用<col> 添加属性。

  1. span 规定列组应该横跨的列数。如<col span="3" style="background-color:blue">，表示前3列背景颜色为蓝色。如果有多个<col>，第一个 span 属性默认值为1，后边的依次以前一个<col> span 属性值递增。
  2. width 规定列组的宽度。列数根据 <col> 的 次序递增。
  3. bgcolor 规定列组的背景色。<col span="2" bgcolor=blue> 等价于 <col span="3" style="background-color:blue">

<dl> 标签

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

#