HTML(一)

最新推荐文章于 2024-03-13 15:42:34 发布
最新推荐文章于 2024-03-13 15:42:34 发布
阅读量283 收藏
点赞数
分类专栏： codewhy前端学习笔记 文章标签： 前端 服务器 运维
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gxh0816/article/details/128862476
版权
文章详细阐述了网页从用户输入网址到浏览器展示的过程，包括服务器的角色、网页的三大组成部分（HTML、CSS和JavaScript）以及浏览器如何解析和渲染页面。此外，还介绍了HTML的基本结构和元素，如标题、段落和图片标签，强调了文档声明、元数据和SEO优化的重要性。
摘要由CSDN通过智能技术生成

一.网页显示过程-用户角度

1.用户在浏览器输入一个网站

2.浏览器会找到对应的服务器地址,请求静态资源(可以存放在世界上任何一个地方)

3.服务器返回静态资源给浏览器

4.浏览器对静态资源进行解析和展示

二.网页显示过程-前端工程师

1.开发项目

2.打包,部署项目到服务器里面

三.服务器是什么?

我们日常生活接触到都是客户端,前端的东西.比如qq音乐

我们知道自己的手机并不可能存放那些多的数据和资源:

比如你用<网易云听音乐>,音乐数据大部分都是存在"服务器"中的.

那么服务器到底是什么呢?

服务器本质上也是一台类似于你电脑一样的主机;

但是这个主机有几个特点:

1.二十四小时不关机的(稳定运行);

2.没有显示器的

3.一般装的是Linux操作系统(比如centos)

四.网页的三大组成部分

1.HTML:网页的内容结构(比如人最基本的骨架)

2.CSS网页的视觉体验,为了好看(比如穿了好看的衣服)

3.网页的交互处理,可以点击等等(比如滑雪)

五.浏览器的作用

浏览器的渲染引擎

浏览器最核心的部分是渲染引擎,一般也称为浏览器内核

复杂解析网页语法,并渲染(显示)网页

常见的浏览器内核:Webkit,Blink

六.HTML语言和基本结构

超文本标记语言

HTML超文本标记语言,是一种用于常见网页的标记语言

七.什么是标记语言?

由无数个标记(标签,tag)组成

是对某些内容进行特殊的标记,以供其他解释器识别处理

比如使用<h2></h2>标记的文本会被识别为"标题"进行加粗文字放大显示

由标签和内容组成的部分称为元素

八.什么是超文本呢?

不仅仅可以插入普通的文本(Text),还可以插入图片,音频,视频

还可以表示超链接,从一个网页跳转到另一个网页

九.什么是元素?

例如div,span等等

十.文档声明

HTML最上方的一段文本我们称之为文档类型声明,用于声明文档类型

<!DOCTYPE html>

HTML文档声明,告诉浏览器当前页面是HTML5页面

让浏览器用HTML5的标准去解析识别内容

必须放在HTML文档的最前面,不能忽略.省略了会出现兼容性问题

html元素

<html>元素表示一个HTML文档的根(顶级元素),所以它也被称为根元素

所有其他元素必须是此元素的后代

<html lang="zh-CN">

W3C标准建议为html元素增加一个lang属性,作用是

帮助语音合成工具确定要使用的发音

帮助翻译工具确定要使用的翻译规则

比如常用的规则:

lang="en"表示这个HTML文档的语言是英文

lang="zh-CN"表示这个HTML文档的语言是中文

十一.head元素

HTML head元素规定文档相关的配置信息(也称之为元数据),包括文档的标题,引用的文档样式和脚本等.

什么是元数据,是描述数据的数据;

这里我们可以理解成对整个页面的配置

 

 <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">//IE适配
  <meta name="viewport" content="width=device-width, initial-scale=1.0">//viewport视口

常见的设置有哪些呢?一般会至少包含如下2个设置

网页的标题:title元素

  <title>网页的标题</title>

网页的编码:meta元素

可以用于设置网页的字符编码,让浏览器更精准地显示每一个文字,不设置或者设置错误会导致乱码

一般都使用utf-8编码,涵盖了世界上几乎所有的文字

 <meta charset="UTF-8">

常用的元素:

p元素,h元素

img元素,a元素,iframe元素

div元素,span元素

下阶段学习的元素

ul,ol,li元素

button元素,input元素

table,thead,tbody,th,tr,td

十二.常见元素-h元素

在一个页面中通常会有一些比较重要的文字作为标题,这个时候我们可以使用h元素

h元素自带很多css样式,比如字体,加粗,上下边距

<h1>-<h6>标题(Heading)元素呈现了六个不同的级别的标题

Heading是头部的意思,通常会用来做标题

<h1>级别最高,而<h6>级别最低

注意:h标签通常和SEO优化有关系 (什么是SEO,后续)

十三.常见元素P元素

如果我们想表示一个段落,这个时候就可以使用p元素

HTML<p>元素(或者说HTML段落元素)表示文本的一个段落

p元素是pargraph单词的缩写,是段落,分段的意思

p元素多个段落之间会有一定的间距

十四.常见元素-img元素

img是一个可替换元素

<img src="图片路径" alt="">

alt 属性,不是强制性的,有两个作用

1.当图片加载不成功(错误的地址或者图片资源不存在)那么会显示这段文本;

2.屏幕阅读器会将这些描述读给需要使用阅读器的使用者者,让他们知道图形的含义

相对路径是后面会用户使用时,路径会自动指向服务器打包的路径

爱前端的小周同学
关注
专栏目录
使用 HTML、CSS 和 JavaScript 定制私人版的刮刮乐【一看就会】
孤寒者的博客
08-24 20万+
刮刮乐想必大家都玩过，小时候兜里一有钱，就喊上小伙伴兴冲冲的跑去家旁边的小卖部，用那稚嫩地小手递给老板那被捏的皱巴巴的五毛钱，满眼期待的刮着买来的刮刮乐，心里早已想好中了100块钱大钞要去买好多好多辣条、卡片、陀螺、奥迪双钻的悠悠球… 认认真真看完本文，你就可以用你女朋友的美照实现一个独属于你的刮刮乐哦！（当然如果你没有女朋友的话，也可以用你珍藏多年的美女图片哦！） ⛳️使用HTML、CSS和JavaS实现刮刮卡/刮刮乐♥️别着急，先看演示????使用HTML、CSS和JavaS实现刮刮乐????第①步：
你真的熟练运用 HTML5 了吗，这10 个酷炫的 H5 特性你会几个？
热门推荐
努力是为了站在万人之中，成为别人的光
07-05 26万+
HTML5不是什么新鲜事。自初始版本（2008 年 1 月）以来，我们一直在使用它的几个功能。我再次仔细查看了 HTML5 功能列表。看看我发现了什么？到目前为止，我还没有真正使用过很多！ 在本文中，我列出了 10 个这样的HTML5功能，这些功能过去我用得不多，但现在发现它们很有用。我还创建了一个工作示例流程并托管在Netlify. 希望你也觉得它有用。让我们开始了解有关它们中的每一个的解释、代码和快速提示。 https://wanghao221.github.io/html-tips-tricks/
关于浏览器展现页面的过程学习总结
qq_38831245的博客
11-24 594
本文大致讲述了网页由网址到展现页面的过程，浏览器如何渲染HTML以及相关的一些问题与优化思路
浏览器页面呈现过程
WindrunnerMax
04-24 1546
浏览器页面呈现过程 从输入链接到浏览器呈现页面的过程中，浏览器所经历的过程。 DNS解析 首先浏览器将输入的链接进行DNS解析，也就是将域名转换为IP地址的过程，得到了服务器具体的IP地址，才可以进行TCP链接以及数据的传输。 具体DNS解析的过程，浏览器首先检查自身的DNS缓存是否对于此域名有IP地址，chrome对于域名解析的缓存时间为60s，可以通过地址栏输入chrome://net-int...
面试题：从输入网址到页面显示的全过程（超详细解析）
最新发布
kkq的博客
03-13 1907
为了解决进程到进程的问题，发送的信息要借助 TCP 的力量了，TCP 的报文中封装了源端口号和目的端口号，通过这两个字段就可以保证找到需要传递信息的应用。因为需要 TCP 发送的内容可能很长，TCP 会将其分成一段一段的去发送，就需要一个序号来标识此时发送的是哪份内容；同样的，当对方收到报文后也要告诉发送方 我收到了哪个字段，这就是确认号。TCP 没有请求和响应报文，所以需要一个标识位来标识这次的报文是什么内容，例如SYN是发起一个连接，ACK是回复，RST是重新连接，FIN是结束连接等。然后就是。
HTML文件的执行过程
weixin_42039812的博客
05-25 1354
HTML的全称是Hyper Text Marked Language,翻译成中文就是超文本标记语言，是B/S架构中客户端和服务器端交互的一种语言，HTML文件是有客服端来解析并执行，执行的过程如下： 1，解析HTML文件的第一句，用于确定该文档的文档类型，即本文件使用的HTML版本。 2，开始在客户端绘制图层，中间如果遇到外部链接，客户端会另外开一个线程进行下载外部文件，下载完成后客户端自动更新图层。 3，如果遇到外部CSS文件，客户端会在文件下载完成后立即应用样式 4，如果遇到外部JS文件，客..
从输入一个网址到浏览器显示页面经历的全过程
weixin_45300669的博客
07-20 5111
作为网络专栏的开篇导文，本文概况介绍下经典案例从输入一个网址到浏览器显示页面的全过程。
Html(一)
nanci9的博客
12-20 131
Html(一) 1.使用vscode创建第一个html页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale
HTML（一）
mhfaaa的博客
03-22 201
H5 HTML是网页的内容和结构 CSS 是网页的表现形式 JavaScript 是网页的控制 HTML的概念 www万维网 和 互联网Internet http即超文本传输协议，是TCP/IP协议簇中应用层的一种协议，默认端口号为80。底层采用的是TCP连接。采用的是一种断开式连接的方式，目前有http1.0和http1.1两个版本，http1.1允许在一段时间内保持连接 当前互联网上采用的是https，https=http+SSL安全套接层，默认端口号为443 HTML 是超文本标记语言 (Hyper
一套后台管理html模版
08-04
【标题】：“一套后台管理html模版” 这套后台管理HTML模板是专为构建高效、功能丰富的后台管理系统界面设计的。HTML模版是前端开发的基础，它定义了网页的结构和样式，使得开发者能够快速搭建出美观且易于操作的...
HTML中横线的运用方法
m0_67846661的博客
05-18 7875
一、作系列横单线 　　在这个例子中，用到了表格主标题标记<caption>，它的语法如下： <caption align=left|center|right valign=top|bottom> 　　align和valign分别用于设定标题的水平位置和垂直位置。align的默认值是center；valign的默认值是top。利用<caption>标记可以方便地在紧靠边表格的顶部或底部写上文字，且居中，若用其它办法要麻烦得多。另外在本例中能使表格产生单线效果是设置了<
HTML盒模型
QuickRabbit的博客
04-09 4662
盒模型 ​ 什么是盒模型：每一个标签都是一个矩形，像一个盒子，所以HTML页面的布局可以理解为多个盒子组合嵌套排序而成。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wSHciGHI-1649508211222)(C:\Users\Guolan\AppData\Local\Temp\1649504298774.png)] ​ 整个盒模型的组成由上图所示，盒子的内容大小由width宽度和height高度指定，padding设置盒内边距，border设置盒子边框，margin设
HTML介绍及运行原理
wml
04-27 6180
1、 Html是什么： Html 是超文本标记语言，主要用于做网页，可以在网页上显示文字、图像、视频、声音。 HTML的结构包括头部（head）、主体（body）两部分，其中头部描述浏览器所需的信息，而主体部分则包含所要说明的具体内容。   Ø  标记=元素 Ø  Html只能做静态网页，不能做动态网页 Ø  网页分为静态网页（Html）、动态网页（php/jsp/asp/asp.
浏览器显示html过程,浏览器显示页面的流程
weixin_29166013的博客
06-07 1165
简单说步骤如下：1： 浏览器拿到html之后，开始解析html，生成dom tree2： 在dom解析中，遇到js的外链或者script代码，浏览器会停止dom解析，在完成js代码下载执行之后，再继续解析。 遇到css的外链或者css的代码， 浏览器会继续解析dom， 并且会下载css，并行解析css生成cssom tree (dom 和 cssom是并行的)3： dom tree 和 cssom...
关于html中的执行过程
博客已转到w3er.com
12-22 1172
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">html xmlns="http://www.w3.org/1999/xhtml">head>meta http-equiv="Content-Type" c
css设置html所有节点缩放,html – 在画布上使用CSS缩放的最近邻(和img)
weixin_35895994的博客
06-17 193
当使用CSS缩放属性时，如何说服浏览器使用“最近邻”，而不是“双线性”或任何其他更高级的缩放算法？我的设置是一个包含画布的div，并且div通过JavaScript获取其缩放设置为< div style =“zoom：3200％”> …< / div>为了获得最近的邻居，我正在使用图像渲染：-webkit-optimization-contrast在我的CSS中。该应用可用...
html让整体变大,小菜鸟变大笨鸟-实用css样式整体
weixin_29957793的博客
06-15 384
那些不常见，但却非常实用的css属性(整理不易)1、-webkit-line-clamp可以把 块容器 中的内容限制为指定的行数。并且在超过行数后，在最后一行显示"..."这是正常的展示display: -webkit-box; /*值必须为-webkit-box或者-webkit-inline-box*/-webkit-box-orient: vertical; /*值必须为vertical*/...
浅谈一个网页打开的全过程（涉及DNS、CDN、Nginx负载均衡等）
weixin_30270561的博客
05-30 3000
1、概要 　　从用户在浏览器输入域名开始，到web页面加载完毕，这是一个说复杂不复杂，说简单不简单的过程，下文暂且把这个过程称作网页加载过程。下面我将依靠自己的经验，总结一下整个过程。如有错漏，欢迎指正。 　　阅读本文需要读者已有一定的计算机知识，了解TCP、DNS等。 2、分析 　　众所周知，打开一个网页的过程中，浏览器会因页面上的css/js/image等静态资源会多次发起连接请求，所...
输入网址到网页显示的过程是什么？
大董的博客
05-08 10万+
从用户输入一个网址到网页最终展现到用户面前，中间的大致流程总结如下： 1) 在客户端浏览器中输入网址URL。 2) 发送到DNS(域名服务器)获得域名对应的WEB服务器的IP地址。 3) 客户端浏览器与WEB服务器建立TCP(传输控制协议)连接。 4) 客户端浏览器向对应IP地址的WEB服务器发送相应的HTTP或HTTPS请求。 5) WEB服务器响应请求，返回指定的URL数据或错误信息
Ubuntu上一站式HTML5开发指南：从在线到本地应用
Ubuntu作为一个开源且流行的Linux发行版，支持广泛的Web应用开发，包括在线和本地应用。在线应用可以直接利用互联网资源，而本地HTML5应用则借助HTML5和JavaScript技术，可以在设备本地运行并调用在线服务。 2. **...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值