HTML的常用标签属性及使用时需注意的一些细节

前言

本篇随笔的主要是复习一下常用的一些HTML（Hyper Text Markup Language）标签及其属性，并总结一些使用过程中需要注意的一些细节，本篇提及的常用标签主要有：

1. iframe标签
2. a标签
3. form标签
4. input标签
5. table标签

1  iframe标签

• iframe 元素是什么？--HTML内联框架元素 <iframe> 表示嵌套的浏览上下文，有效地将另一个HTML页面嵌入到当前页面中。
• iframe的主要属性：src和name。
• src属性的作用：嵌套页面的URL地址。
• name属性的作用：嵌入的浏览上下文（框架）的名称。该名称可以用作<a>标签，<form>标签的target属性值，或<input> 标签和 <button>标签的formtaget属性值。
• iframe标签和a标签的配合使用使用范例如下：
  

  设置一个src为空的内联框架iframe，name值为“demo”，并将框架的边设置为1px的红色实线，再加一个a标签，并使a标签的target的值等于iframe的name值。点击下图右侧output中的qq链接，a标签的链接的就会出现在iframe框架中。

  

2  a标签（发get请求获取信息）

• a标签是什么？ --HTML <a> 元素  (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。
• a标签的的常用属性：href、target。
• href属性的作用：定义一个超文本链接来源。链接到外部地址/内部地址的用法如下：

  href链接到外部地址：
  <a href="http://www.qq.com/">
  </a>
  
  href链接到内部地址：
  <a href="#属性">
  </a>

• target属性的作用：指定在何处显示链接的资源。target的几种主要值如下：

  _self: 当前页面加载
  _blank: 在新窗口打开
  _parent: 加载响应到当前框架的父框架或当前的HTML5浏览上下文的父浏览上下文。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self
  _top: 加载响应进入顶层浏览上下文，即祖先级。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self
  
  注意：使用target时，考虑添加 rel="noopener norefferrer" 以防止针对 window.opener API 的恶意行为。

   

3  form标签（可发get请求也可发post请求）

• form标签是什么？--HTML <form> 元素 表示了文档中的一个区域，这个区域包含有交互控制元件，用来向web服务器提交信息。
• form标签主要属性：action、method、target。
• action属性的作用：一个处理这个form信息的程序所在的URL。这个值可以被 <button> 或者 <input> 元素中的 formaction 属性重载（覆盖）。
• method属性的作用：浏览器使用这种 HTTP 方式来提交 form. 主要的值有:
  

  post: 指的是 HTTP POST 方法 ; 表单数据会包含在表单体内然后发送给服务器.
  get: 指的是 HTTP GET 方法; 表单数据会附加在 action 属性的URI中，并以 '?' 作为分隔符, 然后这样得到的 URI 再发送给服务器. 当这样做（数据暴露在URI里面）没什么副作用，或者表单仅包含ASCII字符时，再使用这种方法吧。
  这个值可以被 <button> 或者 <input> 元素中的 formmethod 属性重载（覆盖）

• target属性的作用：一个名字或者说关键字，用来指示在提交表单之后，在哪里显示收到的回复。（form标签的target属性和a标签的target属性表现一样）

  _self: 当前页面加载。
  _blank: 在新窗口打开
  _parent: 加载响应到当前框架的父框架或当前的HTML5浏览上下文的父浏览上下文。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self。
  _top: 加载响应进入顶层浏览上下文，即祖先级。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self
  
  iframename: 返回值在指定frame中加载。 HTML5: 这个值可以被 <button> 或者 <input> 元素中的 formtarget 属性重载（覆盖）。

• 注意⚠️：from标签中一定要有input标签。

4  input标签

• input标签是什么？--HTML <input> 元素用于为基于Web的表单创建交互式控件，以便接受来自用户的数据。
• form标签的主要属性：type。
• type属性的作用：显示控件类型。主要值如下：

  button：无缺省行为按钮。
  checkbox： 复选框。必须使用 value 属性定义此控件被提交时的值。使用 checked 属性指示控件是否被选择。也可以使用 indeterminate 指示复选框在一种不确定状态（大多数平台上，显示为一条穿过复选框的水平线）。
  color：HTML5 用于指定颜色的控件。
  date：HTML5 用于输入日期的控件（年，月，日，不包括时间）。
  datetime：HTML5 基于 UTC 时区的日期时间输入控件（时，分，秒及几分之一秒）。
  datetime-local：HTML5 用于输入日期时间控件，不包含时区。
  email：HTML5 用于编辑 e-mail 的字段。 合适的时候可以使用 :valid 和 :invalid CSS 伪类。
  file：此控件可以让用户选择文件。使用 accept 属性可以定义控件可以选择的文件类型。
  hidden：不显示在页面上的控件，但它的值会被提交到服务器。
  image：图片提交按钮。必须使用 src 属性定义图片的来源及使用 alt 定义替代文本。还可以使用 height 和 width 属性以像素为单位定义图片的大小。
  month：HTML5 用于输入年月的控件，不带时区。
  number: HTML5 用于输入浮点数的控件。
  password：一个值被遮盖的单行文本字段。使用 maxlength 指定可以输入的值的最大长度 。
  radio：单选按钮。必须使用 value 属性定义此控件被提交时的值。使用checked 必须指示控件是否缺省被选择。在同一个”单选按钮组“中，所有单选按钮的 name 属性使用同一个值； 一个单选按钮组中是，同一时间只有一个单选按钮可以被选择。
  range：HTML5 用于输入不精确值控件。如果未指定相应的属性，控件使用如下缺省值：
  min：0
  max：100
  value：min + (max-min)/2，或当 max 小于 min 时使用 min
  step：1
  reset：用于将表单所内容设置为缺省值的按钮。
  search：HTML5用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。
  submit：用于提交表单的按钮。
  tel：HTML5 用于输入电话号码的控件；换行会被自动从输入的值中移除A，但不会执行其他语法。可以使用属性，比如 pattern 和 maxlength 来约束控件输入的值。恰当的时候，可以应用 :valid 和 :invalid CSS 伪类。
  text：单行字段；换行会将自动从输入的值中移除。
  time：HTML5 用于输入不含时区的时间控件。
  url：HTML5 用于编辑URL的字段。 The user may enter a blank or invalid address. 换行会被自动从输入值中移队。可以使用如：pattern 和 maxlength 样的属性来约束输入的值。 恰当的时候使可以应用 :valid 和 :invalid CSS 伪类。
  week：HTML5 用于输入一个由星期-年组成的日期，日期不包括时区。

• 注意⚠️：<input type="submit"/> <button> " <input type="button" />的区别：

  <input type="submit" /> 这样的按钮用户点击之后会自动提交 form（不考虑javascript 的话）。 
  <button> 这个按钮放在 form 标签只有一个按钮时，会升级成提交按钮，点击会自动提交。
  优点是按钮的内容除了有文字，还可以有图片等多媒体内容。
  缺点是不同的浏览器得到的 value 值不同，以及浏览器兼容等问题。
  而
  <input type="button" /> 仅仅只是一个按钮。按下去什么也不会发生（不考虑javascript 的话）。

 5  table标签

• table标签是什么？--HTML的 table 元素表示表格数据 — 即通过二维数据表表示的信息。
• 一个完整的table标签包括<thead><tbody><tfoot>，包括<th><tr><td>。如以下代码：

• <table>
    <thead>
      <tr>
        <th>1</th>
        <th>1</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>2</td>
        <td>2</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>3</td>
        <td>3</td>
      </tr>
    </tfoot>
  </table>

   

• 注意⚠️：table的大部分属性已经被弃用，例如：

  align属性（不要用）
  应在 <table> 元素上使用 CSS 的属性 margin-left 、margin-right 为 auto ( 或者 margin 设置为 0 auto) 来实现类似于 align 属性的效果，而不是直接使用align。 
  
  cellspacing属性（不要用）
  应在 <table> 元素上使用 CSS 的属性 border-spacing ，以达到类似于 cellspacing 的效果。
  
  等等
  具体可查阅MDN

   

转载于:https://www.cnblogs.com/nolaaaaa/p/8810549.html