1、HTML注释
Vscode插件,快速生成HTML页面,操作,!+ tab键
HTML注释:
<!-- 注释内容 -->
2、元素属性
其他说法:标签
元素 = 起始标记(begin tag) + 结束标记(end tag) + 元素内容 + 元素属性
属性 = 属性名 + 属性值
属性分类:
- 局部属性:某些元素特有的属性
- 全局属性:所有元素通用
## 元素的嵌套
元素不能相互嵌套
父元素、子元素、祖先元素、后代元素、兄弟元素(拥有同一个父元素的两个元素)
3、文本元素
## h
标题:head
h1~h6:表示1级标题~6级标题
## p
段落,paragraphs
> lorem,乱数假文,没有任何实际含义的文字
## span【无语义】
没有语义,仅用于设置样式
## pre
预格式化文本元素
空白折叠:在源代码中的连续空白字符(空格、换行、制表),在页面显示时,会被折叠为一个空格
例外:在pre元素中的内容不会出现空白折叠
在pre元素内部出现的内容,会按照源代码格式显示到页面上。
该元素通常用于在网页中显示一些代码。
pre元素功能的本质:它有一个默认的css属性
> 显示代码时,通常外面套code元素,code表示代码区域。
4、HTML实体
# HTML实体
实体字符, HTML Entity
实体字符通常用于在页面中显示一些特殊符号。
1. &单词;
2. &#数字;
- 小于符号
<
- 大于符号
>
- 空格符号
- 版权符号
©
- &符号
&
5、a元素
# a元素
超链接
## href属性
hyper reference:通常表示跳转地址
1. 普通链接
2. 锚链接
id属性:全局属性,表示元素在文档中的唯一编号
3. 功能链接
点击后,触发某个功能
- 执行JS代码,javascript:
- 发送邮件,mailto:
要求用户计算机上安装有邮件发送软件:exchange
- 拨号,tel:
要求用户计算机上安装有拨号软件,或使用的是移动端访问
## target属性
表示跳转窗口位置。
target的取值:
- _self:在当前页面窗口中打开,默认值
- _blank: 在新窗口中打开
6、img元素
# 图片元素
## img元素
image缩写,空元素
src属性:source
alt属性:当图片资源失效时,将使用该属性的文字替代图片
## 和a元素联用
## 和map元素
map:地图
map的子元素:area
衡量坐标时,为了避免衡量误差,需要使用专业的衡量工具:
ps、pxcook、cutpro(本人开发)
## 和figure元素
指代、定义,通常用于把图片、图片标题、描述包裹起来
子元素:figcaption
7、多媒体元素
# 多媒体元素
video 视频
audio 音频
## video
controls: 控制控件的显示,取值只能为controls
某些属性,只有两种状态:1. 不写 2. 取值为属性名,这种属性叫做布尔属性
布尔属性,在HTML5中,可以不用书写属性值
autoplay: 布尔属性,自动播放。
muted: 布尔属性,静音播放。
loop: 布尔属性,循环播放
## audio
和视频完全一致
## 兼容性
1. 旧版本的浏览器不支持这两个元素
2. 不同的浏览器支持的音视频格式可能不一致
mp4、webm
8、列表元素
# 列表元素
## 有序列表
ol: ordered list
li:list item
## 无序列表
把ol改成ul
ul:unordered list
无序列表常用于制作菜单 或 新闻列表。
## 定义列表
通常用于一些术语的定义
dl: definition list
dt: definition title
dd: definition description
9、容器元素
# 容器元素
容器元素:该元素代表一个块区域,内部用于放置其他元素
## div元素
没有语义
## 语义化容器元素
header: 通常用于表示页头,也可以用于表示文章的头部
footer: 通常用于表示页脚,也可以用于表示文章的尾部
article: 通常用于表示整篇文章
section: 通常用于表示文章的章节
aside: 通常用于表示侧边栏
10、容器元素
# 容器元素
容器元素:该元素代表一个块区域,内部用于放置其他元素
## div元素
没有语义
## 语义化容器元素
header: 通常用于表示页头,也可以用于表示文章的头部
footer: 通常用于表示页脚,也可以用于表示文章的尾部
article: 通常用于表示整篇文章
section: 通常用于表示文章的章节
aside: 通常用于表示侧边栏
11、元素包含
# 元素包含关系
以前:块级元素可以包含行级元素,行级元素不可以包含块级元素,a元素除外
元素的包含关系由元素的内容类别决定。
例如,查看h1元素中是否可以包含p元素
总结:
1. 容器元素中可以包含任何元素
2. a元素中几乎可以包含任何元素
3. 某些元素有固定的子元素(ul>li,ol>li,dl>dt+dd)
4. 标题元素和段落元素不能相互嵌套,并且不能包含容器元素
12、路径
# 路径的写法
## 站内资源和站外资源
站内资源:当前网站的资源
站外资源:非当前网站的资源
## 绝对路径和相对路径
站外资源:绝对路径
站内资源:相对路径
1. 绝对路径
绝对路径的书写格式:
url地址:
```
协议名://主机名:端口号/路径
schema://host:port/path
```
当跳转目标和当前页面的协议相同时,可以省略协议
2. 相对路径
以./开头,./表示当前资源所在的目录
可以书写../表示返回上一级目录
相对路径中:./可以省略