万维网WWW的发明

如何制作出网页

HTML的历史

HTML5 技术集

HTML5 有两个含义

• 最新版本的 HTML 语言，含旧标签和32个新标签

• HTML5 和它的朋友们（包括CSS3等）

HTML5 技术集合

• 新标签， 新属性

• 新的通信技术： WebSokets, WebRTC等

• 离线存储技术： LocalStorage, 断网检测

• 多媒体技术： 视频，音频

• 图像技术： Canvas, SVG , WebGl

• Web增强技术： History API, 全屏

• 设备相关技术： 摄像头， 触摸屏

• 新的样式技术： CSS3新的Flex, Grid布局方式

学习一门语言必须学会什么?

• 语法（怎么写代码）

• 如何调试（怎么知道自己代码写错了）

• 在哪里查资料（其实就是为了抄代码）

• 标准制定者是谁

HTML 的语法是怎样的？

• 标签

如何调试？

• VSCode

• WebStorm

• HTML5验证器（在线/npm工具）

在哪里查资料？

标准的制定者是谁?

HTML标签

学习工具

• VSCode插件： prettier 自动格式化你的代码

• JSBin

• 代码沙盒

HTML起手式

• Emmit感叹号

1. ! DOCTYPE 表示文档类型

2. html 是根标签

3. lang = “en” :表示语言是英文，一般改为 zh-CN

4. head :html子标签，一般不缩进，里面的内容是看不见的

5. meta charset = “UTF-8” :文件的字符编码，UTF-8 支持所有人类语言

6. meta name=“viewport” content=“width=device-width, initial-scale=1.0” 这句话防止页面进行缩放，兼容手机

7. meta http-equiv=“X-UA-Compatible” content=“IE=edge” ：告诉浏览器使用最新的内核

8. title : 标题

章节标签

表示文章/书的层级

• 标题 h1~h6

• 章节 section

• 文章 article

• 段落 p

• 头部 header

• 脚步 footer

• 主要内容 main

• 旁支内容 aside

• 划分 div

• &copy 版权声明

全局属性

所有标签都有的属性

• class 给标签分一个类

• contenteditable 使任何一个元素可以被编辑

• hidden 让一个标签看不见

• id 如果这个元素是全页面唯一的可以用 id ,如果不是，就用 class ，不到万不得已不要用 id ,js 里面可以直接通过 id 获取对应的元素

• style 设置标签的样式，比CSS样式优先级高，比JS样式优先级低

• tabindex 用来控制tab的顺序 ，0 是最后一个访问的，-1 表示不要访问

• title 用来显示完整的内容

默认样式

HTML标签自己本身就带有的样式

常见的CSS reset

• 进人大厂首页

• Chrome开发者工具，找到类似代码

• 复制到自己的项目

• 命名为reset.css

内容样式

• ol + li ordered list 有序列表

• ul + li unordered list 无序列表

• dl + dt + dd description list 描述列表 term 术语 d data 数据

• pre 如果你想保留空格，回车，TAB 你就用pre标签

• hr 水平分割线

• br 换行

• a 用来添加超链接 加 target = "_blank" 在新窗口打开

• em 表示强调语气

• strong 表示重要内容

• code 里面是代码块，默认是内联样式

• quote 表示引用 默认是内联的

• blockquote 块级引用 默认是块级的