前端开发----HTML1

前端开发之HTML

1、HTML概述

• HTML叫做超文本标记语言，用于搭建网页的结构
• HTML就是用来制作网页文件
• 浏览器查看的页面都是.htm或.html为后缀名的文件

1、网页组成

• 前端三层：HTML（结构层）、CSS（样式层）、JavaScript（行为层）
• 其他多媒体内容：图片、视频、音频、超链接等
• 所有的网页文件都是真实的、物理存在的文件

2、互联网运行过程

开发人员将网页源文件等上传到服务器进行存储，用户后期通过客户端（如浏览器软件）发送HTTP请求指定到服务器，服务器接收请求后进行响应，将存储的相关文件通过HTTP响应回传到用户本地客户端，最终通过客户端将网页文件进行渲染，显示出最终用户看到的网页效果。

3、常见名词

1、服务器

1、说明：服务器（server），就是一种特殊的计算机，也包括处理器、硬盘、内存、系统总线等，但是由于需要提供更可靠的服务，因此在处理能力、稳定性、可靠性、安全性等方面要求较高。
2、作用：对于WEB来讲，用于存储开发人员上传的网页数据，且需要响应服务请求，并进行处理。
3、要求：对于网站服务器来说，为了让用户随时进行访问，必须24小时不间断工作。

2、云服务器

说明：云服务器是一种简单高效、安全可靠、处理能力可弹性伸缩的计算服务。其管理方式比物理服务器更简单高效。用户无需提前购买硬件，即可迅速创建或释放任意多台云服务器。

3、客户端

说明：客户端（Client）也叫用户端，指的是普通用户使用的终端，客户端有多种形式，比如最常用的就是浏览器、app等，而web开发最主要的客户端形式还是浏览器。

4、浏览器

1、说明：浏览器(Browser)，是一种用户上网搜索、查看信息资源的应用程序。
2、功能：用于发送HTTP请求到服务器，接收服务器发回的HTTP响应，渲染HTML网页。
3、主流浏览器：微软的IE和Microsoft Edge、Mozilla的Firefox、苹果公司的Safari、Google的Chrome及Opera软件公司的Opera

5、主流浏览器内核

说明：因为不同浏览器所使用的内核及支持的HTML等网页语言标准不同，对网页的渲染效果会有所差异

推荐使用Chrome浏览器（渲染效果好、市场占有率高、同时自带开发者调试工具）

6、浏览器功能

• 作用1：发送HTTP请求，发送方式是在浏览器地址栏中输入相对应网址，或者点击超链接
• 作用2：接受服务器发回的HTTP响应，服务器会发回一个HTML给浏览器
• 作用3：将接收到的HTML进行解析并显示

4、HTTP协议

说明：HTTP协议，也成为超文本传输协议，是客户端浏览器或其他程序与web服务器之间的应用层通信协议。
1）HTTP请求

• request，浏览器根据网址向对应的服务器发送请求
• 发器请求方法：在浏览器地址栏中输入网址，或点击网址链接
• HTML页面解析过程中，会发出多个http请求，包括网页的图片、视频、音频等文件请求

2）HTTP响应

• 响应，response，服务器根据请求响应一个HTML文件，将HTML传出给客户端，在浏览器中进行HTML网页渲染

2、HTML概念

1、纯文本格式

1、说明：纯文本格式，就是没有任何文本修饰，没有任何粗体，下划线，斜体，图形，符号或特殊字符以及特殊打印格式的文本，只保存文本，不保存其他格式设置
2、格式对比

• 纯文本格式：最常见为.txt文件，在存储和传输过程中，只能保存文字，不能保存格式
• 富文本格式：最常见的为.rtf文件，类似.doc文件，内部可保存文本的样式、图片等
• 纯文本格式文件小，更易于传输，所有纯文本格式文件都可通过直接更改扩展名的凡是更改保存格式，且可使用任意的纯文本编辑器进行查看和编辑

html、css、js文件都是纯文本格式文件

2、HTML

说明：超文本标记语言，是用来制作网页的一种标记语言；HTML是一种纯文本格式的文件，内部只能书写文字内容，不能添加图片、音频、视频等，但日常网页中用户所看到的却包含了文字以外的内容，这种效果就是HTML语言区别于其他文件的不同之处

1、HTML重要概念

1、超文本
说明：超级文本的缩写，就是用于链接另一个文本或多媒体内容的文本，比如链接到图片、链接、音频、视频、程序等
2、标记
说明：也称为标签，有特殊的书写规范，是写给浏览器的一种语法格式，结合普通的文字信息，实现特殊的语义或显示内容，在编辑器中可以编辑和查看，但在浏览器中不显示

2、HTML功能

利用标签给普通的文本添加语义、描述超文本内容，搭建网页的基本结构

3、HTML语义化

1、说明：HTML文件中，如果没有使用特殊语义的标记，也可实现网页显示效果，但利用标签给普通文字添加不同语义，能够让网页或网站的结构划分更加清晰
2、语义化网页优势

• 方便代码阅读与后期维护
• 便于浏览器或爬虫更好地解析网页或网站内容
• 通过使用语义化标签有利于SEO搜索引擎优化，从而提高搜索排名

4、HTML基本语法

1）HTML规范版本

说明：W3C，万维网联盟，专门发布和维护互联网的规范和标准

2）HTML标签

• HTML标记通常被称为HTML标签，而标签在书写过程中，必须遵循特定语法
• 语法1：标签名必须书写在一对尖括号<>内（< html >< /html >）
• 语法2：标签分为单标签和双标签，双标签必须成对出现（< p >< /p >）
• 语法3：双标签包含开始标签和结束标签，结束标签必须书写关闭符号/，单标签也需要进行自封闭书写，不过在HTML5中，单标签可以不写关闭符号（< div >< /div >、< br / >）

常用标签
1、双标签
1）加粗标签：b strong
2）倾斜标签：i em
3）下划线标签：u
4）字体标签：font
5）角标标签：下角标标签 sub 上角标标签 sup
6）删除线：s del
7）段落标签：p
8）div标签
9）span标签
10）列表标签：ol、li、ul
11）文本标题标签：h1-h6
12）超链接标签：a
13）表格标签：table等
14）表单标签：form
2、单标签
1）换行标签：br
2）水平线标签：hr
3）图片标签：img
4）输入标签：input
5）传递参数标签：param
6）HTML 标记 HEAD 区的一个关键标签：meta
7）链接外部标签：link

3）HTML元素

1、说明：HTML元素指从开始标签到结束标签的所有内容，包含开始标签、元素内容、结束标签
2、元素内容

• 元素内容可以是纯文本，也可以是其他HTML元素；这种元素内容包含其他HTML元素的情况，称为嵌套
• 一个HTML元素div的内容可能是多个其他元素组成
• 单标签不能添加元素内容，称为空元素

3、标签级别

• 标签根据内部可存放的元素内容不同，可将双标签划分为两个级别
  – 容器级：标签内部可存放任意内容，包含容器级标签
  – 文本级：标签内部只能存放文字或类似文字的内容，比如存放图片、表单元素等

4、HTML元素特性

• 元素间对空格、换行、缩进等形成的空白不敏感，有无空白对在浏览器中加载的效果并没有影响；浏览器识别的是元素的开始和结束以及互相之间的嵌套关系
• 空白折叠现象：元素内容如果是文本，所有文字或类文字内容之间如果有空格、换行、缩进等空白字符，在浏览器中加载时，连接在一起的空白会折叠成一个空格显示，这就是空白折叠现象

4）HTML属性

1、书名：HTML标签可添加属性，属性可以提供关于HTML元素的更多信息
2、HTML属性规范

• 书写位置：必须写在开始标签或单标签内，与标签名之间用空格进行分隔
• 属性包含：属性名、属性值；属性名与属性值之间的写法通常被称为键值对写法，HTML标签属性的键值对写法为k=“v”；XHTML要求属性必须写在双引号内部
• 一个标签内科设置多个不同属性，属性与属性之间使用空格进行分隔，每个属性的键值对写法都是k=“v”
• 部分标签属性k可设置多个属性值v，因此属性值v必须写在同一对双引号内，值与值之间需要使用空格分隔

5、HTML基本结构

1）基本骨架

说明：HTML文件最基本的四个标签，组成了网页的基本骨架，包含：html、head、title、body这四组标签

• html标签：用来定义HTML文件的根元素，表示整个HTML文档，所有的标签要书写在html标签内部
• head标签：用于存放title、meta、base、style、script、link；内部用于对网页的设置，除了title内部的文字，其他标签都不显示在浏览器上（注意：head标签中必须设置title标签）
• title标签：让页面有一个属于自己的标题，title中的关键字可作为搜索引擎抓取时的关键字，提高SEO搜索引擎优化；内部的内筒会显示在搜索记过的标题部分；作为浏览器收藏夹默认的网页标题
• body标签：定义网页的主体部分，用于存放所有HTML显示内容的标签p、h1、a、div等等；body内部的元素内容会显示在浏览器的窗口中

2）DTD

1、说明：完整的HTML文件的第一行内容叫做文档定义类型，简称DTD，也称为文档声明类型
2、作用：告知浏览器该网页使用的是哪个版本的HTML规范，让浏览器按照对应版本的HTML语法进行解析页面

3）命名空间

• html元素表示整个网页文档，在开始标签上设置了命名空间xmlns属性
• xml：可扩展标记语言，使用在传输过程中的规范，被设计用来传输和存储数据，是html的补充
• xmlns：全称叫做XML NameSpace，NameSpace叫做命名空间，浏览器会将此命名空间用于该属性所在元素内的所有内容

4）字符集

• head标签内部meta标签通过http-equiv属性定义了当前网页所使用的的字符编码
• char：character，字符；set：集合

常用字符集编码
国际通用字库
• UTF-8：以字节为单位对Unicode万国码进行编码，涵盖了所有人类的语言文字，一个汉字为3个字节大小
中文国标字库
• gb2312：共收入汉字6763个和包括拉丁字母、希腊字母、日文平假名及片假名字母、俄语西里尔字母在内的682个
• gbk：是gb2312的扩展，增加了繁体字，共收入 21886 个汉字和图形符号，其中汉字（包括部首和构件）21003 个，图形符号 883 个，一个汉字为2个字节大小

– 字符集使用情况建议

• 如果没用网页加载速度要求，或者制作外文网站，使用utf-8
• 如果含有大量中文汉字网站，而且要求网页加载速度快，使用gbk
• 注意：meta标签声明的字库，必须和编辑器软件默认编译字库相同，否则会因为两个字库不匹配而使浏览器加载时出现乱码