前端-Html

于 2023-03-26 20:35:40 发布
阅读量107 收藏
点赞数
分类专栏： 前端 文章标签： 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47377075/article/details/129784166
版权

概述

软件架构

C/S 架构

基于 客户端-服务器 的软件架构：

  • 一般我们使用的软件都是C/S架构，QQ、360、Office等；
  • C表示客户端（Client），用户通过客户端来使用软件；
  • S表示服务器（Server），服务器负责处理软件的业务逻辑。

特点：

  • 软件使用前必须得安装；
  • 软件更新时，服务器和客户端得同时更新；
  • C/S架构的软件不能跨平台使用；
  • C/S架构的软件客户端和服务器通信采用的是自有协议，相对来说比较安全。

B/S 架构

基于 浏览器 - 服务器 的软件架构：

  • B/S 本质上也是 C/S，只不过 B/S 架构的软件，使用浏览器（Browser**）作为软件的客户端；**
  • B/S 架构的软件通过使用浏览器访问网页的形式，来使用软件；
  • 比如：京东 淘宝 B站 等；

特点：

  • 软件不需要安装，直接使用浏览器访问指定的网址即可；
  • 软件更新时，客户端不需要更新；
  • 软件可以跨平台，只要系统中有浏览器，就可以使用；
  • B/S 架构的软件，客户端和服务器之间通信采用的是通用的HTTP协议，相对来说不安全；

移动应用开发

移动应用开发的方式，目前主要有以下几种：

  • Native APP： 原生应用程序

  • Web APP：WEB应用程序

  • Hybrid APP：混合应用程序

  • 小程序

    • 微信小程序
    • 百度小程序
    • 支付宝小程序
    • …

  • 微网页

    • 微信公共号
    • 百度直达号
    • …

  • …

Native APP

原生 APP 就是利用 Android、iOS 平台官方的开发语言、开发类库、工具进行开发。比如Android的Java语言，iOS 的 Object-C 语言。在应用性能和交互体验上是最好的。

优点：

  • 能访问移动硬件设备的所有功能，比如通讯录，摄像头等功能；
  • 运行速度快，用户体验好；
  • 方便推广，可以在APP商店上架推广。

缺点：

  • 开发和维护成本高，Android、iOS 平台需要分别开发；
  • 上架审核繁琐；
  • 需要手机安装APP。

WEB APP

Web APP 指采用HTML5，CSS，JavaScript 等技术开发的 APP，不需要下载安装。程序运行在智能手机的浏览器中运行（和PC上的WEB应用原理相同）。

优点：

  • 开发成本低，跨平台，一套程序各种移动平台（Android、iOS等）都能运行；
  • 不需要应用商店上架，移动设备安装浏览器有网络就可以使用WEB APP；
  • 手机端不需要下载安装；
  • 软件维护和更新容易，只需要更新服务器程序即可。

缺点：

  • 只能使用有限的移动硬件设备功能,无法使用很多移动硬件设备的独特功能；
  • WEB APP不容易推广（需要借助搜索引擎或让用户记住应用的网址）；
  • 依赖于网络,页面访问速度慢,耗费流量；

Hybrid APP

混合模式移动应用，介于WEB App、Native App 这两者之间的APP开发技术，兼具Native App良好交互体验的优势 和 WEB App跨平台开发的优势 ,原生客户端的壳WebView，其实里面是HTML5的网页.

  • 把网页打包成移动 App；
  • 使你的 Web 程序可以访问手机原生能力；

优点：

  • 开发成本较低,可以跨平台,调试方便；
  • 维护成本低,功能可复用，如果代码合理,只需要一名前端就可以维护多个APP，而且很多功能还可以互相复用；
  • 更新较为自由，虽然没有web app更新那么快速,但是 Hybrid 中也可以通过原生提供api,进行资源主动下载,达到只更新资源文件,不更新apk(ipa)的效果；
  • 功能更加完善,性能和体验要比起web app好太多；
  • 部分性能要求的页面可用原生实现；

缺点：

  • 学习范围较广，需要原生配合；
  • 相比原生,性能仍然有较大损耗，相比原生而言有不少损耗,体验无法和原生相比；
  • 不适用于交互性较强的app，这种模式的主要应用是:一些新闻阅读类,信息展示类的app;但是不适用于一些交互较强或者性能要求较高的app(比如动画较多就不适合)；

网页结构

W3C专门是为了定义网页相关的标准而成立的组织，W3C定义了网页中的HTML、CSS、DOM、 HTTP、XML等标准。

根据W3C标准，一个网页主要由三部分组成：结构、表现、行为。

  • HTML 用于描述网页的结构；
  • CSS 用于控制网页的表现样式；
  • JavaScript 用户响应用户的操作和行为；

一个设计优良的网页要求结构、表现、行为三者分离。

HTML 概述

HTML 是用来描述网页结构的一种超文本标记语言 (Hyper Text Markup Language)。

  • HTML 使用标签的的形式来标识网页中的不同组成部分。

Web浏览器的作用是解析HTML文档，并以网页的形式显示它们。浏览器不会显示HTML标签，而是使用标签来解释页面上的内容。

文档结构

一个 HTML 的基本结构如下：

<!DOCTYPE html>
<html lang="en">
    <head>            
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
          <h1>网页正文</h1> 
          <!-- html 注释 -->
    </body>
</html>

  • 第一行是文档声明,定义了HTML的文档内容。

  • 第二行 标签和最后一行 定义HTML文档的整体。

    • 标签中的 lang=“en” 定义网页的语言为英文；
    • 定义成中文是 lang=“zh-CN”；
    • 不定义也没什么影响，它一般作为分析统计用。
  • 标签和标签是它的第一层子元素。
  • 标签里面负责对网页进行一些设置，设置包括定义网页的编码格式、标题、外链CSS样式文件和 JavaScript 脚本文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏。 定义网页编码格式为UTF-8
  • 内编写网页上显示的内容。

  • HTML文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上。

文档声明

<!DOCTYPE html>

用来标识当前页面的HTML的版本，以上声明用来告诉浏览器，当前的页面是使用HTML5的标准编写的

标签

  • 标签也称为元素；

  • 结构：

    • 成对出现：<标签名>标签内容</标签名>，eg：

      这是一个段落

      ；
    • 自结束标签：<标签名 />，eg：
      换行，
      分割线；

  • 标签不区分大小写，建议使用小写；

  • 大部分标签可以嵌套；

属性

  • 通过属性可以设置标签的效果；

  • 属性需要定义在开始标签中或自结束标签中；

    • <标签名 属性名=“属性值” 属性名=“属性值”></标签名>
    • <标签名 属性名=“属性值” 属性名=“属性值” />

例子：

<h1 title="我是一个标题">标题</h1> 
<a href="https://www.baidu.com">跳转到百度</a>

注释

语法：

语法规则

  • HTML中不区分大小写，但是尽量使用小写

  • HTML的注释不能嵌套

  • 标签必须结构完整

    • 要么成对出现
    • 要么自结束标签

  • 标签可以嵌套但是不能交叉嵌套

常用标签

html

  • 网页的根标签
  • 一个页面中有且只有一个根标签
  • 网页中的所有内容都需要写在 html 标签的内部

head

  • 网页的头部

  • 该标签中的内容不会在网页中直接显示

  • 该标签用于帮助浏览器解析页面

  • 子标签

    • title
      • 用来设置网页的标题
      • 默认会在浏览器的标题栏中显示
      • 搜索引擎检索网页时，会主要检索title中的内容，它会影响到页面在搜索引擎中的排名
    • meta
      • 用来设置网页的元数据，比如网页使用的字符集
        • <meta charset="UTF-8" />
      • 设置网页的关键字
        • <meta name="keywords" content="关键字,关键字,关键字,关键字"/>
      • 设置网页的描述
        • <meta name="description" content="网页的描述"/>

body

  • 网页的主体
  • 网页中所有的可见部分都需要在body中编写

h1 ~ h6

  • 在HTML中一共有六级标题
  • 六级标题中，h1最重要，h6最不重要，一般页面中只会使用h1~h3
  • h1的重要性仅次于title，浏览器也会主要检索h1中的内容，以判断页面的主要内容
  • 一般一个页面中只能写一个h1

p

段落标签，可以将HTML文档分割为若干段落。浏览器会自动在段落前后添加空行。

常用属性：

  • align: 用于设定对齐方式 可选值 left 、right 、center 默认值是 left.

br

换行标签。因为浏览器会自动的忽略空白与换行，因此
标签成为了我们最常用的标签。

hr

标签会生成一条水平线。

常用属性:

  • align：设置水平线对齐方式 可选值 left right center
  • size：设置水平线厚度 以像素为单位。默认为2
  • width：设置水平线长度.可以是绝对值或相对值。默认为100%
  • color：设置水平线颜色.默认为黑色

div

用于在文档中设定一个块区域。

常用属性：align: left center right

span

用于在行内设定一个块区域。

img

图片标签，使用图片标签可以向页面中引入一个外部图片。

常用属性：

  • src：指向一个外部图片的路径，可以使用相对路径或URL

  • alt：

    • 指定一个在图片无法加载时对图片的描述
    • 搜索引擎主要通过该属性来识别图片的内容

  • width：用于设定图片的宽度

  • height：用于设定图片的高度

  • border：图片边框厚度

  • 图片的格式：

    • JPEG：颜色丰富的图片，如，照片
    • GIF：颜色单一，简单透明的图片，动态图
    • PNG：颜色丰富，复杂透明的图片
    • 图片选择的原则：效果一致，用小的，效果不一致，用效果好的

iframe

内联框架标签，向一个页面中引入其他的外部页面。

常用属性：

  • src：外部页面的地址，可以使用相对路径

  • width：框架的宽度

  • height：框架的高度

  • name

    • 可以为内联框架指定一个名字
    • 可以将该属性值设置为超链接的target属性的值
    • 这样当点击超链接时，页面将会在相应的内联框架中打开

内联框架中的内容不会被搜索引擎所检索，所以开发中尽量不要使用内联框架。

a

用于定义超连接，用于从一个页面链接到另一个页面。

常用属性:

  • href：链接跳转的目标地址

    • 可以是一个相对路径或URL地址。
    • 可以是#id属性值，这样当点击超链接以后，将会跳转到当前页面的指定位置。

  • target: 指定在哪个窗口中打开链接。

    • _self：默认值，在当前窗口打开链接
    • _blank：在新窗口中打开链接
    • 内联框架的name属性值：在指定的内联框架中打开链接

列表

有序列表

  • 标签表示的是一个无序列表。

常用属性:

  • type： 规定列表的项目符号类型,可取值 disc, square, circle.默认值为 disc
  • 标签表示的是一个列表项

  • 常用属性:

    • type：用于设定项目符号，默认值为 disc

    无序列表

    1. 表示的是一个有序列表。

    常用属性:

    • type： 这个属性规定列表中使用的标记类型。可取值1 A a I i.
    • start：这个属性规定列表的起始值
  • 标签表示的是一个列表项

  • 常用属性:

    • value：用于设定列表的项目数字

    数值单位

    HTML 的数值默认单位为像素(px).

    在有些位置可以使用百分比来设置。

    例如:

    这个就代表水平线厚席为3px.
    这个就代表水平线长度为总长度的30%.

    颜色值

    颜色由红®、绿(G)、蓝(B)组成。

    • 颜色值由十六进制来表示红、绿、蓝（RGB）。
    • 每个颜色的最低值为0(十六进制为00)，最高值为255(十六进制为FF)。
    • 十六进制值的写法为#号后跟三个或六个十六进制字符。
    • 三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。
    <!DOCTYPE html>
<html>
	<body>
		<p style="background-color:red">
			通过颜色名称设置背景颜色
		</p>
		<p style="background-color:#FFFF00">
			通过十六进制设置背景颜色
		</p>
		<p style="background-color:rgb(255,255,0)">
			通过 rgb 值设置背景颜色
		</p>
	</body>
</html>

    特殊字符

    • 空格：  
    • 大于号： <
    • 小于号：>
    • 版权符号： ©

    音频和视频

    audio

    音频标签

    标签支持的3种文件格式：MP3、Wav、Ogg。

    浏览器兼容性如下：

    浏览器MP3WavOgg
    Internet ExplorerYESNONO
    ChromeYESYESYES
    FirefoxYESYESYES
    SafariYESYESNO
    OperaYESYESYES

    建议使用MP3格式！！！

    3 种音频的 MIME-type 分别是：

    音频格式MINE-type
    MP3audio/mpeg
    Oggaudio/ogg
    Wavaudio/wav

    常用属性：

    • src：音频来源，相对路径或URL

    • controls：显示音频控件

    • autoplay：自动播放

    • loop：循环播放

    • muted：静音

    • preload：规定是否预加载音频，如果设置了 autoplay 属性，则忽略该属性。

      • auto：当页面加载后载入整个音频
      • metadata：当页面加载后只载入元数据
      • none：当页面加载后不载入音频
    <audio controls>
    <source src="media/nokia.mp3" type="audio/mpeg">
    <source src="media/nokia.ogg" type="audio/ogg">
</audio>

<audio controls src="media/nokia.mp3"></audio>

    video

    视频标签

    <video> 元素支持三种视频格式： MP4, WebM, 和 Ogg
    浏览器MP4WebMOgg
    Internet Explorer 9+YESNONO
    Chrome 6+YESYESYES
    Firefox 3.6+NOYESYES
    Safari 5+YESNONO
    Opera 10.6+NOYESYES
    格式MIME-type
    MP4video/mp4
    WebMvideo/webm
    Oggvideo/ogg

    常用属性：

    • src：视频来源，相对路径或URL

    • poster：视频正在下载时显示的图像

    • width：视频播放器的宽度

    • height：视频播放器高度

    • controls：显示视频控件

    • autoplay：自动播放

    • loop：循环播放

    • muted：静音

    • preload：规定是否预加载音频，如果设置了 autoplay 属性，则忽略该属性。

      • auto：当页面加载后载入整个音频
      • metadata：当页面加载后只载入元数据
      • none：当页面加载后不载入音频
    <video controls poster="img/nokia.jpg" width="800" height="500">
    <source src="media/nokia.mp4" type="video/mp4">
</video>

    表格

    table定义表格

    <table></table>

    常用属性：

    • align：用于设定表格的对齐方式

    • bgcolor：用于设定表格的背景颜色。

    • border：用于设定表格边框的宽度

    • width：用于规定表格的宽度。

    tr定义表格的行

    <table>
	<tr></tr>
</table>
    标签用于定义表格的行,包含一个或多个th或td元素。

    常用属性:

    • align：用于设定表格中行的内容对齐方式。

    • bgcolor：用于设定表格中行的背景颜色。

    th定义表格的表头

    内部的文本通常呈现为居中加粗文本。Html表格中有两种类型的单元格：

    • 表头单元格th:包含表头信息。

    • 标准单元格td:包含数据。

    • 两种单元格的属性一致

    td定义表格的列

    • align:用于设定单元格内容的对齐方式。

    • bgcolor:用于设定单元格背景颜色。

    • height:用于设定单元格的高度。

    • width:用于设定单元格的宽度。

    • colspan:用于设定列合并

    • rowspan:用于设定行合并。

    colspan 属性

    colspan属性用在td或th标签中，用来指定单元格横向跨越的列数

    在浏览器中将显示如下：

    img

    <table border="1" cellspacing="0" bordercolor="blue"
       style="border-collapse:collapse;">
    <tr>
        <td colspan="3">单元格1</td>
    </tr>
    <tr>
        <td>单元格2</td>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
</table>

    上例中的单元格1，把colspan设为"3", 令所在单元格横跨了三列。如果我们将colspan设为"2"，则该单元格将只跨越两列，于是有必要在第一行插入另外一个单元格，以确保两行占据相同的列数。

    img

    <table border="1" cellspacing="0" bordercolor="blue"
       style="border-collapse:collapse;">
    <tr>
        <td colspan="2">单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格3</td>
        <td>单元格4</td>
        <td>单元格4</td>
    </tr>
</table>

    rowspan 属性

    rowspan属性用在td或th标签中，用来指定单元格纵向跨越的行数

    img

    上例中的单元格1，其rowspan被设为"3"，这表示该单元格必须跨越三行（本身一行，加上另外两行），因此，单元格1和单元格2在同一行，而单元格3和单元格4形成独立的两行。

    <table border="1" cellspacing="0" bordercolor="blue" 
       style="border-collapse:collapse;">
    <tr>
        <td rowspan="3">单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格3</td>
    </tr>
    <tr>
        <td>单元格4</td>
    </tr>
</table>

    caption定义表格标题

    • 标签必须紧随 标签之后，一个表格只能有一个标题。

    • 通常这个标题会被居中于表格之上。

    thead定义表格的页眉

    • 标签用于组合 HTML 表格的表头内容。
    • 元素应该与 和 元素结合起来使用。

    注意: 内部必须有 标签。

    tbody定义表格的主体

    标签用于组合HTML表格的主体内容。

    tfoot定义表格的页脚

    标签用于组合HTML表格中的表注内容。

    表单

    form

    form 标签代表一个表单，表单用于向服务器传输数据。

    form 标签能够包含 ，可以是文本字段，复选框，单选框或提交按钮等。

    还可以包含等。

    • name：用于定义表单的名称
    • action：用于规定提交表单时向何处发送表单数据。
    • method：用于规定提交的方式。一般取值 POST 或 GET。

    POST与GET方式区别:

    • GET 方式只能传输少量数据,而 POST 可以携带大数据。
    • GET 方式提交时，数据会在地址栏上显示，安全性差。
    • POST 方式提交不会在地址栏上显示数据，更加安全。

    input

    标签用于搜集用户信息。

    根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。关于标签 type 属性值说明 :

    text

    定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

    其它常用属性:

    • name：定义表单名称
    • value：定义标签值
    • size：定义输入字段的长度
    • maxlength：定义可输入最大字符个数
    • minlength：定义可输入最小字符个数

    password

    定义密码字段。该字段中的字符被掩码.

    其它常用属性:

    • name：定义标签名称
    • value：定义标签值
    • size：定义输入字段的长度
    • maxlength：定义可输入最大字符个数
    • minlength：定义可输入最小字符个数

    radio

    定义单选按钮。

    其它常用属性:

    • name：定义标签名称

      • 注意，对于单选按钮，如果要想做到单一选择，多个radion的name值必一样

    • value：定义标签值

    • checked：定义该标签默认被选中。

    checkbox

    定义复选框。

    常用属性:

    • name：定义标签名称.注意，一组的checkbox它们的name值应该是一样的。
    • value：定义标签值
    • checked：定义该标签默认被选中。

    button

    定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）

    常用属性:

    • name：定义标签名称
    • value：按钮显示名称

    hidden

    定义隐藏的输入字段。

    常用属性:

    • name：定义标签名称
    • value：定义标签值

    file

    定义输入字段和 "浏览"按钮，供文件上传。

    常用属性:

    • name：定义标签名称

    submit

    定义提交按钮。提交按钮会把表单数据发送到服务器。

    常用属性:

    • name：定义标签名称
    • value：按钮显示名称

    reset

    定义重置按钮。重置按钮会清除表单中的所有数据。

    常用属性:

    • name：定义标签名称
    • value：按钮显示名称

    image

    定义图像形式的提交按钮。

    这个标签主要是用了替换submit按钮，因为默认产生的提交按钮并不漂亮，这个标签允许你采用指定的图片做为提交按钮。

    常用属性:

    • name：定义标签名称
    • src：定义作为提交按钮显示的图像的url
    • alt：定义作用图像的替代文本。

    select

    用于定义一个下拉列表

    常用属性:

    • name：定义下拉列表的名称
    • size：定义下拉列表中可见选项的数目
    • multiple：定义可选择多个选项

    option

    用于定义下拉列表中的选项。

    常用属性:

    • value：定义送往服务器的选项值
    • selected：定义选项为选中状态。

    textarea

    用于定义一个多行文本输入控件(多行文本框,文本域)

    常用属性:

    • name：定义多行文本框名称
    • cols：定义多行文本框可见宽度
    • rows：定义多行文本框可见行数

    button

    定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）

    常用属性:

    • name：定义标签名称
    • value：按钮显示名称

    hidden

    定义隐藏的输入字段。

    常用属性:

    • name：定义标签名称
    • value：定义标签值

    file

    定义输入字段和 "浏览"按钮，供文件上传。

    常用属性:

    • name：定义标签名称

    submit

    定义提交按钮。提交按钮会把表单数据发送到服务器。

    常用属性:

    • name：定义标签名称
    • value：按钮显示名称

    reset

    定义重置按钮。重置按钮会清除表单中的所有数据。

    常用属性:

    • name：定义标签名称
    • value：按钮显示名称

    image

    定义图像形式的提交按钮。

    这个标签主要是用了替换submit按钮，因为默认产生的提交按钮并不漂亮，这个标签允许你采用指定的图片做为提交按钮。

    常用属性:

    • name：定义标签名称
    • src：定义作为提交按钮显示的图像的url
    • alt：定义作用图像的替代文本。

    select

    用于定义一个下拉列表

    常用属性:

    • name：定义下拉列表的名称
    • size：定义下拉列表中可见选项的数目
    • multiple：定义可选择多个选项

    option

    用于定义下拉列表中的选项。

    常用属性:

    • value：定义送往服务器的选项值
    • selected：定义选项为选中状态。

    textarea

    用于定义一个多行文本输入控件(多行文本框,文本域)

    常用属性:

    • name：定义多行文本框名称
    • cols：定义多行文本框可见宽度
    • rows：定义多行文本框可见行数
cqk先生
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自动加载html,jQuery实现的自动加载页面功能示例
weixin_36322454的博客
05-31 491
本文实例讲述了jQuery实现的自动加载页面功能。分享给大家供大家参考，具体如下：demo.html：---------------阅谁问君诵，水落清香浮阅谁问君诵，水落清香浮阅谁问君诵，水落清香浮阅谁问君诵，水落清香浮阅谁问君诵，水落清香浮阅谁问君诵，水落清香浮阅谁问君诵，水落清香浮阅谁问君诵，水落清香浮+++++++++++++++scrollpagination.js：(function( ...
html加载完成 产生动作,页面加载功能设计总结
weixin_39744316的博客
06-07 212
关于“前进”，我们很难给出一个准确的定义。狭义上的“前进”指的是用户触发某个交互动作进入一个新页面。如何在进入一个新页面的过程中给予用户良好的体验呢？我们可以从以下三个方面进行分析：指示器、方向和顺序。指示器用户每次进入一个新页面都要从后台请求数据，数据返回到页面完成渲染，内容才会展示出来。这个过程需要时间，需要用户去等待。指示器的作用就是填补用户等待的时间，减少用户因等待而产生的焦虑情绪。1) ...
在一个html页面加载另一个html页面
qq_36545656的博客
11-25 1万+
jquery方法： 例如：实现在section选择器中添加third,html; $('section').load("third.html"); 如果带有回调函数： //$('section').load('third.html',function(response,status,xhr){ // $('section').html(response); //}
jquery 加载html页面刷新,Jquery.load载入页面实现局部刷新的代码
weixin_42500720的博客
06-03 742
一直想用jquery.load的方法载入新的页面，以实现局部刷新，结果发现载入进来的页面与原来单独的页面不一样，样式没了。解决方法：如果不过滤掉一些内容的话，直接加载，会使页面混乱的，比如新的页面也存在标签，加载进来后，一个页面就会存在两个标签是不规范的的HTML。这个是在jquery.load()函数中规定的。一般加载进来的页面需要自己根据加载的内容的元素重新定义CSS样式和添加js事件的。比如...
工作积累之HTML页面加载和解析流程
startwithdp的专栏
07-26 3190
浏览器加载和渲染html的顺序 1. IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。 2. 在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）。 3. 如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。 4. 样式表在下载完成后，将和以前下载的所有样式表一起进行解
前端-HTML-基础入门
最新发布
08-19
前端-HTML-基础入门
学习前端-HTML-day01
08-17
学习前端-HTML-day01
练习前端-HTML标签进阶篇-day02-03
08-19
练习前端-HTML标签进阶篇-day02-03
前端-web前端-模板-各行各业二十个模板7.13.2
07-13
前端-web前端-模板-各行各业二十个模板7.13.2 前端-web前端-模板-各行各业二十个模板7.13.2 前端-web前端-模板-各行各业二十个模板7.13.2 前端-web前端-模板-各行各业二十个模板7.13.2 前端-web前端-模板-各行各业二...
前端-web前端-模板-各行各业二十个模板7.10.3
07-10
前端-web前端-模板-各行各业二十个模板7.10.3 前端-web前端-模板-各行各业二十个模板7.10.3 前端-web前端-模板-各行各业二十个模板7.10.3 前端-web前端-模板-各行各业二十个模板7.10.3 前端-web前端-模板-各行各业二...
简单实现网页加载动画
huxinxue的博客
03-26 1万+
今天自己实现了这个功能，记录一下 效果： 进入网页时先出现加载动画，加载完毕后显示网页 实现原理： 在html上方放一个div，用来显示加载动画，js判断加载完毕事件，将div隐藏即可。 知识点整理： 伪元素实现垂直居中、awesome字体动画、js判断HTML加载是否完成 代码： css: body { width: 100%; height: 100%; ...
html 显示状态条,网页加载时页面显示进度条加载完成之后显示网页内容
weixin_36081187的博客
05-30 614
现在网上有很多网页加载进度条 ，但大多都是时间固定的。下面的当查询大量数据时，网页加载较慢，在网页加载时，显示进度条，当网页加载完成时，进度条消失，显示网页已经加载完成的内容。Dim Bar, SPBar = 0SP = 100Function Window_onLoad()Bar = 95SP = 10End FunctionFunction Count()if Bar < 100 The...
html，js加载顺序
mwp5212的博客
07-31 643
浏览器对html页面内容的加载是顺序加载，先加载head部分，再加载body部分。JS是一种解释性的脚本，也是从上而下顺序执行。浏览器执行引擎遇到的时候，此时页面的下载和渲染都必须等待”
【HTML】简单实现网页加载动画
点滴记忆
02-05 4390
效果： 进入网页时先出现加载动画，加载完毕后显示网页 实现原理： 在html上方放一个div，用来显示加载动画，js判断加载完毕事件，将div隐藏即可。 知识点整理： 伪元素实现垂直居中、awesome字体动画、js判断HTML加载是否完成 代码： css: body { width: 100%; height: 100%; overflow: hidden...
html页面解析和加载流程
lzf的博客
10-12 309
JS的加载 1. 不能并行下载和解析（阻塞下载）。 2. 当引用了JS的时候，浏览器发送1个js request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构，而JS中很有可能有代码直接改变了DOM树结构，比如使用 document.write 或 a,甚至是直接使用的location.href进行跳转，浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，
html加载过程
qq_45225759的博客
11-14 779
html加载过程
前端几种可视化大屏组件库图表插件介绍
热门推荐
一家外包公司的码农，专职前端开发
01-21 2万+
经理给我分配了可视化大屏数据项目，我看了好多组件库和去百度搜索，最后总结出几种比较好用的组件库来介绍一下，国外版本的我就直接抛弃了（英语1级） 1.Echarts官方网址 他是百度团队开源的，反正是老牌图表插件工具了，里面有许多图表。 不过感觉太死板，不好看，但是问了一些前辈，他们都推荐的这个，直到后来我在度娘找到了下面这个文档改变了我对Echarts的看法。 2.MakeAPie官方网址 这个应该是Echarts的社区吧，里面的图表都是基于Echarts的。五颜六色种类挺多的。.
HTML5笔记
Tachyglossus‘ Blog
09-02 544
HTML5笔记 目录 简介 特性 新特性 新增的结构标签 多媒体标签 音频标签 视频标签 source标签 其他功能性标签 details和summary progress和meter mark、cite、time canvas 新增的表单控件和属性 控件 属性 兼容说明 简介 将互联网语义化，更好的被人机阅读，更好的支持各种媒体的嵌入。 是包括HTML、CSS...
通过rel="preload"进行内容预加载
liuniandexiatian的博客
05-08 5002
<link> 元素的 rel 属性的属性值preload能够让你在你的HTML页面中 <head>元素内部书写一些声明式的资源获取请求，可以指明哪些资源是在页面加载完成后即刻需要的。对于这种即刻需要的资源，你可能希望在页面加载的生命周期的早期阶段就开始获取，在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用，且更不易阻塞页面的初步渲染，进而提升...
HTML前端基础：常用标签详解
"01-前端HTML基础知识" 在HTML（超文本标记语言）中，前端开发的基础知识涵盖了各种标签的使用，这些标签用于构建网页结构和内容。HTML不区分大小写，但为了保持一致性，通常推荐使用小写字母。HTML的注释不能嵌套...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值