HTML标签(更详细版)

发表于 | 分类于 |

更 blog 的时候没注意之前写的这篇，先拿过来凑个数(哈哈哈我真的不是故意的，还是推荐看这篇吧 ^-^)

HTML 简介

HTML 即 Hyper Text Markup Language(超文本标记语言)，由 W3C (World Wide Web Consortium,万维网联盟)组织制订规范

HTML 目前的版本

  • HTML 4.01
  • XHTML (XML 与 HTML)
  • HTML 5 (兼容前面两种版本)
  • HTML 5.1
  • HTML 5.2 (截至到目前 2018 年 2 月 23 日为止的最新版本)

注意了，目前大家所说的所谓的 H5 是指能运行在微信上的网页，这样的网页统称 H5。以及有关 HTML 的相关文档 看这里,或者可以在 google 上搜索 “HTML spec”,找到第 4 章 – The Element of HTML，这一章主要就是讲 HTML 元素的，后面的那几章都是可以看的。

HTML 中的 DOCTYPE

  • 所谓的 DOCTYPE，是用来选择你的文档类型的

  • HTML 5 中的 DOCTYPE 的写法如下

    <!DOCTYPE html>

  • HTML 中的 DOCTYPE 是必须要写的，不写可能会带来一些隐藏的 bug

HTML 中重要的三个标签

这 3 个标签分别是 html、head、body，这三个标签都有个共同点就是，这三个标签都可以不用写上去，但是浏览器会自动将其补全。所以代码最少的 html 如下

<DOCTYPE html>
<title>Demo</title>
hello world!

而在浏览器中显示的代码为

<html>
    <head></head>
    <body>
        <doctype html="">
            <title>Demo</title>
            hello world!
        </doctype>
    </body>
</html>

注意，虽然浏览器会自动补全这三个标签，但是在写代码的时候还是写上好些。

常见标签

下表是常见标签的中英文对照

标签 英文 中文
a anchor 锚
form form 表单
input input 输入控件
button button 按钮
h1..h5 header 标题
p paragraph 段落
ul unorder list 无序列表
ol order list 有序列表
li list item 列表的子项(就是列表的儿子,经常与 ul、ol 配套使用)
small small 文本变小
strong strong 文本加粗(并同时表示一种强调)
div division 分割
span span 范围
kbd keyboard 键盘
video video 视频
audio audio 音频
svg scalable vector graphic 可缩放的矢量图形(不规则的图形)
nav navigation 导航栏
main main 表示最主要的内容
footer footer 表示网页底部的内容
hr horizontal rule 水平分割线
dl description list 描述列表
dt description term dl 的子元素
dd description details dl 的子元素(必须跟着 dt 元素)
br line break 强制换行
table table 表格
tr table row 定义表格中的行
td table data 定义了表格中的一个包含数据的单元(cell)
section section 独立的区块

几个稍微重要的标签

下面几个重要的标签主要是 iframe、a、form、input/button、table 标签

iframe 标签

这个标签的作用就是在一个页面中再嵌套一个页面
示例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JS Bin</title>
        <style>
            iframe {
            width: 100%;
            height: 400px;
            }
        </style>
    </head>
    <body>
        // 两个 a 标签都是开一个新窗口
        <iframe name=xxx src="#" frameborder="0"></iframe>
        <a target=xxx href="http://qq.com">QQ</a>
        <a target=xxx href="http://baidu.com">baidu</a>
    </body>
</html>

a 标签

a 标签有 4 个属性

  • _blank
  • _self
  • _parent
  • _top

这 4 个属性要结合两层嵌套的 iframe 来理解，以下是示例代码

  • index1.html

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                iframe {
                width: 100%;
                height: 400px;
                }
            </style>
        </head>
        <body>
            index1.html
            <!--两个 a 标签都是开一个新窗口-->
            <iframe src="./index2.html" frameborder="0"></iframe>
            <hr>
        </body>
    </html>

  • index2.html

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
      </head>
      <body>
        index2.html
        <iframe src="./index3.html" width="" height=""></iframe>

        <hr>
      </body>
    </html>

  • index3.html

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
      </head>
      <body>
        index3.html

        <a target="_blank" href="http://qq.com">qq_blank</a>
        <a target="_self" href="http://qq.com">qq_self</a>
        <a target="_parent" href="http://qq.com">qq_parent</a>
        <a target="_top" href="http://qq.com">qq_top</a>

        <hr>
      </body>
    </html>

用浏览器打开 index1.html，然后分别点击 qq_blank、qq_self、qq_parent、qq_top 的链接，可以看到

_blank 的作用就是打开一个新窗口
_self 就是在当前自己的页面打开 qq.com (index3.html 中)
_parent 就是在其父 iframe 中打开 qq.com (index2.html 中)
_top 就是在顶部打开 qq.com (index1.html 中)

  • download 属性
    <a href="http://qq.com" download>下载</a>

如上所示点击该 a 标签可以下载 qq.com 的整个首页到本地。需要注意的是，假如将 http 协议响应的 content-type 修改成

content-type: application/octet-stream

那么浏览器就会以下载的形式去接收这个请求，而不是渲染页面

form 标签

实际上 form 标签也可以用来跳转页面，与 a 标签发起的 GET 请求不一样的是，form 标签发起的是一个 POST 请求。注意，在 form 表单中，必须要一个提交按钮，不然就无法完成提交操作，除非用 js

<form class="" action="index2.html" method="post">
    <input type="submit" name="" value="提交">
</form>

而这个时候请求的 content-type 是

Content-Type: application/x-www-form-urlencoded

其表示了”数据被编码成以 ‘&’ 分隔的键-值对, 同时以 ‘=’ 分隔键和值. 非字母或数字的字符会被 percent encoded”

form 标签也具有 target 属性，其属性的效果与 a 标签相同

input/button 标签

input/button 标签中需要注意的地方就是 type，其中 type 有 button、submit、checkbox、radio 等

  • type=”button” 与 type=”submit”

上下两个 button 都是可以提交的，其中 button1 自动升级为 submit 按钮

<button>button1</button>
<button type="submit">button2</button>

下面该 button 不能提交

<button type="button">button</button>

下面第一种写法不能进行 post 提交，而第二种是可以的

<input type="button" value="demo" method="post">
<input type="submit" value="demo" method="post">

  • type=”checkbox”
    一般的写法是这样
    <input type="checkbox" id="xxx"><label for="xxx">demo1</label></input>

用 label 的 for 属性与 input 的 id 属性进行关联，鼠标在点击 label 中的文字 demo1 的时候，能自动勾选到 checkbox
其实更加老司机的写法是这样

<label><input type="checkbox" name="xxx">demo1</label>

用 label 标签将 input 标签包起来，形成自动关联

  • type=”radio”
    示例代码
    <label><input name="love" type="radio" value="yes">Yes</label>
    <label><input name="love" type="radio" value="no">No</label>

table 标签

html 规定， table 标签中只能有三个元素

<table>
    <thead></thead>
    <tbody></tbody>
    <tfoot></tfoot>
</table>

其中的子标签

<th></th> 表示 table header，也就是表的标题
<tr></tr> 表示 table row，也就是表的行
<td></td> 表示 table data，也就是表的数据

table 的完整用法如下

<table border=1>
    // colgroup 是用来设定 table 的对应列的列宽的
    <colgroup>
      <col width=100>
      <col width=200>
      <col width=300>
      <col width=70>
    </colgroup>
    <thead>
      <tr>
        <th></th><th>姓名</th><th>班级</th><th>分数</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th></th><td>小明</td><td>1</td><td>75</td>
      </tr>
      <tr>
        <th></th><td>小小</td><td>2</td><td>77</td>
      </tr>
      <tr>
        <th>平均分</th><td></td><td></td><td>76</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>总分</th><td></td><td></td><td>152</td>
      </tr>
    </tfoot>
</table>

可以用 CSS 将 table 中 border 空隙去掉

<style>
    table {
        border-collapse: collapse;
    }
</style>

需要注意的是，thead tbody tfoot 这三个标签的顺序，它们之间顺序是没有关联的，因为就算是瞎写，浏览器也会自动纠正显示;并且假如你 thead 或者 tbody 或者 tfoot 不写，浏览器就会自动将你写的加入到 tbody 中，若是三个都不写，那就直接按照你写的数据的顺序进行渲染和显示

注意点

// 下面是在顶层窗口或者是 iframe 打开新页面
<a target="_top" href="xxx"></a>

// 下面是在 name=xxx 的窗口或者 iframe 打开页面
<a target="xxx" href="xxx"></a>

// 当前标签被点击后则当前页面刷新
<a href="">link</a>

// 当前标签被点击后，页面锚点变成 # ,页面也会滚动到顶部
<a href="#">link</a>

// 当前标签被点击后，浏览器发起 GET /HTTP/1.1 的请求
<a href="/..">link</a>

属于 iframe 标签的属性有 frameborder / name / sandbox / src

关于无协议链接

<a href="//qq.com">QQ</a>

  • 浏览器会根据当前协议，补全无协议链接的协议
  • 如果用 file:// 协议浏览页面，就会访问到 file://qq.com，这就是一个不存在的路径
  • 应尽量不使用 file:// 协议浏览网页，避免无协议链接出错

JavaScript 伪协议

  • 伪协议的作用就是用户在点击 a 标签时执行一段 js 代码
  • 用伪协议的上述作用实现[点击 a 标签不执行任何动作的奇葩需求]

对于 input 标签，不加 name 属性时，在表单进行提交时 input 的值就不会出现在请求里