一、互联网原理
互联网原理：上网即请求数据。
过程：在本机计算机浏览器上输入网址，发送一个http请求到服务器端，服务器会根据协议作出响应，将对应的网页文件通过http协议再传输给我们本地计算机，将网页在浏览器上进行渲染。
1、服务器
服务器：server，就是计算机。也有处理器、内存、操作系统等等。
功能：用来存储数据。处理数据量大、速度快。
上传更改文件：服务器可以通过个人电脑远程控制，需要一些管理软件，FTP。
服务器为了保证任何时间都能让用户访问到，要求24小时不能关机的。
2、浏览器
浏览器：browser。上网和接收数据的客户端。
作用：发送http请求，接收数据，渲染网页。
浏览器由很多的厂商来进行维护和运营，浏览器有不同的品牌和版本。
全球五大浏览器：IE、谷歌（chrome）、火狐（Firefox）、苹果（Safari）、欧朋（opera）。
问题：根据版本不同、品牌不同，同一个网页渲染效果可能不同。IE低版本浏览器没有全部被淘汰，制作网页的过程中，需要针对低版本浏览器写特殊的代码，兼容性书写。
浏览器接收到的数据并不会存在软件上面，而是存在c盘的一个临时文件夹，路径可以通过浏览器找到。
路径：C:\Users\teacher\AppData\Local\Microsoft\Windows\Temporary Internet Files。
文件存储之后，在浏览器上讲所有数据渲染出来，看到的页面。
现象：第二次打开一个网页，比第一次打开速度要快。因为第一次浏览的时候已经将部分文件下载到了本地临时文件夹。
3、http协议
http：hypertext transfer protocol，超文本传输协议。
http协议包括请求和响应。
请求：request，通过浏览器输入网址、或者点击超级链接，都会向服务器发起http请求。http协议包括多个请求。
响应：response，服务器接收到请求之后，响应这个请求，将对应的文件再通过http协议回传给用户。
访问页面时，会同时发出多个http请求，包含网页的图片、视频、音频等文件。
二、html基础概念
1、纯文本
纯文本：只有文字内容，不包含其他样式、格式等内容。
最简单的例子：记事本文件中的文字。
中文：一个汉字占2个字节。
文件大小由文字内容决定，不包含一些辅助的样式类的大小。
对比.txt和.doc这两种文件。
.txt文件：纯文本文件，大小只包含文本内容的大小，不包含样式。
.doc文件：非纯文本文件，不止包含文字内容，还包括样式。
纯文本文件：内部只能书写普通文字，不能插入图片等其他元素，保存时只保存文本，不保存样式。
html、css、js、Java等一些语言都是纯文本文件。
纯文本文件都能够用任意的纯文本编辑器进行编辑。比如记事本。
2、html
html：hypertext markup language，超文本标记语言。
html文件是纯文本文件，内部只能有文字。
超文本：用文本表示文字、图片、音频、视频、链接、程序等等其他内容。
标记语言：通过标记来给我们的文本添加语义的语言。
如果没有标记，网页显示样式：
有标记，表示添加了对应的语义，给我们的页面区分了结构，网页会有一个默认的显示样式：
作用：html标签的作用仅仅是添加相应的语义，不会添加样式，样式是有css来控制。
例如：h1标签的作用是什么？
错误：让文字加粗加大，独占一行。
正确：给文本添加一级标题的语义。
3、sublime
纯文本文件都能用任意的纯文本编辑器来进行编辑。
编辑器有很多种，所有的纯文本编辑器都能编辑HTML文件。例如记事本、Editplus、notepad++等。
专门制作网页的软件有：
Dreamweaver
Sublime 高效率程序书写工具
Webstorm 高级项目编程工具
sublime：超群的、崇高
书写注意：新建文件之后立即保存成对应的文件格式。
书写要求：所有的标签都必须在英文状态下书写。
快捷键：
html:xt点击tab键/ctrl+E 生成html基本骨架
标签名+tab 生成标签
标签名*n+tab 生成n个标签
h$*n + tab 生成一组标签，从h1到hn。
ctrl+shift+D 复制光标所在行
ctrl+shift+K、ctrl+X 删除光标所在行
ctrl+shift+↑ 光标所在行上移一行
ctrl+shift+↓ 光标所在行下移一行
ctrl+鼠标滚轮滚动 放大缩小文字显示
按住滚轮拖动 选中多个行，一起编辑
三、html结构
1、html基本骨架
|
1 <html> 2 <head> 3 <title>名字</title> 4 </head> 5 <body> 6 网页的主体，用户看到的内容 7 </body> 8 </html> |
html：代表整个网页，根标签。一对双标签。
head：对文件的一些设置。
title：页面的标题，显示在选项卡的名字部分。可以用作收藏夹的名字。
body：网站主体部分，这里的内容才是用户能够见到。
2、DTD
DTD：doctype definition，文档类型定义，文档类型声明。
作用：告诉浏览器，我使用的html规范是哪个版本。
|
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 |
组织：W3C，国际万维网联盟，汇总和制定维护一些语言的规范。
html规范有W3C组织来维护。
版本：html1.0-html5。
html4.0版本之后，正式将样式和结构进行了分离。常用的版本html4.01版本。有一些标签被废弃了，例如font、b、u、i等。
在html4.01基础之上做了一个扩展升级、严格化，演变成了XHTML版本。严格规范了标签名字必须用小写字母，属性值必须用双引号包裹，关闭符号/必须写。
在大的版本基础上，又划分了三个小的版本。
Strict 严格版：不能使用font等废弃标签，不能使用框架集，结构和样式分离。
Transitional 过渡版（通用版）：可以使用font等废弃标签，不能使用框架集
Frameset 框架集版：可以使用框架集
严格程度：XHTML1.0 Strict > HTML4.01 Strict > XHTML1.0 transitionl > HTML4.01 transitionl
学习过程会用到一些废弃标签，使用XHTML1.0 transitional版本。
|
1 html:xt XHTML1.0 transitional 2 html:xs XHTML1.0 strict 3 html:5 |
发展到html5，放弃了三个小规范。
HTML5的DTD进行了极大的简化：<!DOCTYPE html>
3、命名空间
html标签上面有两个属性：
xmlns：xml表示可扩展标记语言，用于我们文件传输。ns是namespace命名空间，规范了我们的页面在传播过程和浏览过程，使用的标签命名的规范。
|
1 xmlns="http://www.w3.org/1999/xhtml" |
标签名字书写时必须使用英文书写：
lang：language语言的缩写。
|
1 xml:lang="en" |
4、字符集
在head标签内部进行设置。
通过一个meta的单标签来进行设置：
|
1 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> |
charset：字符集。
中文字符集包括：
UTF-8：国际通用字库，涵盖了所有人类的语言文字。一个汉字3个字节。
gb2312/gbk：中国字库，国标，涵盖了汉字和一些常用的外文、符号。一个汉字2个字节。所有的简体字，大量的繁体字，一部分特殊符号，平假名等等。
使用情况：
（1）如果网站包含大量的特殊字符、外文、少数民族的语言，或者对网页加载速度没要求，用utf-8。
（2）网页中有大量的中文，而且要求网页加载速度快，使用gbk。
四、html语法特性
1、html对换行、缩进、空格不敏感
标签之间不论有没有换行、缩进、空格，对我们页面不会造成任何影响。
|
1 <p>这是段落1</p> <p>这是段落2</p> <p>这是段落3</p> 2 <p>这是段落4</p> <p>这是段落5</p> 3 <p>这是段落6</p><p>这是段落7</p> 4 <p>这是段落8</p> <p>这是段落9</p> |
格式跟标签的默认样式有关，跟标签之间的嵌套关系有关。
|
1 <div> 2 这是一个盒子<p>你好</p>这是盒子后面 3 </div> |
根据这个语法特性：在书写代码的过程中，尽量做到一个良好的缩进，为了提高代码的可读性。在上传之前为了减小文件体积，将代码压缩。
2、空白折叠现象
普通的文字之间如果有换行、缩进和空格，都会压缩成一个空格再网页中显示。
3、html标签
（1）html标签必须包裹在一对尖括号里。
|
1 <p>文字</p> |
（2）双标签必须同时出现，必须有开始标签，必须有结束标签。否则会影响后面的标签和内容。
|
1 <p>文字 2 phahap |
（3）结束标签中必须写关闭符号/。
|
1 <p>你好<p> 2 <p>你好</p> |
单标记的关闭符写在右尖括号前面。
|
1 <img src="" alt="" /> |
（4）标签级别：容器级和文本级。
容器级标签：内部什么都可以放，容器级标签、文本、图片等等。h1标签就是容器级。
文本级标签：只能放置文字、图片、表单、超链接等文本类内容。p标签是文本级。
4、标签属性
（1）一个标签有多个属性，规定的是我们标签的某一个特性和它的属性值。
|
1 <div style="font-size:14px;">你好</div> |
上面设置的是样式属性，引号内是属性值。
（2）多个属性之间用一个空格隔开。
|
1 <div style="font-size:14px;" class="box">你好</div> |
（3）一个标签上的同一个属性只能写一次，如果有多个属性值，可以都在写引号里，属性值之间用空格隔开。
|
1 <div style="font-size:14px;" class="box" class="demo">你好</div> 2 <div style="font-size:14px;" class="box demo">你好</div> |
（4）键值对：表示属性和属性值的一个书写语法。
键：key。代表属性名。
值：value。代表属性值。
html的标签属性的键值对写法：k=”v”。中间没有任何空格。
v的双引号必须写。
五、标签
1、h系列
h：headline，标题。
作用：给文本添加标题的语义。
标题一共分为六个等级：h1-h6。
他们之间没有嵌套关系。
|
1 <h1> 2 <h2></h2> 3 </h1> |
正确：
|
1 <h1>一级标题</h1> 2 <h2>二级标题</h2> |
约定俗成的：一个页面内只能有一个h1.为了搜索引擎优化SEO。一般会将h1给logo。
除了h1之外，其他的没有数量限制。
h系列标签都是容器级标签。但是不能放比他级别低的标题标签。
2、p标签
p：paragraph，段落。
作用：给文本添加段落的语义。
文本级标签：文字、图片、表单等类似文本的元素，还可以放一些废弃的标签。
一个段落需要一对p标签。
|
1 <p>2011年六一儿童节前夕，在结束了“思源工程情系大别山”公益晚会后，王宝强来到北京某小学，参加了学校的迎“六一”庆祝活动。[57] </p> 2 <p>2008年，王宝强任邢台市政协委员。</p> 3 <p> 4 <img src="data:images/cat.jpg" alt="" /> 5 这是一只猫 6 <input type="button" value="按钮"/> 7 </p> |
3、img标签
img：image，图片的缩写。
作用：表示插入一张图片。相当于一个特殊的文字。
可插入图片的类型：jpg、png、gif。
重点：img的属性。
属性：
src source，资源，统一资源定位器
width 表示图片的宽度；
height 表示图片的高度；
border 边框属性；它的值可以设置边框的厚度；
title 设置提示文本；悬停文本；
alt 设置图像没有找到时候的替换文本；
宽高属性：如果只设置其中一个，另外一个会等比例缩放。两个都设置，按照实际值来进行渲染。可以写单位，也可以不写单位。
|
1 <img src="data:images/cat3.jpg" width="600" height="600" alt="" /> |
src的属性值是图片的加载路径。
路径：相对路径和绝对路径。
（1）相对路径
从html文件本身出发去查找图片文件的路径。
同级查找：在文件同一级文件夹内就有图片，路径直接写文件名.扩展名。
|
1 <img src="cat3.jpg" alt="" /> |
下级查找：图片在下一级文件夹之内，路径 文件夹/文件夹/……/文件名.扩展名.
|
1 <img src="data:images/cat/cat2.jpg" alt="" /> |
|
上级查找：图片在上级文件夹中，跳出一级代码../,跳出几次写几个../。 <img src="../../cat.jpg" alt="" /> |
综合写法：先跳出文件夹到上级，在找到文件夹进入内部查找文件。
|
1 <img src="../images/cat.jpg" alt="" /> |
错误写法：../只能出现在开头不能出现在中间。
|
1 <img src="../anli/../anli/cat3.jpg" alt="" /> |
注意：不能跨盘符查找。
（2）绝对路径
从盘符出发查找图片，或者网址形式。
注意：从盘符出发的路径不能有中文命名的文件夹或者文件名。
|
1 <img src="C:/Users/teacher/Documents/cat3.jpg" alt="" /> |
从盘符出发的绝对路径是不会用的。
网址形式的绝对路径是可以使用的。前提：图片必须传到网上了。
|
1 <img src="http://www.iqianduan.cn/images/cat.jpg" /> |
title属性和Alt属性：
Alt：在文件加载错误时候，才能显示的文本，如果没有错误，不加载。
|
1 <img src="data:images/cat2.jpg" width="600" height="600" title="这是一只猫" alt="图片是一堆猫" /> |