写出HTML标准页面结构,2020-10-14学习笔记（网页组成——HTML属性规范）

网页组成

前端三层

HTML(搭建一个项目的结构) CSS(给没有任何装饰的结构添加样式) JavaScript(让这个项目可以动起来，有行为，与用户有交流)

网页的组成还有其他多媒体内容：图片，视频，音频，超链接

互联网运行过程

程序员可以将网页源文件上传到服务器进行存储，用户后期可以通过客户端(例如Firefox，Chrome等浏览器软件)发送HTTP请求到服务器，服务器接收请求后进行响应，把存储的网页源文件通过响应(HTTP)传回用户的本地客户端，最后通过客户端将网页文件进行渲染，显示出最终用户看到的样子。

互联网运行原理

服务器(server)

1.特殊的计算机，也包括了处理器，硬盘，内存，系统总线等，因为要提供可靠的服务，在处理能力，稳定性，可靠性，安全性上面有较高的要求

2.对于web来说，服务器的作用，用于存储开发人员上传的网页数据，需要响应服务请求，进行处理

3.对于网站服务器来说，为了用户能够随时访问，必须24小时不间断工作

云服务器(ECS)

针对于服务器的特殊要求，云服务器应运而生，ECS是一种简单高效、安全可靠、处理能力可弹性伸缩的计算服务。用户不需要提前购买硬件，就可以快速的创建或者释放多台云服务器。

客户端(Client)

也叫做用户端，常用的就是浏览器，app，而web开发最主要的客户端形式还是浏览器

浏览器(Browser)

用户上网搜索，查看信息资源的应用程序

功能就是用户发送HTTP请求，接收服务器发回的HTTP响应，渲染到HTML网页。

市面上的主流浏览器：IE，Firefox，Safari，Chrome，opera

主流浏览器

使用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：

标题

，

文本

，

等等

语义化网页和它的优势：

HTML文件中利用标记给普通的文字添加不同的语义，能够让网站的结构划分更加清晰

eg：

文章内容导航栏

1.方便代码的阅读和后期维护

2.便于浏览器或者是网络爬虫更好地解析网站内容

3.使用语义化标签有利于SEO搜索引擎优化，提高网站的搜索排名(提高点击量)

HTML基本语法

HTML规范版本

W3C，万维网联盟，发布与维护互联网的规范和标准

万维网发布的版本

从HTML4.0开始变得规范化，HTML4.01修复了HTML4的部分bug，XHTML变得严格了起来，没有新的东西。

HTML标签

HTML tag，遵循的语法：

1.标签名必须书写在一对尖括号<>内

2.标签分为单标签和双标签，双标签不可省略，要成对出现

3.双标签包含开始和结束标签，结束时要写关闭符号/，单标签也要自封闭书写，HTML5中单标签也可以不写关闭符号

HTML元素

指的是从开始标签到结束标签的所有内容，包括开始标签，元素内容，结束标签。

eg：双标签内不包含的纯文本内容，就是元素内容

文本段落

元素也可以包括其他标签的内容，这种我们称之为嵌套

一个HTML元素div的内容可能是多个其他元素组成的，比如p，h1，img等等，我们称div是p和h1，img的父级元素，相反，div，h1，img就是div的子级元素，p，h1，img就是同级元素，也称之为兄弟级关系，嵌套是可以多层的

eg：

标题1

div内部的文本段落

单标签是不能添加元素内容的，可以称之为空元素。

标签级别

容器级：内部可以存放任意内容，包含容器级标签，比如h1，div等等

文本级：内部只可以存放文字或者类似文字的内容，比如存放图片，表单元素，比如p等等。

HTML元素的特性

1.元素间对空格、换行、缩进等形成的空白不敏感，有无空白对在浏览器中加载的效果没有影响。浏览器识别的是元素的开始和结束以及相互之间的嵌套关系。

eg：加了缩进后与上面的不加缩进的代码展示效果是一样的。可以美化代码，方便查看代码

标题1

div内部的文本段落

2.空白折叠现象：元素内容如果是文本，所有文字(类似文字内容)之间如果有空格、换行、缩进等空白字符，在浏览器中加载时，连接在一起的空白会折叠成一个空格显示，这就是空白折叠现象。

eg：

这是一个段落，元素之间对空 格、换

行、缩 进形容的空白会出现空格折叠现象。

显示的结果是这样的：

代码块

Chrome运行效果

HTML属性

HTML属性规范

1.书写位置：必须写在开始标签或者单标签之内，与标签名之间用空格进行分隔

2.属性包括了：属性名(key)、属性值(value)。属性名与属性值之间的写法通常称作键值对写法，HTML标签属性的键值对写法是k=" v"。XHTML要求属性值必须在双引号内部。

3.一个标签内可以设置多个不同的属性，属性与属性之间使用空格进行分隔，每个属性的键值对写法都是k="v"

4.部分标签属性k可以设置多个属性值v，所有属性值v都必须写在同一对双引号内，值与值之间需要使用空格分隔。

eg：

段落1

段落2

段落3

段落4