当前位置: 主页 > 网站建设 > 前端 – HTML

前端 – HTML

时间:2021-11-06 来源:未知网络 作者:996建站网

HTML

HTML的全称叫:Hypertext Markup Language,超文本标记语言,是网页的文件格式。页的格式,还有PHP、JSP、ASP等等,那么HTML是最最基本的网页文件格式。

一:网页的认知

1)网页主要由文字、图像和超链接等元素构成;
2)除了这些元素,网页中还可以包含音频、视频等流媒体

用户眼中的网页:

前端 – HTML插图

用户眼中的网页

程序员眼中的网页:

前端 – HTML插图

程序员眼中的网页

综上所述:
• HTML就是用来制作网页文件的
• 浏览器查看的网页都是.html或.htm文件
• HTML叫做超文本标记语言(Hypertext Markup Language),用于搭建网页的结构

网页的组成(一):
前端三层:HTML(结构层)、css(样式层)、JavaScript(行为层)

网页的组成(二):
• 其他多媒体内容:图片、视频、音频、超级链接等。
• 所有的网页文件都是真实的、物理存在的文件。

互联网运行过程
程序员将网页源文件上传到服务器进行存储,用户后期通过客户端(如浏览器软件)发送HTTP请求到服务器,服务器接收请求后进行响应,将存储的相关文件通过HTTP响应回传到用户本地客户端, 最终通过客户端将网页文件进行渲染,显示出最终用户看到的网页效果。

前端 – HTML插图

互联网运行过程

服务器

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

前端 – HTML插图1

服务器

云服务器
目前绝大多数网站都采用的是云服务器(Elastic Compute Service, ECS),云服务器是一种简单高效、安全可靠、处理能力可弹性伸缩的计算服务。其管理方式比物理服务器更简单高效。用户无需提前购买硬件,即可迅速创建或释放任意多台云服务器。

前端 – HTML插图1

云服务器

客户端
• 客户端(Client)也叫用户端,指的是普通用户使用的终端,客户端有多种形式,
比如最常用的就是浏览器、app等,而web开发最主要的客户端形式还是浏览器。
• 浏览器(Browser),是一种用户上网搜索、查看信息资源的应用程序。
• 功能:用于发送HTTP请求到服务器,接收服务器返回的HTTP响应,渲染HTML网页。
主流浏览器
HTTP请求的发起、接收,都是由浏览器来完成的。
• 主流的Web页面浏览器有:微软的IE和Microsoft Edge、Mozilla的Firefox、
苹果公司的Safari、 Google的Chrome及Opera软件公司的Opera。

前端 – HTML插图1

主流浏览器

主流浏览器内核
• 因为不同浏览器使用内核及所支持的HTML等网页语言标准不同,对网页的渲染效果会有差异。

前端 – HTML插图2

主流浏览器内核

推荐:使用Chrome浏览器。(渲染效果好、市场占有率高、自带开发者调试工具)

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

HTTP协议
HTTP的全称叫:Hypertext Transfer Protocol:超文本传输协议。是客户端浏览器或其他程序与WEB服务器之间的应用层通信协议。

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

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

二:HTML概念

纯文本格式
• 纯文本格式,就是没有任何文本修饰的,没有任何粗体,下划线, 斜体,图形,符号或特殊字符及特殊打印格式的文本,只保存文本,不保存其格式设置。

格式对比 纯文本格式
• 最常见的是.txt文件。在存储和传输过程中,只能保存文字,不能保存格式。

富文本格式
• 与纯文本对应,最常见的是.rtf文件,类似.doc文件,内部可以保存文本的样式、图片等。

格式对比
纯文本格式文件小,更易于传输
1.doc和1.txt中, 都是只有“哈哈”两个字。但是doc文件,尺寸很大;而txt文件,尺寸只有4字节。
这是因为.txt文件是纯文本文件,里面只有文字,没有其他的任何东西,没有样式、没有字号、没有颜色。而.doc文件,里面存放着页边距、行高、颜色、字号、字体这些信息。

前端 – HTML插图2

超文本和富文本对比

效果展示
• 添加标记后的网页

前端 – HTML插图2

纯文本文件特点
1. 文件只能保存文本,不保存其他的格式或非文本内容,有利于网络传输。
2. 所有的纯文本格式文件,可以通过直接更改扩展名的方式更改保存格式。
3. 纯文本格式文件可以使用任意的纯文本编辑器进行查看和编辑。

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

HTML的功能
利用标记给普通的文本添加语义、描述超文本内容,搭建网页的基本结构。

HTML的语义化
HTML文件中,如果没有使用特殊语义的标记,也可以实现网页显示效果,但是利用标记给普通的文字添加了不同的语义,能够让网站的结构划分更加清晰。

前端 – HTML插图3

语义化网页的优势
1. 方便代码的阅读和后期维护
2. 便于浏览器或是网络爬虫更好地解析网站内容
3. 使用语义化标签有利于SEO搜索引擎优化,提高网站的搜索排名

HTML不过如此,就是通过一对儿一对儿的标签,来给文本增加语义的语言。

           <P>  叫做起始标签
           </P> 叫做结束标签

前端 – HTML插图4

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序