前言

HTML（Hyper Text Markup Language）超文本标记语言，是用来描述网页的一种语言。

参考：小火柴的前端小册子

标签

标签有单标签和双标签

注意：HTML标签对大小写不敏感，但要全小写。

实体

HTML中某些字符是预留的，需要被替换为字符实体（如：  ）

全局属性（一共16个）

属性名 值 作用
contenteditable true/false 指定是否可以在浏览器里编辑内容
data-* 用于存储页面或应用程序的私有定制数据
draggable true/false/auto 用户是否可以拖动元素注意：链接和图像默认是可拖动的
spellcheck true/false 规定是否对元素进行拼写和语法检查，对拼写错误的单词会在其下方出现红线

语法规范

  • 文件应以 <!DOCTYPE ......> 首行顶格开始，推荐 <!DOCTYPE html>
  • 声明文档编码charset，必须是 head第一个子元素<meta charset="utf-8">
  • 根据页面内容和需求适当填写keywords和description<meta name="keywords" content="">
  • 引入CSS时必须指明rel=”stylesheet”，保证favicon可访问

结构

1.文档声明

2.文档头部

<head>其中的标签有<meta>、<title>、<base>、<link>、<style>和<script>这六个元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
1.meta标签的四个属性
如果设置了charset，即将对网页使用的字符集作出声明HTML5
如果设置了name，它是一个文档级的元数据，将附着在整个页面上
如果设置了http-equiv，它是一个编译指令，即由服务器提供的来指示页面应如何加载
如果设置了itemprop，将定义一个用户自定义的元数据(未实现)

<meta charset="utf-8"/>  描述
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />  视口(移动端使用)
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />  IE浏览器渲染

2.base用于指定文档里所有相对链接规定默认URL或默认目标
<base href="http://cnblogs.com" target="_blank">

3.link标签指定了外部资源与当前文档的关系，具有属性href、rel、media、hreflang、type和sizes。
href和rel是常用的
<link rel="icon" href="ico.ico"/>

4.script可以通过添加async或者defer属性来让脚本不必同步执行
<script async src="myAsyncScript.js" onload="myInit()"></script>
<script defer src="myDeferScript.js" onload="myInit()"></script>

3.骨架结构

3个部分：文档声明、文档头部和文档主体

4.块级元素

<pre>元素表示预定义格式文本。空格和换行符都会显示出来,表示已排版的内容。

5.内联元素

em和strong分别表示强调和重要，i和b标签是斜体与加粗（em和strong也有效果）

s不精确文字常用于表示价格变动等

其他标签：小号<small>、上下标等 <sup> <sub>

6.结构元素

语义化<article>、<aside>、<nav>、<section>、<header>、<footer>、<main>

7.交互元素

功能性元素details、summary、dialog

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<details>主要用于描述文档或文档某个部分的细节，与<summary>配合使用可以为<details>定义标题。
标题是可见的，用户点击标题时，显示出details。
该标签仅有一个open属性，用来定义details是否可见(默认为不可见状态)
[注意]这两个标签只有chrome和opera支持

<details>
    <summary>Copyright 2015.</summary>
    <p>小火柴的蓝色理想</p>
</details>

----------------------
<dialog>
该标签只有一个open属性，用来定义对话框是否可见(默认为不可见)
[注意]只有chrome和opera支持

8.内容模型

​ HTML标签在HTML5中内容模型拓展到了7类，包括元数据型、区块型、标题型、文档流型、语句型、内嵌型、交互型。但即使是这7个类别也没有完全覆盖所有元素的所有情况，元素可以不属于任何一个类别，被称为穿透的；很多元素可能属于不止一个类别，称为混合的。

标签

a标签：是超文本锚点，可以链接到一个新文件、用id属性指向任何元素。

1
2
3
4
5
6
7
8
9
10
<!-- 属性href -->
<!--1.链接地址-->
<a href="http://www.baidu.com">百度</a>
<!--2.下载地址：download指定下载的文件名-->
<a href="./vue.js" download="vue">test</a>
<!--3.锚点-->
<a href="#test">目录</a>
<div id="test"></div>

<!-- target：target属性表示链接打开方式 -->

img标签

1
2
1、src:地址
2、alt:图像替代文本，供探索引擎抓取使用

列表

定义列表：dl dt dd，dd描述列表dl元素，只能作为子元素出现，并且必须跟着一个dt元素

<iframe>

​ src 规定在内联框架中显示的文档的URL

　name 规定内联框架的名称，用于在javascript中引用元素或作为链接的目标

　height 规定iframe的高度

　width 规定iframe的宽度

1
2
3
4
5
<iframe id = "frameID" name="frameName" src="top.html"></iframe>
<script>
var frameID = document.getElementById('frameID');
var frameWindow = frameID.contentWindow;
var frameDocument = frameID.contentDocument;

表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table自适应表格</title>
    <style>
        body {
            filter: invert(1) hue-rotate(270deg);
        }
        table {
            width: 100%;
            text-align: center;
            border-spacing: 0;/**设置相邻单元格的边框间的距离**/
            border-collapse: collapse;/**边框会合并为一个单一的边框**/
            color:#5a5a5a;
            table-layout: fixed;/**固定table表格**/
        }
        table  thead {
            background-color: #d9edf7;
        }
        table td,table th{
            border:1px solid #ccc;
            overflow: hidden;/**溢出隐藏**/
            white-space: nowrap;/**不换行**/
            text-overflow: ellipsis;/**溢出不可见部分使用...代替**/


        }
    </style>
</head>
<body>
    <table>
        <caption>我是表格标题</caption>
        <!--表头-->
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>出生年月</th>
            </tr>
        </thead>
        <!--表内容-->
        <tbody>
            <tr>
                <td>久伴</td>
                <td>24</td>
                <td>男</td>
                <td>1996年8月22日</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

多媒体

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!-- 音频 -->
<!--
autoplay         自动播放
controls         显示控件
loop             循环播放
preload          音频在页面加载时进行加载，并预备播放(若使用autoplay,则忽略该属性)
src              要播放的音频的URL
-->
<audio controls autoplay loop muted src="song.mp3"> 
  <source src="song.mp3" type="audio/mp3" />
</audio>

<!-- 视频 -->
<!--
autoplay            自动播放
controls            显示控件
height         　　　播放器高度
width         　　　 播放器宽度
loop                循环播放
preload             视频在页面加载时进行加载，并预备播放(若使用autoplay,则忽略该属性)
preload="none"     //当页面加载后不载入视频
preload="auto"     //当页面加载后载入整个视频
preload="meta"     //当页面加载后只载入元数据
src                 要播放的视频的URL
poster        　　　 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像  
-->
<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
</video>


<!--
<source>：为<video>和<audio>提供媒介资源
media     规定媒体资源的类型(没有浏览器支持)
src     　规定媒体文件的URL
type      规定媒体资源的MIME类型
-->

多媒体api

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
canPlayType()
/*
检测浏览器是否能播放指定的音频或视频类型，返回值为下列之一：
'probable':浏览器最可能支持该类型
'maybe':浏览器也许支持该类型
'':浏览器不支持该类型
*/

load()
/*
重新加载音频或视频元素，用于在更改src来源或其他设置后对音频或视频元素进行更新
*/

play()
/*
开始播放音频或视频
*/

pause()
/*
暂停当前播放的音频或视频
*/