本文详细介绍了HTML的基本概念，包括注释、元素、属性、嵌套、元素种类、书写结构等，并探讨了超链接、图片、多媒体、列表、容器元素的使用，以及HTML实体和编码规范。同时，分享了一些编写HTML的小技巧，如快捷输入和代码格式化。
网页的制作）
第一个网页
注释
注释：为阅读提供帮助，不参与运行
格式如下：
<!--注释内容--> 添加/取消注释
<!-- -->
元素
元素的组成部分
起始标记（begin tag）
结束标记（end tag）
元素内容
元素属性
元素属性的分类
局部属性：某些元素特有的属性
全局属性：所有元素都具有
<html lang="en">
<html lang="cmn-hans">
lang属性：language，全局属性，表示该元素内部使用的文字是使用哪一种自然语言书写而成的。
有些元素没有结束标记，这种元素叫做空元素
空元素的两种写法：
<meta charset="UTF-8">
<meta charset="UTF-8"/>
元素的嵌套
元素不能相互嵌套
元素种类
父元素、子元素、祖先元素、后代元素、兄弟元素（拥有同一个父亲）
标准的书写结构
HTML
HTML：页面、HTML文档
根元素，一个页面最多只能一个，并且该元素是所有其他元素的父元素或先祖元素
<!DOCTYPE html>
文档声明，告诉浏览器，当前文档使用的HTML标准是HTML5
不写文档声明，将导致浏览器进入怪异渲染模式
head
文档头，文档头内部的内容，不会显示在网页上
<head>
</head>
可用在head内的标签
meta
文档元数据：附加信息
charset：指定网页内部编码
计算机中，低压电（02V）0，高压电（25V）1，表示2，使用10
文字和数字进行对应
字符编码表：GBK，GB2312
UTF-8是Unicode
title（网页标题）
<title>document</title>
body
<body>
</body>
lorem
乱数假文
p*6>lorem
span
没有语义，近用于设置样式
某些元素在显示时会独占一行（块级元素），某些元素不会（行级元素）
到了HTML已经弃用
<body>
三原色包括：<span style="color: red;">红、</span><samp style="color: green;">绿、</samp><span style="color: blue;">蓝</span>
</body>
pre
预格式或文本元素
空白折叠：在源代码中的连续空白字符（空格、换行、制表tab生成的缩进）在空白页面显示是，会被折叠为一个空格
例外：在pre元素中的内容不会出现空白折叠
在pre元素内部出现的内容，会按照源代码格式显示到页面上
该元素通常用于在网页中显示一些代码
<body>
<pre>
var i=2;
if(i){
console.log(i);
}
</pre>
</body>
在浏览器上显示如下：
若是p元素下：
<body>
<p>
var i=2;
if(i){
console.log(i);
}
</p>
</body>
浏览器里显示如下：
在浏览器查看下添加white-space:pre代码空格可以正常显示：
显示该代码时，通常外面套code元素，code表示代码区域
<body>
<code>
<pre>
var i=2;
if(i){
console.log(i);
}
</pre>
</code>
</body>
或者可以不要<pre></pre>元素：
<body>
<code style="white-space: pre;">
var i=2;
if(i){
console.log(i);
}
</code>
</body>
在浏览器上显示如下：
HTML实体
相关网站链接：https://developer.mozilla.org/en-US/docs/Glossary/Entity
实体字符，HTML Entity
相关内容的网站
通常用于在页面中显示一些特殊符号。
书写方式如下：
1.&单词；
2.&#数字；
常见的实体字符：
1）小于符号
<
2）大于符号
>
3）空格
4）版权符号
©
5）&符号
&
a 元素
超链接
<a href="">
href属性
hyper reference(引用):表示跳转地址
1.[普通链接]跳转地址
2.[锚链接]跳转某个锚点
本质上二者地址都会发生变化，但锚点跳转的是当前页面，页面不会因为锚点刷新
3.[功能链接]
点击后触发某个功能
1）执行JS代码，javascript
2)发送邮件，mailto： 要求用户计算机上安装有邮件发送软件：enchange
3）拨号，tel: 要求用户计算机上安装有拨号软件，或使用的移动端访问
“+”表示兄弟
target属性
表示跳转窗口位置
target的取值
-_self:当前页面窗口中打开，默认值
-_blank:在新窗口中打开
路径的写法
站内资源和站外资源
站内资源：当前网站的资源
站外资源：非当前网站的资源
绝对路径和相对路径
站外资源：绝对路径
站内资源：相对路径
绝对路径
绝对路径的书写格式：
url地址：
协议名://主机名:端口号/路径
schema://host:port/path
协议名：http、https、file
主机名：域名、IP地址
端口号：如果协议是http协议，默认端口号啊80；如果协议是htpps协议，默认端口号为443
当跳转目标和当前页面的协议相同时，可以省略协议
相对路径
以./开头，./表示当前资源所在的目录
可以书写../表示返回上一级目录
相对路径中：./可以省略
图片元素
img元素
image缩写，空元素
src属性：source
alt属性：当图片资源失效时，将使用该属性的文字替代图片
和a元素连用
和map元素
map：地图
map的子元素：area
shape:
circle
rect
poly(多边形):依次描写每个点
衡量坐标是，为了避免衡量误差，需要使用专业的衡量工具 例如：ps、pxcook
和figure元素
指代、定义，通常用于把图片、图片标题、描述包裹起来
子元素：figcaption
多媒体元素
video 视频
audio 音频
video
controls:控制控件的显示
某些属性，只有两种状态：
1.不写
2.取值为属性名，这种属性叫做布尔属性
布尔属性，在HTML5 中，可以不用书写属性值
autoplay：布尔属性，自动播放
muted：布尔属性，静音播放。
loop：布尔属性，循环播放
audio
和视频一样
兼容性
1、旧版本的浏览器不支持这两个元素
2、不同的浏览器支持的音视频格式可能不一样
mp4、webm
列表元素
有序列表
ol：ordered list
type属性
reversed属性（倒序）
li：list item
无序列表
把ol改成ul
ul：unordered list
无序列表常用于制作菜单 或 新闻列表
定义列表
通常用于一些术语的定义
dl：definition list
dt：definition title
dd：definition description
容器元素
容器元素：该元素代表一个块区域，内部用于放置其他元素
div划分区域
没有语义
语义化容器元素
header：通常用于表示页头，也可以用于表示文章的头部
footer：通常用于表示页脚，也可以用于表示文章的尾部
article：通常用于表示整个文章
section：通常用于表示文章的章节
aside：通常用于表示侧边栏
元素的包含关系
以前：块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外
元素的包含关系由元素的内容类别决定。
总结：
1.容器元素中可以包含任何元素
2.a元素中几乎可以包含任何元素
3.某些元素有固定的子元素（ul>li,ol>li,dl>dt+dd）
4.标题元素和段落元素不能相互嵌套，并且不能包含容器元素
code编写HTML小技巧
- ctrl+s 保存
- Ctrl+Z返回上一步
- Ctrl+/召唤：
html <!-- --> - 按住鼠标滚轮可以框线修改
- alt+shift+下键，复制选中结果
- 一种快速的输入格式
(h2>{章节2})+p>lorem +tab键
10万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
