HTML中需要掌握的标签

目录

1. 概述
2. 需要掌握的标签
   • （HTTP GET请求）
   • （HTTP POST请求）
   • 空标签
     可替换标签
     语义化的理解
     总结

     概述

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

     需要掌握的标签

     这里先插入一个在如今开发环境中不常用的

     关于它的优缺点，这里不谈。，index2.html中有 ，而如下的代码均放在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请求

     （HTTP POST请求）

     HTML 元素 表示了文档中的一个区域，这个区域包含有交互控制元件，用来向 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。
     

     的 method 属性默认情况下为 get，即发起一个GET请求，但这并没有什么用，直接用 GET 请求相当于在网址末尾加上 users?name=Tom&password=123456。
     POST 请求添加查询参数的方式是加到 action 里：比如 action="users?z=123"。

     2.target属性

     标签的 target 属性和 标签完全一致。

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

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

     就视觉上而言，两者长得一样，那么它们有什么区别呢？

     第一种情况，两者都没有：

     
       
       
       提交
     
     

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

     第二种情况，有 type="button"：

     这里的 button 只是普通按钮，并没有 submit 功能，因此无法提交表单。

     第三种情况，有 type="submit"：

     表单正常提交。
     因此，有且仅有 submit 按钮存在时才能提交表单（注意 自动升级的情况）。

     2.type="checkbox"

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

     喜欢的水果：
     橘子
     苹果
     香蕉
     

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

     3.type="radio"

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

     你女朋友问你：爱不爱我？
     YES
     YES
     

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

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

     HTML的

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

     表格的内容按照这个顺序：

     • 一个可选的
     元素
     一个可选的
     元素
     一个可选的
     元素（tfoot元素出现在tbody或tr元素前后都可以。在HTML4中，它只能出现在这些元素之前）
     零个或多个
     元素
     一个或多个
     元素

     元素

     零个或多个的

     成绩表

     	Name	Class	Score
     Average			80
     Total			240
     	Shawn	2	100
     	Tom	1	60
     	Frank	3	80

     如图是一个结构比较完整的表格，加上一点 CSS 呈现如下：

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

     HTML元素表示那些不能由其它HTML元相关元素 (, ,