网页组成
前端三层
- HTML（搭建一个项目的结构） CSS（给没有任何装饰的结构添加样式） JavaScript（让这个项目可以动起来，有行为，与用户有交流）
- 网页的组成还有其他多媒体内容：图片，视频，音频，超链接
互联网运行过程
程序员可以将网页源文件上传到服务器进行存储，用户后期可以通过客户端（例如Firefox，Chrome等浏览器软件）发送HTTP请求到服务器，服务器接收请求后进行响应，把存储的网页源文件通过响应（HTTP）传回用户的本地客户端，最后通过客户端将网页文件进行渲染，显示出最终用户看到的样子。
互联网运行原理
服务器（server）
1.特殊的计算机，也包括了处理器，硬盘，内存，系统总线等，因为要提供可靠的服务，在处理能力，稳定性，可靠性，安全性上面有较高的要求
2.对于web来说，服务器的作用，用于存储开发人员上传的网页数据，需要响应服务请求，进行处理
3.对于网站服务器来说，为了用户能够随时访问，必须24小时不间断工作
云服务器（ECS）
针对于服务器的特殊要求，云服务器应运而生，ECS是一种简单高效、安全可靠、处理能力可弹性伸缩的计算服务。用户不需要提前购买硬件，就可以快速的创建或者释放多台云服务器。
客户端（Client）
也叫做用户端，常用的就是浏览器，app，而web开发最主要的客户端形式还是浏览器
浏览器（Browser）
用户上网搜索，查看信息资源的应用程序
功能就是用户发送HTTP请求，接收服务器发回的HTTP响应，渲染到HTML网页。
主流浏览器
使用Chrome浏览器会得到更好的学习效果（渲染效果好，市场占有率很高，F12开发者调试工具）
HTTP协议
超文本传输协议，是客户端浏览器或其他程序与web服务器之间的应用层通信协议
HTTP请求
1.request，浏览器根据网址向对应的服务器发送请求
2.发起请求的方法：在浏览器地址栏输入网址或者点击网址链接
3.HTML页面解析过程中，会发出多个http请求，包括了网页的图片，视频，音频等文件请求
HTTP响应
响应：response，服务器根据请求响应一个HTML文件，将HTML传输到客户端，在浏览器中进行HTML网页的渲染。
HTML概念
纯文本格式
没有任何的文本修饰的，没有粗体，下划线，图形，斜体，符号或者特殊打印格式的文本，只保存文本，不保存格式设置。最常见的纯文本格式文件就是.txt文件。
特点：
1.文本只能保存文本，不保存其他的格式或非文本内容，有利于网络传输
2.所有的纯文本格式文件，可以通过直接更改拓展名的方式保存格式
3.纯文本格式文件可以使用任意的纯文本编辑器进行查看和编辑
富文本格式
与纯文本格式相对应的就是富文本格式，最常见的是.rtf文件，类似于.doc文件，内部可以文本的样式，图片等等。
HTML，JS，CSS都是纯文本格式文件
HTML
Hypertext Markup Language：超文本标记语言，是一种制作网页的标记语言，也是一种纯文本格式文件。但是他能呈现的效果包含了文字以外的内容，所以这就是HTML和其他文件的不同之处。给普通的文本添加语义，描述超文本内容，搭建网页的基本结构。
超文本
链接另一个文本或者多媒体内容的文本，比如图片链接音频视频程序等等。
标记
有特殊的书写规范，写给浏览器的一种语法格式。eg：
<h1>标题</h1>，<p>文本</p>，<img src="路径" alt="" />
等等
语义化网页和它的优势：
HTML文件中利用标记给普通的文字添加不同的语义，能够让网站的结构划分更加清晰
eg：
<article>文章内容</article> <nav>导航栏</nav>
1.方便代码的阅读和后期维护
2.便于浏览器或者是网络爬虫更好地解析网站内容
3.使用语义化标签有利于SEO搜索引擎优化，提高网站的搜索排名（提高点击量）
HTML基本语法
HTML规范版本
W3C，万维网联盟，发布与维护互联网的规范和标准
万维网发布的版本
从HTML4.0开始变得规范化，HTML4.01修复了HTML4的部分bug，XHTML变得严格了起来，没有新的东西。
HTML标签
HTML tag，遵循的语法：
1.标签名必须书写在一对尖括号<>内
<html></html>
2.标签分为单标签和双标签，双标签不可省略，要成对出现
<p></p>
<br />
3.双标签包含开始和结束标签，结束时要写关闭符号/，单标签也要自封闭书写，HTML5中单标签也可以不写关闭符号
HTML元素
指的是从开始标签到结束标签的所有内容，包括开始标签，元素内容，结束标签。
eg：双标签内不包含的纯文本内容，就是元素内容
<p>文本段落</p>
元素也可以包括其他标签的内容，这种我们称之为嵌套
一个HTML元素div的内容可能是多个其他元素组成的，比如p，h1，img等等，我们称div是p和h1，img的父级元素，相反，div，h1，img就是div的子级元素，p，h1，img就是同级元素，也称之为兄弟级关系，嵌套是可以多层的
eg：
<div><h1>标题1</h1><p>div内部的文本段落</p><img src=" " /></div>
单标签是不能添加元素内容的，可以称之为空元素。
标签级别
容器级：内部可以存放任意内容，包含容器级标签，比如h1，div等等
文本级：内部只可以存放文字或者类似文字的内容，比如存放图片，表单元素，比如p等等。
HTML元素的特性
1.元素间对空格、换行、缩进等形成的空白不敏感，有无空白对在浏览器中加载的效果没有影响。浏览器识别的是元素的开始和结束以及相互之间的嵌套关系。
eg：加了缩进后与上面的不加缩进的代码展示效果是一样的。可以美化代码，方便查看代码
<div>
<h1>标题1</h1>
<p>div内部的文本段落</p>
<img src=" " />
</div>
2.空白折叠现象：元素内容如果是文本，所有文字（类似文字内容）之间如果有空格、换行、缩进等空白字符，在浏览器中加载时，连接在一起的空白会折叠成一个空格显示，这就是空白折叠现象。
eg：
<p>这是一个段落，元素之间对空 格、换
行、缩 进形容的空白会出现空格折叠现象。</p>
显示的结果是这样的：
代码块
Chrome运行效果
HTML属性
HTML属性规范
1.书写位置：必须写在开始标签或者单标签之内，与标签名之间用空格进行分隔
2.属性包括了：属性名（key）、属性值（value）。属性名与属性值之间的写法通常称作键值对写法，HTML标签属性的键值对写法是k=" v"。XHTML要求属性值必须在双引号内部。
<p k="v"></p>
3.一个标签内可以设置多个不同的属性，属性与属性之间使用空格进行分隔，每个属性的键值对写法都是k="v"
<p k="v" k="v" k="v" k="v"></p>
4.部分标签属性k可以设置多个属性值v，所有属性值v都必须写在同一对双引号内，值与值之间需要使用空格分隔。
<p k="v1 v2 v3 v4"></p>
eg：
<p class="p1" id="pFrist">段落1</p>
<p class="p1 p2 p3 p4">段落2</p>
<p>段落3</p>
<p>段落4</p>
网友评论