HTML5入门

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 (这个我查了是 2017 年 11 月 2 日发布的)

能运行在微信上的网页统称 H5，跟技术无关
可以搜索 HTML spec 来搜索 HTML5 的规范文档，找到第 4 章 The element of HTML,这一章后面都可以看

DOCTYPE

这是用来选择你的文档类型的
HTML 5 的 DOCTYPE 是
<!DOCTYPE html>
HTML 中必须要写 DOCTYPE，不写可能会有隐藏的 bug

最重要的三个标签
html head body

head 标签可以不写 head链接，但是你不写，浏览器会自动帮你补全
body 标签也可以不写 body链接，但是你不写，浏览器也会自动帮你加个 body 上去
html 标签也可以不写 html链接

上面可以有个 W3C 验证器来做验证
最少的 html 代码如下

<DOCKTYPE html>
<title>我的网页</title>
你好

从上面可以看到，这个代码中可以没有 head,body,html 标签，可以从网页上显示，其中浏览器帮你补全了以上三个标签，但是记住，一般写代码的时候必须要加上

常见标签

标签	标签全称	标签翻译
a	anchor	锚
form	form	表单
input	input	输入控件
button	button	按钮
h1	head	标题
p	paragraph	段落
ul	unorder list	无序列表
ol	order list	有序列表
li	list item	列表项
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	描述项
dd	description defination	描述定义
br	break row	强制换行
tr	table row	表格中的行
td	table data	表格中的一个包含数据的单元

注意

不懂标签的使用就直接查 MDN 文档
strong 和 bold 的区别就是一种”感情强调”的区别
HTML 不管样式,只管内容,所以HTML 标签是没有块级元素和内联元素的区别的,在 CSS 里面才有
HTML 语义化就是弄懂单词的意思,比如导航条的英文是 navigation 所以它对应的标签就是 nav

几个相对重要的标签

主要是 iframe/a/form/input/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 来理解，这里应该用嵌套 2 层的 iframe 举例
如下

a 标签还有个 download 属性

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

上面这段代码就是可以下载 qq.com 的整个首页到本地。另外，如果你把 http 协议响应的 content-type 修改成

content-type: application/octet-stream

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

还有需要注意的一点是，href 需要指定一个协议，比如像这样

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

你就打不开这个链接，这个时候浏览器会寻找当前目录下的一个叫 qq.com 的文件进而渲染出来，但是可以这样写

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

关于 a 标签的 无协议的绝对地址 ,这里的 // 表示当前协议是什么协议，就跳转到该协议中对应的域名链接, 可以用 npm 下载一个 server 工具来试验

sudo npm i -g http-server

然后使用命令

http-server -c-1 # 使用无缓存

然后浏览器访问

http://127.0.0.1:8080

注意，只有锚点是不发起请求的，因为锚点的作用是页面内的跳转。如

<a href="#sss">QQ</a>

关于 javascript 伪协议

<a href="javascript: alert(1);">QQ</a>

这样点击这个链接就直接执行 javascipt 代码,这样就表示不想跳转和不想发起请求

<a href="javascript:;">QQ</a>

form 标签

这个也是用来跳转页面，与 a 标签发起的 GET 请求不一样的是，form 标签发起的是一个 POST 请求,注意，如果 form 里面没有表单提交按钮，那么就无法提交这个 form，除非你用 js

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

注意这个时候请求的 content-type 是

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

这个 application/x-www-form-urlencoded 决定了编码的方式

没有办法让 GET 请求拥有第 4 部分,但是可以在 POST 请求中修改 action ，通过写死查询参数的方法来让 POST 请求拥有第 1 部分

注意 form 标签也有 target 属性

input 标签

主要是 type 属性
首先是 input 中 type=”button” 和 type=”submit” 的区别,比如说在 form 标签中提交按钮这么写

<button>button</button>

这个时候这个按钮就会自动升级为 submit 按钮,就会有提交功能,但是假如是这样写

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

那它就只是个 button，并不能发起 POST 请求, input 标签也是如此，所以重点就在于 submit 这个 type,有些时候，因为有 submit 这个 type,所以在输入框输入东西然后按 enter 键就可以自动提交了

关于 checkbox type 一般的写法是这样

<input type="checkbox" id="xxx"><label for="xxx">嗯嗯</label></input>

这样写的作用就是用这个 label 跟这个 input 关联，然后鼠标在点击那个”嗯嗯”的文字的时候，能够自动勾选到这个 checkbox, 所以 label 的 for 和 input 的 id 是一对，它们要一起出现,然而老司机的写法是这样的

<label>用户名<input type="text" name="xxx"></label>

用 label 将 input 包起来，这样就自动关联了。需要注意的是， name 是必须要的，这样服务器才能得到这些数据

关于 radio type 在 form 标签中示例代码如下

<label><input name="love" type="radio" value="yes">Yes</label>
<label><input name="love" type="radio" value="no">No</label>

注意到这里的 name 都是 love,所以在单选的时候就只能选一个了

下拉列表

<section name="group">
  <option value="">-</option>
  <option value="1">第一组</option>
  <option value="2">第二组</option>
  <option value="3" disabled>第三组</option>
  <option value="4" selected>第四组</option>
</section>

这其中 section 也有 mutiple 属性，就是可以多选

关于 textarea 用户的多行文本

<textarea name="text" rows="8" cols="80"></textarea>

一般用 CSS 控制宽高

<textarea style="resize: none; width:200px; height:400px;" name="text" rows="8" cols="80"></textarea>

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 中，若是三个都不写，那就直接按照你写的数据的顺序进行渲染和显示