1 HTML历史
- 1990年 Tim Berners-Lee实现HTTP客户端与服务器的第一次通讯，设计并构建第一个网页浏览器(WorldWideWeb)，以便研究人员分享更新讯息
- 1999年 HTML4.0.1版发布
- 2004年 伊丽莎白二世为其颁发大英帝国爵级司令勋章
- 2014年 HTML5发布，是目前正在使用的版本
- 2017年 李爵士获得2016年度的图灵奖
WWW万维网和互联网的关系
- 万维网是基于互联网实现了输入地址就能看到网页的网络
HTML5
- 狭义：是W3C于2014年制定完成的HTML最新修订版本
- 广义：包括HTML5、CSS3和JavaScript在内的一套技术组合，以期望能够减少对插件应用(Flash等)的依赖
HTML5与H5是什么关系？
- H5是外行对手机页面的叫法，其实只是想要一个手机页面而已，对于究竟使用HTML5还是HTML4技术并不关心
2 HTML起手式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>网页标题</title>
</head>
<body>
</body>
</html>
-
<!DOCTYPE html>表示文档类型，告诉浏览器如何解析网页 -
<html lang="zh-CN">表示网页内容默认的语言,en表示英文 -
<head>中的内容不会出现在网页上-
<meta>设置网页的元数据-
charset="UTF-8"制定网页的编码方式，要与网页实际保存的编码方式一致 -
name="viewport" content="..."禁止缩放，兼容手机 -
http-equiv="X-UA-Compatible" content="ie=edge"http-equiv属性用来覆盖 HTTP 回应的头信息字段，这里是告诉IE使用最新的内核
-
-
<link>连接外部样式表 -
<title>设置网页标题 -
<style>放置内嵌的样式表 -
<script>引入脚本
-
3 章节标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<header>顶部广告</header>
<div>
<main>
<h1>文章标题</h1>
<h2>副标题</h2>
<section>
<h2>第一章</h2>
<p>这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话</p>
<section>
<h3>1.1 节</h3>
<p>开始1.1节的内容</p>
</section>
</section>
</main>
<aside>参考资料：1 2 3</aside>
</div>
<footer>© 版权所有</footer>
</body>
</html>
这里的语义标签具有天然良好的结构，让用户只看标签就能理解各个元素的含义。
- h1~h6：标题，h1是最高级别的标题
- section：一个章节
- article：一段完整的内容，如一篇文章，一个页面可有多个
- header：页眉，可表示整个网页的头部，也可表示一篇文章或一个区块的头部
- main：主题，一个页面只能有一个main
- aside：放置侧边栏、评论或注释
- footer：页尾，表示网页、文章的尾部，通常包含版权信息
- nav：放置页面或文档的导航信息
4 全局属性
网页元素的属性可以定制元素的行为，以键值对的方式出现。
属性名不区分大小写，但是一般小写。属性值如果没有特殊符号（如空格）可以不加引号，但是建议统一使用双引号。
布尔属性（checked、required等）只有打开和关闭两种状态，所以可以省略属性，只要写了属性名就是打开了该属性。
而全局属性指的是所有的标签都有的属性。
- class：对网页元素进行分类。一个元素可以同时有多个class，用空格分隔
- id：必须全局唯一，同一个页面不能有两个相同的id属性，值不得包含空格。但是由于不检查不报错，有些特定的名称（parent、self、top）也不能用于id属性，所以不建议使用id
- contenteditable：枚举属性,允许用户修改内容,属性值有
true和false - hidden：布尔属性，设置后该元素不出现在网页上;CSS中
display: block;设置会高于hidden属性 - style:指定当前元素的CSS属性
- tabindex：帮助tab键遍历网页元素，属性值为整数，可以不连续。0表示最后一个，负整数（通常写为-1）表示当前元素不参与遍历
- title：为元素添加附加说明，例如当标题太长需要省略的时候，title可以写入完整内容，并被浮动显示出来
引申：关于隐藏超出宽度字的CSS
.main-title{
white-space: nowrap;
text-overflow: ellipsis;
overflow:hidden;
}
5 内容标签
-
ol+li:有序列表(ordered list)，可多级嵌套 -
ul+li:无序列表(unordered list)，可多级嵌套 -
dl+dt+dd:常用来定义词汇表。description list, description term, description detail -
pre:表示保留原来的格式（preformatted），即浏览器会保留该标签内部原始的换行和空格。浏览器默认以等宽字体显示标签内容。不会保留 HTML 标签。 -
hr:用来在一篇文章中分隔两个不同的主题，浏览器会将其渲染为一根水平线。该标签是单独使用的，没有闭合标签。 -
br:换行 -
a:链接 -
em:表示强调（emphasize），浏览器默认样式会以斜体显示它包含的内容。 -
strong:表示它包含的内容具有很强的重要性，需要引起注意。 -
code:表示标签内容是计算机代码，浏览器默认会以等宽字体显示。若要显示多行，在外层包裹<pre> -
quote:表示引用他人的话。 -
blockquote:表示引用他人的话。
6 默认样式
HTML被发明的时候还没有CSS，所以为了布局排版就有了默认样式。但是默认样式都很丑，所以通常情况网站会有一个CSS reset干掉所有默认样式。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: border-box;
}
a {
color: inherit;
text-decoration: none;
}
input,
button {
font-family: inherit;
}
ol,
ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
