网页 浏览器内核 Web标准(七七)

最新推荐文章于 2024-09-04 23:24:54 发布
最新推荐文章于 2024-09-04 23:24:54 发布
阅读量618 收藏
点赞数 1
分类专栏： 前端学习 文章标签： html chrome html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41263860/article/details/121308996
版权
本文介绍了网页的基础知识，包括HTML的定义及其在网页形成中的作用，强调了Web标准的重要性，如结构、表现和行为的分离，并提到了常见的浏览器内核。此外，还详细解释了VSCode中创建网页所需的DOCTYPE、lang和charset等基本代码元素。
摘要由CSDN通过智能技术生成

大家好 我是七七 退一步是六 进一步是八

在这里插入图片描述

文章目录

1. 网页

本节内容理论较多，重点都加粗了，了解一下即可。

  1. 什么是网页?
  2. 什么是HTML?
  3. 网页怎么形成?

1.1 什么是网页

网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。
网页是网站中的一"页"，通常是HTML格式的文件，它要通过浏览器来阅读。
网页是构成网站的基本元素，它通常由图片、链接、文字 、声音、视频等元素组成。通常我们看到的网页常见以.htm 或 .html后缀结尾的文件，因此将其称为HTML文件。

1.2 什么是HTMl

HTMl指的是超文本标记语言(Hyper Text Markup Language)，它是用来描述网页的一种语言。
HTML不是一种编程语言，而是一种标记语言(markup language)。
标记语言是一套标记标签(markup tag)。
所谓超文本 有2层含义

  1. 它可以加入图片、声音、动画、多媒体等内容(超越了文本限制)。
  2. 它还可以一个文件跳转到另一个文件，与世界各地主机的文件连接(超级链接文本)。

1.3 网页的形成

网页是由网页元素组成的，这些元素是利用html标签描述出来 然后通过浏览器解析来给用户的。
前端人员开发代码==>浏览器显示代码(解析 渲染)==>生成最后的web网页

1.4 网页总结

网页是图片、链接、文字、声音、视频等元素组成 其实就是一个html文件(后缀名为html)。
网页生成制作:有前端人员书写HTML文件，然后浏览器打开，就能看到网页。
HTMl:超文本标记语言 用来制作网页的一门语言 有标签组成的 比如 图片标签、链接标签、视频标签等等。

2. 常用浏览器与浏览器内核

网页是通过浏览器来展示的，关于浏览器我们要介绍以下两点。

  1. 常用的浏览器
  2. 浏览器内核

2.1 常用浏览器

浏览器是网页显示 运行的平台，常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera等，平时称为五大浏览器。
七七自己平时用的是谷歌浏览器(chrome)也是推荐大家用这个浏览器进行开发。
在这里插入图片描述

2.2 浏览器内核

浏览器内核备注
IETridentIE、猎豹安全、360极速浏览器、百度浏览器
FirefoxGecko火狐浏览器内核
SafariWebkit苹果浏览器内核
chrome/OperaBlinkchrome/opera浏览器内核 Blink其实是Webkit的分支

3. Web标准(重点)

Web标准是由W3C组织和其他标准组织制定的一系列标准的集合 ，W3C(万维网联盟)是国际最著名的标准化组织。

3.1 为什么需要Web标准

遵循Web标准除了可以让不同的开发人员写出的页面更标准、更统一以外，还有以下优点：

  1. 让Web的发展前景更广阔
  2. 内容能被更广泛的设备访问
  3. 更容易被搜寻引擎搜索
  4. 降低网站流量费用
  5. 使网站更易于维护
  6. 提高页面浏览速度

3.2 Web标准的构成

主要包括结构(Structure) 表现(Presentation)和行为(Behavior) 三个方面。

标准说明
结构结构用于对网页元素进行整理和分类 现阶段主要学的是HTML
表现表现用于设置网页元素的版式 颜色 大小等外观样式 主要指的是CSS
行为行为是指网页模型的定义及交互的编写 现阶段主要学的是Javascript

Web标准提出的最佳体验方案:结构、样式、行为相分离
简单理解 结构写到HTML文件中 表现写到CSS文件中 行为写到JavaScript文件中

3.3 Web标准的构成

我们拿鸟举个例子：

标准对鸟的说明
结构结构类似鸟的身体
表现表现类似鸟的外观装饰
行为行为类似鸟的行为动作 比如 跳、飞等

相对而言,三者中结构最为重要
在这里插入图片描述

4. VSCode工具生成骨架标签新增代码

  1. <!DOCTTYPE>标签
  2. lang语言
  3. charset字符集

4.1 文档类型声明标签

<!DOCTTYPE>文档类型声明 作用就是告诉浏览器使用哪种HTML版本来显示网页。

<!DOCTYPE html>

这句代码的意思是，当前页面采取的是HTML5版本来显示页面。
注意

  1. <!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前。
  2. <!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签。

4.2 lang语言种类

用来定义当前文档显示的语言：

  1. en定义语言为英语
  2. zh-CN定义语言为中文

简单来说定义为en就是英文网页，定义为zh-CN就是中文网页。
其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文。
这个属性对浏览器和搜索引擎(百度、谷歌等)还是有作用的。

4.3 字符集

字符集(Character set)是多个字符的集合，以便计算机能够识别和存储各种文字。
在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。

<meta charset="UTF-8"/>

charset常用的值有: GB2312、BIG5、GBK和UTF-8 其中UTF-8也被称为万国码 基本包含了全世界所有国家需要用到的字符。
**注意: 上面语法是必须要写的代码，否则可能引起乱码的情况 一般情况下，同意使用"UTF-8"编码 尽量统一写成标准的"UTF-8" 不要写成"utf8"或"UTF8"。

4.4 总结

  1. 以上三个代码vscode自动生成 基本不需要我们重写。
  2. <!DOCTYPE html> 文档类型声明标签，告诉浏览器这个页面采取html5版本来显示页面。
  3. <html lang=“en”>告诉浏览器或者搜索引擎这是一个英文网站，本页面采取英文来显示。
  4. <meta chatset=“UTF-8” />必须写，采取UTF-8来保存文字，如果不写就会乱码，具体原理后面分析。

我是七七 退一步是六进一步是八 下次再见

@七七诶
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
电脑技巧：一文带你了解主流的浏览器内核
IT技术分享社区
03-18 2783
Opera浏览器虽然国内不是很常见，但它是浏览器的先驱，探索者，现在各种各样的浏览器很多功能都是参考Opera，例如最常见的鼠标手势的功能就是Opera最先开发的，另外还有拨号功能，快速填表等。浏览器是大家日常使用电脑必备的软件，网上查资料、听音乐、办公等等，都不离不开浏览器给我们提供的方便，今天小编来给大家介绍一下常见的浏览器内核，一起来学习一下吧！Chromium内核是谷歌公司推出的，最具有代表性的浏览器就是自家的Google Chrome，也就是谷歌浏览器，是目前全球市场份额第一的浏览器。
浏览器内核
10-31
浏览器内核是构建网页浏览器的核心组件，它负责解析HTML、CSS、JavaScript等Web标准语言，渲染页面，并与用户的交互进行处理。"WebKit.NET-0.5"是一个将Chrome浏览器的内核WebKit移植到.NET框架的项目，使得开发者...
浏览器内核和Web标准
匿名攻城狮
06-13 1050
前端代码通过浏览器可渲染为可视化界面，渲染主要是通过浏览器的内核。 一、常见浏览器内核() (1)Trident(IE内核)： 国内很多双核浏览器的其中一核便是Trident，称作是"兼容模式"。 代表：IE、猎豹安全浏览器、360极速浏览器、百度浏览器、遨游、世界之窗浏览器、Avant、腾讯TT等。 Windows10发布后，IE将其内置浏览器命名为Edge，Edge最显著的特点就是新内核Edg...
全面认识Web标准和浏览器内核引擎
天涯学馆
12-04 639
Web、网页、浏览器 Web Web（World Wide Web）即全球广域网，也称为万维网。 我们常说的Web端就是网页端。 网页 网页是构成网站的基本元素。网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。 我们在浏览器上输入网址后，打开的任何一个页面，都是属于网页。 浏览器 浏览器是网页运行的平台，常见的浏览器有谷歌（Chrome）、Safari、火狐（Firefox）、IE、Edge、Opera等。 Web标准 W3C组织 W3C：万维网联盟组
浏览器内核与Web标准
csdnqiang的博客
07-12 639
浏览器内核（layout engineer 或者 Rendering Engine）也称为排版引擎、解释引擎或渲染引擎。主要负责读取网页内容、整理讯息以及计算网页的显示方式。以下列出几种主流浏览器： 浏览器不同所用的内核有所不同，所以同一内容在不同浏览器中显示效果有可能不同。对于以上情况，开发中要尽量遵循网页中WEB标准。WEB标准由W3C（万维网联盟）和其他标准化组织制定。 WEB标准主要由结构（structure）、表现presentation）和行为（behaviour）构成。 结构主要是对网页元素
Cef浏览器内核.zip_C# 浏览器 CEF_cef浏览器_cef浏览器 1688_cef浏览器内核_浏览器
07-14
总的来说，`Cef浏览器内核.zip`提供了在C#环境下开发自定义浏览器或Web视图控件所需的所有基础组件和资源。通过学习和使用CefSharp库，开发者可以创建具有高度定制能力的桌面应用，这些应用可以浏览网页、运行Web...
浏览器内核chromium84（2020）版本
03-28
浏览器内核Chromium 84是Google Chrome浏览器的核心组件，它是开源的，允许开发者们根据自己的需求进行定制和改进。这个版本在2020年发布，主要关注性能优化、安全更新以及对Web标准的支持。在游戏开发领域，尤其是...
网页无插件播放rtsp视频，支持最新浏览器内核
10-18
支持最新浏览器内核，实现了用RTSP协议接入已有流媒体平台或摄像机的视频，通过转码后用WebRTC进行播放，只要支持WebRTC的浏览器或移动端都可以使用。用WebRTC播放监控视频可以处理高版本浏览器不支持插件的情况，且...
Qt将数据库中的数据导出为html
qq_15181569的博客
09-04 483
【代码】Qt将数据库中的数据导出为html。
HTML笔记4(1)
最新发布
2401_85195615的博客
09-04 324
标记用于标识表格某行中的一个单元格开始用于标识表格某行中的一个单元格结束一对标记定义一列标记书写在内，一对标记内含有多少对标记，就表示该行有多少单元格123一二三我们可以看到这样写出来的表格第一没有边框，其次长宽没法调节，这些标记没有属性，那么我们如何美化呢，不必担心，CSS样式搞定😀。
从零开始：我的JaveWeb学习笔记之网页设计初探：探索 HTML 、CSS的奇妙世界（JavaWeb、HTML、CSS）
Hanbuhuic的博客
09-04 1293
HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。它定义了网页的结构和内容，但不包括样式和行为。HTML 由一系列的元素组成，这些元素可以被浏览器识别并渲染成可视化的网页。CSS（层叠样式表，Cascading Style Sheets）是一种用于描述HTML或XML文档的样式表语言。它能够控制网页的布局、颜色、字体以及其他视觉和版式特性。CSS 允许开发者将页面的内容（HTML）与页面的表现（CSS）分离，这样可以更灵活地进行设计和维护。
前端基础面试题·第一篇——HTML
2301_76380626的博客
09-04 885
前端基础面试题·第一篇——HTML
米家商城主题 html 页面源码分享，可用于网页设计作业
m0_61603704的博客
08-28 437
1. 仿照米家商城页面布局所做的页面样式结构。3. 登录页有表单结构，并且有切换的动画效果。4. 包含实时的动态时间，使用 js 实现。5. 页面布局清晰，结构简单，适合初学者。2. 首页放置了可自动切换的轮播图。
HTML基本标签
actavy的博客
08-28 982
HTML（HyperText Markup Language）是超文本标记语言。它由一系列的元素（即标签）组成，每个标签都表示页面上的不同内容或元素，如文本、图像、链接等。HTML被用来描述网页的结构，并且在网页浏览器中解释显示这些结构，使网页内容呈现出来。标题标签的默认样式是自动加粗的，字体一级标题最大，六级标题最小，每个标题标签独占一行，并且标题标签是块元素。
html导航栏logo
m0_74358570的博客
09-04 131
html导航栏logo
日程安排组件DHTMLX Scheduler v7.1 - 支持RFC-5545格式
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
09-04 652
本文将为大家介绍强大JavaScript UI库DHTMLX Suite v8.4新功能，欢迎下载新版体验！
【Python】HTMLParser：HTML解析
2303_80346267的博客
09-04 488
创建自定义解析器类，继承HTMLParserfrom html . parser import HTMLParser # 创建自定义解析器类，继承HTMLParser class MyHTMLParser(HTMLParser) : def handle_starttag(self , tag , attrs) : print(f"Start tag: {
HTML 总结
2301_77527830的博客
08-29 764
包含了所有的头部标签，例如：<title>, <style>, <meta>, <link>, <script>e.g.：比 如 < 和 > ,我们不能直接在页面中使用 < 和 > 号，因为浏览器会将它解析为html 签。网页表单中有许多可以输入或选择的组件,用户可以在表单中填写信息,最终提交表单,把客户端数据提交至服务器。注：下拉框的name,id,事件等需要在select中定义，而value需要在option中定义。为了可以使用这些预留字符，我们必须在html中使用字符转义。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@七七诶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值