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’ 来嵌套空白页。

2、<a>标签

HTML <a> 元素 (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。

属性

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

3、<form>标签

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

属性

  • action 一个处理这个form信息的程序所在的URL。这个值可以被 <button> 或者 <input> 元素中的 formaction 属性重载(覆盖)。
  • method 浏览器使用这种 HTTP 方式来提交 form. 可能的值有:
    1、post: 指的是 HTTP POST 方法 ; 表单数据会包含在表单体内然后发送给服务器.
    2、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). 如下的关键字含有特别的含义:
    1、_self: 在当前HTML4或HTML5文档页面重新加载返回值。这个是默认值。译注:也就是说如果这个文档在一个frame中的话,self是在当前frame(document)中重新加载的,而不是整个页面(window)。
    2、_blank: 以新的HTML4或HTML5文档窗口加载返回值。
    3、_parent: 在父级的frame中以HTML4或HTML5文档形式加载返回值,如果没有父级的frame,行为和_self一致。
    4、_top: 如果是HTML 4文档: 清空当前文档,加载返回内容;HTML5: 在当前文档的最高级内加载返回值,如果没有父级,和_self的行为一致。
    5、iframename: 返回值在指定frame中加载。

4、<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
    1、button:无缺省行为按钮。
    2、checkbox: 复选框。必须使用 value 属性定义此控件被提交时的值。使用 checked 属性指示控件是否被选择。也可以使用 indeterminate 指示复选框在一种不确定状态(大多数平台上,显示为一条穿过复选框的水平线)。
    3、password:一个值被遮盖的单行文本字段。使用 maxlength 指定可以输入的值的最大长度 。
    4、radio:单选按钮。必须使用 value 属性定义此控件被提交时的值。使用checked 必须指示控件是否缺省被选择。在同一个”单选按钮组“中,所有单选按钮的 name 属性使用同一个值; 一个单选按钮组中是,同一时间只有一个单选按钮可以被选择。
    5、submit:用于提交表单的按钮。
    6、text:单行字段;换行会将自动从输入的值中移除。

5、<button>标签

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

属性

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

6、<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 定义文本和单元格内容的对齐方式。

二、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只是定义这是一个什么东西,而不是去管它是什么样子。

    原文作者:梁广铭
    原文地址: https://segmentfault.com/a/1190000015232982
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞