HTML/HTML5 标签基础语法-1

老六



Tip
web 前端开发零基础快速入门HTML/HTML5 标签属性的基础语法



一、基础入门


TIP

1、创建第一个网页

方法一:

  • 创建一个空文件夹

  • 在文件夹中,右键新建文本文件

  • 然后将文件后缀名.txt修改为 .html ,再使用VSCode 编辑器打开

  • 注意设置操作系统 "文件扩展名" 为可见

方法二:

  • 创建一个空文件夹,直接使用 Vscode 打开文件夹

  • 使用快捷键 Ctrl + N 新建文件 ,保存文件格式为 .html后缀名即可

  • 或者点击新建文件按钮 或 在 Vscode 资源管理器中右键新建文件

注:

我们所看到的网页有各种效果(包括图片、视频、文字 .....),但 HTML 文件本身是纯文本

2、生成 HTML5 骨架

TIP

  • 输入 ! 英文模式下,按 tab键,即可自动生成 HTML5 的骨架

  • 注:如果没有生成,看网页的格式是否正确或保存

  • 在 Vscode 中 生成 HTML5 骨架 即可

<!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=1.0" />
    <title>这是我的第一个HTML网页</title>
  </head>
  <body>
    第一个HTML网页 ,Hello !  </body></html>


3、浏览器内核


浏览器内核(渲染引擎):

负责读取网页内容,整理信息,计算网页的显示方式并显示页面

浏览器内核JavaScript 引擎描述
IETridentjscript微软早期开发的浏览器内核,已停止更新(IE 11 为最终版本),仅兼容旧版网站。
Edge(旧)EdgeHTMLChakra2015-2019 年微软自研内核,后因兼容性和性能问题弃用,转投 Chromium 项目
Edge(新)BlinkV82020 年起基于 Chromium 项目,与 Chrome 同源,采用 Blink 渲染引擎和 V8 JAVAScript 引擎,支持现代 WEB 标准。
ChromeBlinkV8Google 开发的浏览器,基于 Chromium 项目,Blink 是 WebKit 的分支(2013 年分叉),V8 引擎以高性能著称。
OperaBlinkV82013 年放弃自研的 Presto 内核,转向 Chromium 项目,采用 Blink 和 V8,保留侧边栏、广告拦截等特色功能
Samsung InternetBlinkV8三星开发的浏览器,基于 Chromium 项目,采用 Blink 渲染引擎和 V8 JavaScript 引擎,深度集成三星设备功能(如 Samsung Pass、广告拦截器)。
FirefoxGeckoSpiderMonkeyMozilla 基金会开发的浏览器,唯一未采用 Chromium 的主流浏览器,强调隐私保护和 Web 标准多样性。
SafariWebKitJavaScriptCore苹果浏览器内核,基于 KHTML 发展而来,JavaScriptCore(原名 Nitro)是其默认 JS 引擎,仅限 apple 设备。
360、猎豹、2345Trident+BlinkV8/Chakra(混合)国内双内核浏览器,默认使用 Chromium 内核(Blink),兼容模式切换为 Trident(IE 内核),支持旧版网站。
UCTrident+WebKitU4/V8(混合)早期移动端浏览器,PC 版采用双内核(Trident+WebKit),但部分版本可能已转向 Chromium 内核。
搜狗、遨游、QQTrident+WebKitV8/Chakra(混合)支持 Chromium 和 WebKit 内核切换

浏览器内核检测工具:https://ie.icoa.cn/









发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
验证码
评论列表 (暂无评论,66人围观)

还没有评论,来说两句吧...

目录[+]

取消
微信二维码
微信二维码
支付宝二维码