HTML经常使用标签的使用

1、常见标签详解

一、<iframe>标签

HTML内联框架元素 <iframe> 表示嵌套的浏览上下文，有效地将另外一个HTML页面嵌入到当前页面中。在HTML 4.01中，文档可能包含头部和正文，或头部和框架集，但不能包含正文和框架集。可是，<iframe>能够在正常的文档主体中使用。每一个浏览上下文都有本身的会话历史记录和活动文档。包含嵌入内容的浏览上下文称为父浏览上下文。顶级浏览上下文（没有父级）一般是浏览器窗口。

属性

只详细说明几个重要的属性

• frameborder 取值为1时（默认值），告诉浏览器在当前iframe与其余iframe之间绘制边框，取0时则无需绘制此边框。
• name 嵌入的浏览上下文（框架）的名称。该名称能够用做<a>标签，<form>标签的target属性值，或<input> 标签和 <button>标签的formtaget属性值。
• height 以CSS像素格式HTML5，或像素格式HTML 4.01，或百分比格式指定frame的高度。
• width 以CSS像素格式HTML5，或以像素格式HTML 4.01，或以百分比格式指定frame的宽度。
• src 嵌套页面的URL地址。使用遵照同源策略的 'about:blank' 来嵌套空白页。

二、<a>标签

HTML <a> 元素 (或锚元素) 能够建立一个到其余网页、文件、同一页面内的位置、电子邮件地址或任何其余URL的超连接。

属性

• download 此属性指示浏览器下载URL而不是导航到URL，所以将提示用户将其保存为本地文件。
• href 这是一个必需属性为锚定义一个超文本连接来源。这表示连接目标的URL或URL片断。URL片断是由一个hash符号（＃），它指定一个内部目标在当前文档中的位置（ID）开头的名字。URL不限于网页（HTTP）的文件。URL可能使用浏览器所支持的任何协议。例如，文件，FTP，大多数用户代理mailto工做。PS:可使用 href="#top" 或者 href="#" 连接返回到页面顶部。除此以外href能够接：
  一、无协议的写法，如：//qq.com
  二、连接到本页某个部分#xxx 也能够是查询语句?name=xxx 或者相对路径./xxx.html
  三、伪协议javascript:alert(1); 点击不跳转不刷新javascript:;
• target 该属性指定在何处显示连接的资源。 取值为标签（tab），窗口（window），或框架（iframe）等浏览上下文的名称或其余关键词。如下关键字具备特殊的意义:
  _self: 当前页面加载。此值是默认的，若是没有指定属性的话。
  _blank: 新窗口打开。
  _parent: 加载响应到当前框架的父框架。若是没有parent框架或者浏览上下文，此选项的行为方式相同_self。（嵌套一层iframe标签，在上层打开）
  _top: 加载响应进入顶层浏览（即，浏览上下文，它是当前的一个的祖先，而且没有parent）。若是没有parent框架或者浏览上下文，此选项的行为方式相同_self。（嵌套多层iframe标签，最顶层打开）

三、<form>标签

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

属性

• action 一个处理这个form信息的程序所在的URL。这个值能够被 <button> 或者 <input> 元素中的 formaction 属性重载（覆盖）。
• method 浏览器使用这种 HTTP 方式来提交 form. 可能的值有:
  一、post: 指的是 HTTP POST 方法 ; 表单数据会包含在表单体内而后发送给服务器.
  二、get: 指的是 HTTP GET 方法; 表单数据会附加在 action 属性的URI中，并以 '?' 做为分隔符, 而后这样获得的 URI 再发送给服务器. 当这样作（数据暴露在URI里面）没什么反作用，或者表单仅包含ASCII字符时，再使用这种方法吧。（若是是GET的话和a标签功能同样）
  这个值能够被 <button> 或者 <input> 元素中的 formmethod 属性重载（覆盖）。
• name 这个form的名字。在HTML4中，这个用法不被推荐(做为替代，应该使用id). HTML5中，一个文档中的多个form当中，name必须惟一而不只仅是一个空字符串。
• target 一个名字或者说关键字，用来指示在提交表单以后，在哪里显示收到的回复. 在 HTML 4 里, 这是一个用于 frame 的名字/关键字. 在 HTML5 里, 这是一个用于 browsing context 浏览器上下文 的名字/关键字 (举例来讲, 标签页tab, 窗口window, or 或者行内 frame). 以下的关键字含有特别的含义:
  一、_self: 在当前HTML4或HTML5文档页面从新加载返回值。这个是默认值。译注：也就是说若是这个文档在一个frame中的话，self是在当前frame（document）中从新加载的，而不是整个页面（window）。
  二、_blank: 以新的HTML4或HTML5文档窗口加载返回值。
  三、_parent: 在父级的frame中以HTML4或HTML5文档形式加载返回值，若是没有父级的frame，行为和_self一致。
  四、_top: 若是是HTML 4文档: 清空当前文档，加载返回内容；HTML5: 在当前文档的最高级内加载返回值，若是没有父级，和_self的行为一致。
  五、iframename: 返回值在指定frame中加载。

四、<input>标签

HTML <input> 元素用于为基于Web的表单建立交互式控件，以便接受来自用户的数据。

属性

<input>标签的属性很是多，这里我只写几种经常使用的属性，更多可在MDN上查找

• name 控件的名称，与表单数据一块儿提交。
• value 控件的初始值. 此属性是可选的，除非type 属性是radio或checkbox。注意，当从新加载页面时，若是在从新加载以前更改了值，Gecko和IE将忽略HTML源代码中指定的值。
• checked 若是该元素的type属性的值为radio或者checkbox,则该布尔属性的存在与否代表了该控件是不是默认选择状态.
• disabled 这个布尔属性表示此表单控件不可用。 特别是在禁用的控件中， click 事件 将不会被分发 。 而且，禁用的控件的值在提交表单时也不会被提交。若是 type 属性为 hidden，此属性将被忽略。
• type 控件类型的显示。若是这个属性没有指定，默认的类型是 text。可用的值包括：
  这里只写出几个经常使用的类型，详细能够查看MDN
  一、button：完好省行为按钮。
  二、checkbox： 复选框。必须使用 value 属性定义此控件被提交时的值。使用 checked 属性指示控件是否被选择。也可使用 indeterminate 指示复选框在一种不肯定状态（大多数平台上，显示为一条穿过复选框的水平线）。
  三、password：一个值被遮盖的单行文本字段。使用 maxlength 指定能够输入的值的最大长度 。
  四、radio：单选按钮。必须使用 value 属性定义此控件被提交时的值。使用checked 必须指示控件是否缺省被选择。在同一个”单选按钮组“中，全部单选按钮的 name 属性使用同一个值； 一个单选按钮组中是，同一时间只有一个单选按钮能够被选择。
  五、submit：用于提交表单的按钮。
  六、text：单行字段；换行会将自动从输入的值中移除。

五、<button>标签

HTML <button> 元素表示一个可点击的按钮，能够用在表单或文档其它须要使用简单标准按钮的地方。 默认状况下，HTML按钮的显示样式接近于 user agent 所在的宿主系统平台（用户操做系统）的按钮， 但你可使用 CSS 来改变按钮的样貌。

属性

• name button的名称，与表单数据一块儿提交。
• value button的初始值。它定义的值与表单数据的提交按钮相关联。当表单中的数据被提交时，这个值便以参数的形式被递送至服务器。
• type button的类型。可选值：
  一、submit: 此按钮提交表单数据给服务器。未指定时，此值为默认值，或者若是此属性动态变为空值或无效值。
  二、reset: 此按钮重置全部组件为初始值。
  三、button: 此按钮没有默认行为。它能够有与元素事件相关的客户端脚本，当事件出现时可触发。
  四、menu: 此按钮打开一个由指定<menu>元素进行定义的弹出菜单。

六、<table>标签

HTML的 table 元素表示表格数据 — 即经过二维数据表表示的信息。

属性

表格标签支持 全局属性。全部属性如今已经弃用（请使用CSS代替）。

相关

• 其它表格相关的HTML元素: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>;
• 可能特别有用的关于设定表格元素样式的 CSS 属性：
  width 控制表格的宽度；
  border, border-style, border-color, border-width, border-collapse, border-spacing 控制 单元格边框，规则和框架方面；
  margin 和padding 设定特定的单元格内容样式；
  text-align 和vertical-align 定义文本和单元格内容的对齐方式。

2、HTML标签注意事项

HTML标签是什么

经过HTMl标签是能够清晰的看出网页的内部结构，简单的来讲就是经过标签，咱们能够来声明这是个什么东西，而不是用来决定这个东西是什么样子，例如：<strong>和<b>的默认CSS样式是同样的，为何还要有两个标签,这是由于strong是一个逻辑状态，而bold是一个物理状态。逻辑状态分离内容和表现形式，使用逻辑状态容许你用各类不一样的方式来表达。好比你想把文字渲染成红色，使用其它大小的字体、带有下划线或其余样式，而不是加粗的样式。必需要理解使用strong呈现出的表现形式不一样于单纯的加粗。 由于bold是一个物理状态，他没有区分表现形式和内容。若是让bold作了加粗文本外的其它任何事情，都将会使人困惑并且也不符合逻辑。
不少人喜欢用<div>和<span>这样的无含义标签从头用到尾，这样是不对的，由于看起来会很费劲，都会要加上class，这样就会下降代码可读性，

关于块级元素和内联元素的区别

HTML标签是没有块级元素和内联元素的区别，何时才有？只有在CSS里面才有，例如，咱们都觉得<div>是块级元素，但若是是下面这样，还能说<div>是块级元素吗？

<style>
  div{
    display: inline;
  }
</style>

如今<div>就是内联元素了，也就是说HTML没法控制一个元素是块级元素仍是内联元素，也就是说HTML只是定义这是一个什么东西，而不是去管它是什么样子。