一、互联网的原理
1.1 概述
html：就是用来制作网页。
互联网原理：上网即请求数据。
用户通过在浏览器上输入一个网址，通过HTTP协议向服务器发送请求，服务器做出响应，将相关的网页数据传输到本地计算机，在浏览器上渲染出来。
数据：文字、图片、视频、音频等。
1.2 服务器
服务器：sever
作用：存放我们的数据。
服务器必须24小时在线，掉线了数据访问不到，就不能正常访问网页。
可以通过个人的计算机里面的一些软件（ftp）来远程控制服务器。
1.3 浏览器
浏览器：browser。
作用：HTTP请求的发起、接收，都是由浏览器来完成的。
浏览器有很多厂商提供，全球五大浏览器：
IE、谷歌（Chrome）、火狐（Firefox）、苹果（Safari）、欧朋（Opera）。
从服务器接收的数据会存放在一个临时的文件夹。接收我们缓存的数据。
临时文件夹作用：第二次访问同一个网站速度会变快，因为第一次浏览的时候，大部分文件已经缓存的本地。
1.4 http
HTTP：Hypertext Transfer Protocol，超文本传输协议。
HTTP协议包含了请求和响应两个部分。都是要依赖浏览器。
HTTP请求发送的方法：直接输入网址，点击超级链接。
请求：request，浏览器根据网址向对应的服务器发送请求。
响应：response，服务器根据请求响应文件，将页面传输给客户端，在浏览器中进行网页的渲染。
访问页面时，会同时发出多个http请求，包含网页的图片、视频、音频等文件。
二、纯文本和html
2.1 纯文本
扩展名.txt。
最简单的纯文本就是记事本文件/文本文档。
word文档和纯文本的区别：
word文档：扩展名.doc。可以保存文档的格式，文件的大小要远远大于纯文本文件的大小。它的文件大小不但是文字内容的大小还包括文件的格式。
纯文本文件：.txt。不可以保存文档的格式。虽然可以设置文档的格式，但是不能保存，只是便于本机查看。文件大小就是内容大小。
2.2 html
html,css,js都是纯文本文件。
html文件的扩展名是.html
可以直接用最简单记事本进行编辑。
html就是用来制作网页的。
html:超文本标记语言。HyperText Markup Language。
html是用文本来标记文本。用的这个文本叫做超文本。
1 <h1>我是标题</h1>
2 <p>我是段落</p>
语言有语义，可能是标题可能是段落。计算机不认识我们语言，所以我们用超文本标记。超文本不会渲染在页面上。
html只负责语义，不负责样式。
1 <meta charset="utf-8">
2 <style type="text/css">
3 p {
4 color: red;
5 font-size: 30px;
6 }
7 </style>
小测试：h1标签他的用作？
h1标签只负责标题的语义。文字加粗，字号变大，不是h1控制的，是css控制的。
三、html基础
3.1 html骨架
1 <html>
2 <head>
3 <!-- ctrl + /不会显示在浏览器中
4 作用：配置html文件
5 -->
6 </head>
7 <body>
8 <!-- 书写标签组成的网页结构 -->
9 </body>
10 </html>
head部分是对html进行一些配置信息。
body部分是html的主体部分，现在在网页中的内容。
3.2 DTD
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DTD：文档类型定义。
作用：规定我们书写的html 使用的是哪一种规范。
html的语言规范是w3c组织规定。
中文网址：http://www.w3school.com.cn/
html1-html5版本。
html4版本进行了样式和结构的分离。html4是XHTML1.0版本的升级。XHTML1.0版本要求：标签名必须用小写字母。属性名必须用双引号包裹。结束标签必须有关闭符号。
以上两个版本还有3个小规范：
strict: 严格版，该规范要求不能使用废弃标签font，b,i, u等，不能使用框架集。
transitional：通用版,可以使用废弃标签，但是不能使用框架集。
frameset: 框架集版，能够使用框架集。
html:xt 表示：xhtml transitional`
3.3 html标签
1 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
2 </html>
html标签是一对标签，包括开始标签和结束标签。
html标签表示我们整个网页。
html标签有一个属性，xmlns表示命名空间。因为我们网页的样式是给不同用户看，命名空间规定了我们标签的含义。
lang：是language的简写，表示语言。en:表示编码是英文。
3.4 head标签
head标签也双标签。
作用：对html文件进行配置。
1 <head>
2 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
3 <title>Document</title>
4 </head>
字符集设置：
charset=UTF-8;
字符集设置是配置我们书写的html使用的字符集。
中文字库：
UTF-8：表示国际标准字库，包含了所有国家的语言，一个汉字占3个字节。
GBK/gb2312：中文字库。包含了所有的中文简体，大部分繁体字，片假名，符号等。一个汉字占2个字节。
书写网页时使用哪种字符集：看情况而定。
如果书写的是外文网站，使用UTF-8。
如果网站中有大量中文，同时要求加载速度更快，使用GBK。
注意：我们设置的字符集要和软件保存的类型一值。
5 <title>Document</title>
还可以设置网页标题：设置网页标题可以提高搜索引擎优化（SEO）。因为爬虫在搜索时，会着重网页标题。
3.5 body标签
body标签内部是html标签书写的网页结构。
四、html语法
4.1 标签之间对空格，缩进，换行不敏感，对嵌套关系敏感
4.2 标签文本内容有空白折叠现象
1 <!-- 文本内容之间有空白折叠现象 文本内容之间有多个空白，缩进，换行在浏览器中渲染时只会显示一个空格的现象 -->
4.3 标签语法
标签名必须用一对尖括号包裹。
1 <li>3</li>
标签一般是成对出现的，由开始标签和结束标签组成。单标签除外
1 <div>
2 <!-- 插入图片 -->
3 <img src="images/01.jpg" alt="" width="300px" />
4 </div>
结束标签要书写关闭符号/。
5 <div>
6 <!-- 插入图片 -->
7 <img src="images/01.jpg" alt="" width="300px" />
1 </div>
标签分类：
容器级标签：例如h、div、li、dt、dd容器级标签内部可以书写任何内容（文本级标签，容器级标签）
文本级标签：例如p、a、b、span、em、u、li文本级标签内部只能书写文本类内容，比如文本，图片，表单元素，废弃标签等，文本级标签内部不能书写容器级标签。
1 <!-- 错误代码 p标签内部不能书写容器级标签 -->
2 <p>
3 <h1>我是标题</h1>
4 </p>
4.4 标签属性
键值对：
属性名key(k)
属性值value(v)
k=”v”
一个标签可以书写多个属性值，用空格隔开。
五、标签
5.1 h系列标签
h(headline)系列的标签：
h1,h2,h3,h4,h5,h6
分别表示一级到六级标题
作用：给文本添加标题语义。
1 <h1>一级标题</h1>
2 <h2>二级标题</h2>
3 <h3>三级标题</h3>
4 <h4>四级标题</h4>
5 <h5>五级标题</h5>
6 <h6>六级标题</h6>
h1-h6都是容器级标签，字体越来越小。
h系列标签之间不能互相嵌套。
1 <!-- 错误代码 h系列标签不能互相嵌套-->
2 <h3>
3 <h4>四级标题</h4>
4 </h3>
约定俗成：h1标签权重最大，我们一般将h1渲染logo，提高搜索引擎优化。一个网页只能出现一个h1标签，如果书写多个h1标签，浏览器会认为h1自动降级。
5.2 p标签
p:paragragh(段落标签)
作用：给文本添加段落语义
p标签是文本级标签：内部只能书写文本类的内容，文本，图片，表单元素，废弃标签
1 <p>废弃标签<i>我是i标签</i></p>
5.3 img
img:插入图片（单标签）
1 <img src="" alt="" />
src: 路径，属性值书写插入图片所在的位置。
alt: 图片加载失败提示文本
1 <img src="images/01.png" alt="图片加载失败，请刷新" />
width: 图片宽度，单位是px，可以省略
height: 图片高度，单位是px，可以省略
在设置图片，只书写一个width/height，会锁定宽高比值，但是如果要求网页加载速度，我们需要同时设置宽和高度。
5.4 路径
相对路径和绝对路径
相对路径：从html文件出发进行目标文件（插入图片）查找。
同级查找：直接目标名称
1 <img src="girl.jpg" alt="" width="200" />
子级查找：每一层之间用/隔开，/表示下一层
3 <!-- 子级查找 当前html插入cat.jpg html和images同级 /可以有多层-->
4 <p>
5 <img src="images/cat.jpg" alt="" />
6 </p>
上级查找../表示上一级，跳出当前文件夹（../只能书写在路径的开头）./表示当前文件夹，../../表示上上级，以此类推
8 <img src="../images/01.jpg" alt="" height="300" />
绝对路径：从盘符出发进行查找
1： 可以从地址栏进行复制
<img src="C:\Users\Administrator\Desktop\2018年8月16日html第一天\案例\document\photo\girl.jpg" alt="" />
2：可以将图片拖到浏览器地址栏
2 <img src="file:///C:/Users/Administrator/Desktop/2018%E5%B9%B48%E6%9C%8816%E6%97%A5html%E7%AC%AC%E4%B8%80%E5%A4%A9/%E6%A1%88%E4%BE%8B/images/01.jpg" alt="" />
3： http开头绝对地址
3 https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1174413874,1602217949&fm=173&app=25&f=JPEG?w=218&h=146&s=1002D1134A5451EF92F5E5F8030040A1
注意：相对路径不能跨盘符查找。
5.5 超级链接标签
a(anchor)：锚点
1 <a href="https://www.baidu.com">百度</a>
href: 属性值书写的是要跳转页面的路径（相对路径，绝对路径）
target: 属性值设置新页面打开方式
默认值：在当前窗口打开
_self:在当前窗口打开
_blank: 在新窗口打开
title: 悬停提示文本
1 <a href="https://www.baidu.com" target="_blank" title="百度一下">百度</a>
任何标签都可以书写id属性，属性值是唯一性。
页面内锚点跳转：
属性值：#id属性名
1 <p>
2 <a href="">人物介绍</a>
3 <a href="#tiaozhuan1">早年经历</a>
4 <a href="#tiaozhuan2">演艺经历</a>
5 </p>
6 <h3 id="tiaozhuan1">早年经历</h3>
跨页面锚点跳转：
属性值：文件名#id属性名
1 <p>
2 <a href="12_页面内锚点跳转.html" target="_blank">人物介绍</a>
3 <a href="12_页面内锚点跳转.html#tiaozhuan1" target="_blank">早年经历</a>
4 <a href="12_页面内锚点跳转.html#tiaozhuan2">演艺经历</a>
5 </p>
5.6 div和span
div: 大盒子（将一些相同的内容或者是相似的内容书写在div中表示一个大整体）
语义：大区域，大范围
div: 是容器级标签 ，独占一行
1 <div>
2 <h3>CSDN</h3>
3 <div>
4 </div>
span: 小范围（文字）
span:文本级标签，多个span并排显示，不会独占一行
1<span>CSDN</span>
372
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
