学习资料：
尚硅谷前端HTML5视频_HTML & CSS 核心基础教程（103集实战教学，从入门到精通）
1 HTML 基础
HTML的英文全称是 Hypertext Marked Language，即超文本标记语言。
超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。
浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。
但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。
2 网页标准格式
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
标签
表明说明网页的特定部分，包括成对标签和自结束标签。成对标签必须成对存在，语法为<标签名><标签名/>；自结束标签是指单独使用的标签，语法为<标签名/>
<!DOCTYPE html>
HTML文件开头必须声明网页的编写标准，<!DOCTYPE html>是html5的标准
根标签
<html></html>，网页的所有内容都要写到这里面
子标签
位于<html></html>里的标签
<head></head>
包含网页的字符集、关键字、简介、标题栏等内容，其内容不显示在网页中
<title></title>
写网页的标题栏的内容，就是当鼠标移入网页标签时所弹出的内容，或是你收藏网页时的默认名称。
<body></body>
网页中所有要显示的内容要写在这里面
属性
可以通属性设置标签里的内容，相当于设置函数的参数
只能在开始标签里设置属性
一个标签可用多个标签
元素
将一个完整的标签称为元素，通常用元素来代替标签
3 乱码问题
编码
依据一定的规则，将普通字符转换为二进制格式的过程
解码
依据一定的规则，将二进制格式转换为普通字符的过程
字符集
编码和解码过程中所采用的规则，可以理解为密码本，我们称之为字符集
乱码产生的原因
编码与解码这两个过程采用的是不同的字符集，即转义和破译过程采用的是不同的密码本，破译的结果自然就会乱码了。
常见的字符集
- ASCII、ISO-8859-1：欧美
- GBK、GB2312：中文
- UTF-8：万国码，支持所有语言，当含有中文字体时必须要用。
- 中文系统地浏览器默认使用GB2312进行解码
设置字符集
前面说过，设置字符集要在<head></head>标签里面设置：
<head>
<meta charset="utf-8">
</head>
charset即指字符集
4 语法规范
- 不区分大小写，但一般使用小写
- 注释不能嵌套
- 标签必须完整，要么成对出现，要么自结束
- 标签可以嵌套，但不可以交叉
- 标签中的属性必须必须有值，且值必须被引号包含。
5 常用标签
标题
<h1>内容</h1>：一级标题
<h2>内容</h2>：二级标题
...
<h6>内容</h6>：六级标题
h1、h2、h3经常使用，后面的几乎不用，h1重要性仅次于title，会影响到网页在搜索引擎中的排名，一个页面只能写一个h1。
段落
<p>内容</p>，其包含内容自占一断，且有段间距。
无论字符间有多少空格和回车符，浏览器也只会当成一个空格
换行
<br/>，属于自结束标签
图片
<img src="" alt="" width="" height="">，自结束标签
src：图片的文件路径
alt：对图片进行描述，当鼠标移入时显示，在图片不能显示时显示
width/height：宽度和高度，只设置一个时，另一个则等比例变化
超链接
<a href="" target="">link_name</a>
href：指向要跳转的链接，相对路径或完整的地址
target：链接打开的位置
- _self：当前窗口
- _blank：新窗口
注释
``
<meta />
自结束标签，书写在<head></head>内部，具有设置关键字、描述信息、作者、请求重定向等作用。
<!-- 关键字 -->
<meta name="keywords" content="" />
<!-- 描述信息 -->
<meta name="description" content="" />
<!-- 作者 -->
<meta name="author" content="Your Name">
<!-- 请求重定向 -->
<meta http-equiv="refresh" content="秒数:URL" />
content表示对应的内容，http-equiv对应的content的值是要重定向的等待时间和要跳转的链接。
内联框架
<iframe src="" name="" width="" height=""></iframe>
用于引入一个外部页面，显示在本页面的一个框架里。
字体样式
| 样式 | 语法 |
|---|---|
| 居中 | <center></center> |
| 加粗 | <b></b> |
| 斜体 | <i></i> |
| 删除线 | <del></del> |
| 参考 | <cite></cite> |
| 短引用 | <q></q> |
| 长引用 | <block></block> |
| 行代码 | <code></code> |
| 块代码 | <pre></pre> |
| 上标 | <sup></sup> |
| 下标 | <sub></sub> |
| 插入/下划线 | <ins></ins> |
| 小字 | <small></small> |
| 大字 | <big></big> |
6 <span></span>
span标签专门用来选中文字，设置样式。
通过设置属性class、title的值来进行分类，以方便统一设置样式。也可通过设置属性style直接进行设置。
7 <div></div>
div标签独占一行，本身没有任何意义，就是一个纯粹的块元素，不会为它里面的元素设置任何默认样式。
div标签主要用于对页面进行布局。
8 内联元素
行内元素，指只占内身大小的元素，不会占一行，一行容不下时会自动换行
a img iframe span标签都属于内联元素
9 块元素
独占一行的元素
p h1 h2、...都属于块元素
10 列表
- 有序列表
<li></li>
- 无序列表
<ul></ul>
网友评论