技术改变生活

Technology changes life,Life-long learning

HTML中需要掌握的标签

目录

  1. 概述
  2. 需要掌握的标签
    • <a>(HTTP GET请求)
    • <form>(HTTP POST请求)
    • <input>
    • <table>
    • <meta>
    • 空标签
    • 可替换标签
  3. 语义化的理解
  4. 总结

概述

HMTL(HyperText Markup Language)是一种相当简单的、由不同元素组成的标记语言,它可以应用于文本片段,使文本在文档中具有不同的含义,将文档结构化为逻辑块,并且可以将图片,影像等内容嵌入到页面中。
随着2014年10月29日HTML5的标准规范发布以来,业界对语义化编程的诉求越来越高,本文会在谈到一些需要着重掌握的标签属性同时,谈到对语义化的理解。HTML5的DOCTYPE较之前有了大幅度简化,<!DOCTYPE html>即可。

需要掌握的标签

这里先插入一个在如今开发环境中不常用的<iframe>元素来辅助我们的学习。它的形式如下:

关于它的优缺点,这里不谈。<iframe>还有一些骚操作,详见知乎

<a>(HTTP GET请求)

HTML <a>元素(或称锚元素)可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。在跳转页面的时候,<a>用于发送HTTP GET请求。它是HTML中最短也最常用的标签之一。

1.target属性

该属性指定在何处显示链接的资源。 取值为标签(tab),窗口(window),或框架(iframe)等浏览上下文的名称或其他关键词。以下关键字具有特殊的意义:

  • _self: 当前页面加载,即当前的响应到同一HTML 4 frame(或HTML5浏览上下文)。此值是默认的,如果没有指定属性的话。
  • _blank: 新窗口打开,即到一个新的未命名的HTML4窗口或HTML5浏览器上下文
  • _parent: 加载响应到当前框架的HTML4父框架或当前的HTML5浏览上下文的父浏览上下文。如果没有parent框架或者浏览上下文,此选项的行为方式与 _self 相同。
  • _top: IHTML4中:加载的响应成完整的,原来的窗口,取消所有其它frame。 HTML5中:加载响应进入顶层浏览上下文(即,浏览上下文,它是当前的一个的祖先,并且没有parent)。如果没有parent框架或者浏览上下文,此选项的行为方式相同_self。

结合上面的<iframe>元素,我们可以了解target属性会具体跳转到哪里。
这里先创造一种场景。假设在当前目录下,有index.html index2.html index3.html,index.html中有 <iframe src="./index2.html"></iframe>,index2.html中有 <iframe src="./index3.html"></iframe>,而如下的代码均放在index3.html中。

如字面意思,_self会跳转到index3.html中打开,_blank无论何时何地都在新页面打开,_parent会跳转到index2.html中打开,_top则会跳转到顶层页面index.html中打开。

2.download属性

此属性指示浏览器下载 URL 而不是导航到它,因此将提示用户将其保存为本地文件。点击页面中的该“下载”标签,会直接下载。
另外的一种做法是将HTTP请求的content-type写成application/octet-stream,但如果content-type是text/html,则需要用download属性强制下载。

3.href属性

href包含超链接指向的 URL 或 URL 片段。
有以下几种情况需要注意:

  • 无协议绝对地址:href="//example.com" => 会打开http://www.example.com
  • 相对地址:href="xxx.html" => 会打开/xxx.html,是一个相对路径
  • 只写锚点:href="#abc" => 页面内跳转,直接加到路径结尾,不会发起HTTP请求
  • 写查询参数:href="?name=frank" => 跳转到/?name=frank,并发起一个GET请求
  • 伪协议:href="javascript: alert(1)" => 会直接执行。一个奇葩需求:href="javascript:;" => 作用:建立一个不需要跳转的链接。而直接用href="#"会跳转到页面顶部,或者href=""会刷新页面并发起一个GET请求

<form>(HTTP POST请求)

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

1.method属性

下面是一个用于提交用户名和密码的form,常用于登录网址。

首先,一个表单如果没有提交按钮,则无法提交表单,除非用js。
假设用户输入的username是Tom,password是123456,点击提交按钮后,会发起一个POST请求,并且在POST请求的第四部分,name和password会以Tom&123456的形式发送出去,其Content-Type: application/x-www-form-urlencoded。而基于这个content-type,所有非英文的内容都会被转义为UTF-8。
<form>的method属性默认情况下为get,即发起一个GET请求,但这并没有什么用,直接用GET请求相当于在网址末尾加上users?name=Tom&password=123456
POST请求添加查询参数的方式是加到action里:比如action=”users?z=123″。

2.target属性

<form>标签的target属性和<a>标签完全一致。

<input>

HTML<input>元素用于为基于Web的表单创建交互式控件,以便接受来自用户的数据; 可以使用各种类型的输入数据和控件小部件,具体取决于设备和user agent
<input>有非常多的type,以下是几种介绍。

1.type=”button”和type=”submit”区别

就视觉上而言,两者长得一样,那么它们有什么区别呢?
第一种情况,两者都没有:

注意到,这里的按钮是唯一的提交按钮,那么它会自动升级为submit按钮,即点击“提交”按钮,表单能发送成功。但如果此时button添加了属性type=button则会失败。
第二种情况,有type=”button”:

这里的button只是普通按钮,并没有submit功能,因此无法提交表单。
第三种情况,有type=”submit”:

表单正常提交。
因此,有且仅有submit按钮存在时才能提交表单(注意<button>自动升级的情况)。

2.type=”checkbox”

表示复选框。必须使用 value 属性定义此控件被提交时的值。使用 checked 属性指示控件是否被选择。

使用<label>标签将内容包起来,可以点击文字直接选中,否则只能点方框。
必须有name才能被提交到服务器上,如果三个全部选中,那么POST请求的第四部分是fruit=orange&fruit=apple&fruit=banana。

3.type=”radio”

表示单选按钮。必须使用 value 属性定义此控件被提交时的值。使用checked必须指示控件是否缺省被选择。在同一个”单选按钮组“中,所有单选按钮的 name 属性使用同一个值; 一个单选按钮组中是,同一时间只有一个单选按钮可以被选择。

使用一样的name即可只选中一个。

<input>标签中还有很多HTML5中用到的type,以后会逐渐补齐。

<table>

HTML的<table>元素表示表格数据 — 即通过二维数据表表示的信息。
表格的内容按照这个顺序:

  • 一个可选的 <caption> 元素
  • 零个或多个的 <colgroup> 元素
  • 一个可选的 <thead> 元素
  • 一个可选的 <tfoot> 元素(tfoot元素出现在tbody或tr元素前后都可以。在HTML4中,它只能出现在这些元素之前)
  • 零个或多个 <tbody> 元素
  • 一个或多个 <tr> 元素

如图是一个结构比较完整的表格,加上一点css呈现如下:

《HTML中需要掌握的标签》

table

其中的灰色部分是选中colgroup中的columns2plus3来实现的。我们注意到代码中的<tfoot>在<tbody>上面,但是不影响结果的呈现。

<meta>

HTML<meta>元素表示那些不能由其它HTML元相关元素 (<base>, <link>, <script>, <style><title>) 之一表示的任何元数据信息.
<meta>有非常多的属性,这里我们只讲name=”viewport”,它提供有关视口初始大小的提示,仅供移动设备使用。目前研究还不深,这里只提供文档。

空标签

一个空元素可能是 HTML,SVG,或者 MathML 里的一个不可能存在子节点(例如内嵌的元素或者元素内的文本)的元素。
在 HTML 中有以下这些空元素:

可替换标签

CSS 里,可替换元素的展现不是由CSS来控制的。这些元素是一类 外观渲染独立于CSS的 外部对象。 简单来说,它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置,但不会影响到可替换元素自身的内容。某些可替换元素,例如 <iframe> 元素,可能具有自己的样式表,但它们不会继承父文档的样式。
CSS 能对可替换元素产生的唯一影响在于,部分属性支持控制元素内容在其框中的位置或定位方式。
典型的可替换元素有:

有些元素仅在特定情况下被作为可替换元素处理,例如:

语义化的理解

结构化的标签,它在一个网页结构中,可以清楚的表示该部分在文档中的结构含义。

HTML5关注的不仅是呈现出一个页面的效果,它更加关注如何构造一个结构化的代码内容优雅地页面。
HTML5新增的结构化标签虽然本质上都是div标签,但它用语义化的命名方式使得一个HTML页面更加有结构和清晰,在日后如果遇到重构等问题也更加方便。

语义化标签,顾名思义就是从标签的名称就能看出这个标签的作用是什么,按照设计的网页结构使用合理的标签可以使代码清晰易懂,一定程度上也做好了页面的SEO(搜索引擎优化)。

语义化标签列举:
<article> 定义外部的内容,可以是一片新的文章
<aside> 定义article以外的内容,aside的内容可用作文章的侧栏
<fig caption> 定义figure元素的标题
<figure> 对元素进行组合,使用fig caption元素为元素组添加标题
<footer> 定义section或文档的页脚
<header> 定义文档的页眉
<hgroup> 用于对section或网页的标题进行组合,使用fig caption元素为元素组添加标题
<nav> 定义导航链接部分
<section> 定义文章中的节。比如章节、页眉、页脚或文章中的其他部分。
<time> 定义日期或时间

总结

以上大概就是我在学习HTML过程中对标签的梳理。里面涉及到有些内容,比如meta viewport在移动端的应用,还需要以后有相关项目经历才能深刻理解。以及一些HTML5中的新标签,特别是canvas,video,audio等,会在以后的文章里详细呈现。

原文始发于:HTML中需要掌握的标签

点赞