第一个网页
emmet插件：自动生成HTML代码片段
注释
注释为代码的阅读者提供帮助，注释不参与运行
在HTML中注释使用如下格式：
<!-- 注释内容 --> 也可以用Ctrl+/那个键，按一次会自己出来，再按一次回自己取消，可以写多行。
元素
其他叫法 ：标签、标记
<a href="http://www.baidu.com">百度</a>
<title>Document</title>
整体：element（元素）
元素=起始标记(begin tag)+结束标记（end tag）+元素内容（要在页面上显示的东西）+元素属性（不是必要的）
属性=属性名（href就是一个属性名）+属性值（双引号内的）
属性的分类：
- 局部属性：某些元素特有的属性
- 全局属性：所有元素通用（title）
<meta charset="UTF-8">
有些元素没有结束标记，这样的元素叫做空元素（**是加粗）
空元素的两种写法：
<meta charset="UTF-8"><meta charset="UTF-8" />
元素的嵌套
元素不能相互嵌套
父元素、子元素、祖先元素、后代元素、兄弟元素（拥有同一个父元素）
标准的文档结构
HTML：页面，HTML文档
<!DOCTYPE html>
文档申明：告诉浏览器当前文档使用的HTML的标准HTML5，不写文档申明的话，将导致浏览器进入怪异渲染模式。
<html lang="en">
*****
</html>
根元素，一个页面最多只能一个，并且该元素是所有其他元素的父元素或祖先元素。HTML5中，没有强制要求写
lang属性：language，全局属性，表示该元素内部使用的文字是使用那一种自然语言书写而成的。(汉语：lang=“cmn-hans”)
<head>
</head>
文档头，文档头内部的内容不会显示到页面上。
<meta>
文档的元数据：附加信息。
charset:指定网页内容编码
<title>Document</title>
网页标题
<body>
</body>
文档体，页面上所有要参与显示的元素，都应该放置到文档体中
语义化
什么是语义化
-
每一个HTML元素都有具体的含义
a元素：超链接
p元素：段落
h1元素：一级标题 -
所有元素与展示效果无关，元素展示到页面中的效果，应该由CSS决定的。因为浏览器有默认的CSS样式，所以每一个元素有一些默认样式。
重要：选择什么元素，取决于内容的含义，而不是显示出的效果。
文本元素
HTML5中支持的元素：HTML5元素周期表
h
标题：head
h1-h6：表示一级标题到六级标题
（快捷法）
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
p
段落：paragraph
lorem乱数假文：没有任何实际含义的文字
p*6>lorem +Tab
(不用加大括号)
要是lorem后面加一个1，就表示只生成一个单词
span[无语义]
没有语义，仅用于设置样式
以前：某些元素在显示时会独占一行（块级元素），而某些元素不会（行级元素）；
到了HTML5，已经弃用了。
pre
预格式化文本元素
空白折叠：在源代码中的连续空白字符（空格，回车，换行，制表），在页面显示时会被折叠为一个空格。
例外：在pre元素中的内容不会出现空白折叠，在pre元素内部出现的内容会按照源代码中显示。该元素通常用于在网页中显示一些代码。
pre元素功能的本质：他有一个默认的CSS属性。
显示代码时，通常外面套code+pre，code表示代码区域
HTML实体
实体字符 HTML entity
（比如要在页面中将
显示出来）
通常用于在页面中显示一些特殊符号。
- &单词;
- &#数字;
- 小于、大于符号 <p>
- 空格符号 (non-breaking space )
- 版权符号 ©
- &符号 &
a元素
href属性
hyper reference(通常表示跳转地址)
- 跳转地址（普通链接）
- 跳转到某个锚点（当前页面的其他位置）（锚链接）
<a href="#">回到顶部</a> 属性只用加一个#
id 属性：全局属性，表示元素在文档中的唯一编号
3.功能链接
点击后触发某个功能
-
执行JS代码，JavaScript:
-
发送邮件，mailto:
要求用户计算机上安装有邮件发送软件:exchange -
拨号:tel:
在移动端触发，或者用户计算机上安装有拨号软件
target属性
表示跳转窗口位置
target取值
- _self:在当前页面窗口中打开，默认值
- _blank:在新窗口中打开
加缩进：选中按住tab键
减缩进：选中按住shift+tab
在前面加一行 ：Ctrl+shift
在后面直接跳行：Ctrl+enter
路径的写法
站内资源和站外资源
站内资源：当前网站的资源
站外资源：非当前网站的资源
绝对路径 相对路径
站外资源：绝对路径
站内资源：相对路径
绝对路径书写格式
url地址：
协议名://主机名:端口名/路径
schema://host:port/path
https://www.baidu.com/
http://127.0.0.1:5500/day.1/
- 协议名：http、 https、 file
- 主机名：域名、IP地址
- 端口号：如果协议是http协议，默认端口号为80，https，默认端口号为443
当跳转目标和当前页面的协议相同时可以省略协议
- 相对路径
以./开头，表示当前资源的所在的目录
可以书写…/表示返回上一级
相对路径中./可以省略
图片元素
img元素
image缩写，空元素
- src属性：source
- alt属性：当图片资源失效时，将使用该属性的文字替代图片
和a元素连用
和map元素
-
map：地图(相当于把整张图片当成一张地图，划分很多个区域)
-
map的子元素：area
圆形circle：（x1,y1,r）圆心坐标
矩形：rect（x1,y1,x2,y2）左上角坐标，右上角坐标
多边形：poly每一个顶点的坐标
衡量坐标时为了避免衡量工具：ps,pxcook
和figure元素连用
指代：定义，通常用语把图片、图片标题、描述包裹起来
子元素：figurecaption
多媒体元素
video 视频
controls 控制控件的显示,取值只能为controls
某些属性，只有两种状态：1.不写 2.取值为属性名，这种属性叫做布尔属性
布尔属性在HTML5中，可以不用书写属性值
-
autoplay：布尔属性，表示自动播放
-
muted :布尔属性，静音播放
-
loop：布尔属性 循环播放
audio 音频
和视频完全一致
兼容器
-
旧版本的浏览器不支持这两个元素
-
不同的浏览器支持的音视频格式可能不一致
视频：mp4 webm
列表元素
有序列表
-
ol: ordered list
-
li: list item
-
type=1 前面的序号用数字表示（默认）
=i 用小写罗马数字
=I 用大写罗马数字
=a 用小写字母
=A 用大写字母除非列表中序号很重要（比如在法律或者技术文件中需要用），否则请使用CSS list-style-type属性代替 所以尽量不用他
reverse ：布尔属性 倒置
无序列表
把ol改成ul ：unordered list
常用于制作菜单，或新闻列表
定义列表
通常用于一些术语的定义
- dl: definition list
- dt: definition title
- dd：definition description
容器元素（非常重要）
容器元素：该元素代表一片区域 ，内部用于放置其他元素
div元素
没有语义
语义化容器元素
- header ：通常表示页头，也可以用于表示文章的头部
- footer: 通常用于表示页脚或者文章的尾部
- article ：通常用于表示整篇文章
- section ： 通常用于表示文章的章节
- aside : 通常用于表示侧边栏
元素包含关系
以前：块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外
元素的包含关系由元素的内容类别决定。
例如：查看h1元素中是否可以包含p元素 （搜h1 mdn）
- 容器元素中可以包含任何元素
- a元素中几乎可以包含任何元素
- 某些元素有固定的子元素(ul>li ol>li dl>dt,dd)
- 标题元素和段落元素不能相互嵌套，并且不能包含容器元素
nav5元素 HTML5的新元素，容器元素
表示导航
文本框和按钮
<input type="text" >
<button>百度一下</button>
调整格式：Alt+shift+F
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
