Web标准的构成、网页的组成、五大浏览器，可以使用HTML搭建出一个基础的网页

Web标准

不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异

如果用户想看一个网页，结果用不同浏览器打开效果不同，用户体验极差!

Web标准:让不同的浏览器按照相同的标准显示结果，让展示的效果统一!

Web标准中分成三个构成

构成	语言	说明
结构	HTML	页面元素和内容
表现	CSS	网页元素的外观和位置等页面样式(如:颜色、大小等)
行为	JavaScript	网页模型的定义与页面交互

Web标准要求页面实现:结构、表现、行为三层分离

小结

Web标准的构成有哪些?分别通过什么语言表示?

• 结构:HTML → 页面元素
• 表现:CSS → 页面样式
• 行为:JavaScript → 页面交互的动态效果

认识网页

1、网页由哪些部分组成?

文字、图片、音频、视频、超链接

2、我们看到的网页背后本质是什么?

前端程序员写的代码

3、前端的代码是通过什么软件转换成我们眼中的页面的?

通过浏览器转化(解析和渲染)成我们看到的网页

五大浏览器

认识五大浏览器和渲染引擎

浏览器:是网页显示、运行的平台，是前端开发必备的开发利器

常见的五大浏览器:

IE浏览器、火狐浏览器(Firefox)、谷歌浏览器(Chrome) 目前我常用的、Safari浏览器、欧朋浏览器(Opera)

渲染引擎的(了解)

渲染引擎(浏览器内核):浏览器中专门对代码进行解析渲染的部分

浏览器出品的公司不同，内在的渲染引擎也是不同的:

浏览器	内核	备注
IE	Trident	IE 、猎豹安全、360极速浏览器、百度浏览器、QQ浏览器
Firefox	Gecko	火狐浏览器内核
Safari	Webkit	苹果浏览器内核
Chrome/Opera	Blink	Blink其实是Webkit的分支

注意点:
• 渲染引擎不同，导致解析相同代码时的速度、性能、效果也不同的
• 谷歌浏览器的渲染引擎速度快、性能高、效果好，所以更吸引用户的喜爱(推荐使用)

HTML初体验

HTML的概念

HTML(Hyper Text Markup Language)中文译为:超文本标记语言

专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述

网页体验-构建基本网页的步骤

在代码文件夹中点击鼠标右击 → 新建文本文档 → 命名为:文件名称.txt
双击这个文件，输入代码等内容 → 记得保存!
在文件上点击鼠标右键 → 重命名 → 修改文件后缀为.html
双击文件名称.html ，浏览器会自动打开文件并显示之前输入的内容

小结

HTML的中文名叫做什么?

超文本标记语言

HTML中是通过什么来对网页中的文本、图片、音频、视频等内容进行描述的?

HTML标签

HTML页面固定结构

网页类似于一篇文章:

➢ 每一页文章内容是有固定的结构的，如:开头、正文、落款等…
➢ 网页中也是存在固定的结构的，如:整体、头部、标题、主体

网页中的固定结构是要通过特点的 HTML标签 进行描述的

<html><head><title>网页的标题</title></head><body>网页的主体内容/身体部分。我们看到的页面都写在这个地方</body>
</html>

小结

HTML骨架结构由哪些标签组成?

• html标签:网页的整体
• head标签:网页的头部
• body标签:网页的身体
• title标签:网页的标题

语法规范

HTML的注释

注释的作用
• 为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码
• 浏览器执行代码时会忽略所有的注释
注释的快捷键:
• 在VS Code中:ctrl + /

HTML标签的构成

标签的结构图：

结构说明:

标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
常见标签由两部分组成，我们称之为:双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
少数标签由一部分组成，我们称之为:单标签。自成一体，无法包裹内容。

小结

常见标签由几部分组成?称之为什么?

两部分，双标签

少数标签由几部分组成?称之为什么?

一部分，单标签

HTML标签的属性

标签的属性: 属性名=“属性值”

双标签的属性需要写在开始标签还是结束标签中?

开始标签

标签上可以同时存在几个属性?

多个

标签名与属性之间，属性与属性之间以什么隔开?

空格

HTML标签的关系

标签的关系:父子 + 兄弟

➢ 父子关系(嵌套关系)

<head><title></title>
</head>

➢ 兄弟关系(并列关系)

<head></head>
<body></body>

Web标准的构成、网页的组成、五大浏览器，可以使用HTML搭建出一个基础的网页相关推荐

html 点击新建窗口,【单选题】在HTML中,若实现单击超链接时,弹出一个新的网页窗口,下列的()选项符合要求。 A. 节目 B. 节目 C. 节目 D. 节目...
[单选题]在HTML中,若实现单击超链接时,弹出一个新的网页窗口,下列的()选项符合要求. A. 节目 B. 节目 C. 节目 D. 节目更多相关问题扩展不确定度为()Ω,取包含因子k＝2.A．0 ...
产品经理必备知识之网页设计系列（二）-如何设计出一个优秀的界面
前言第一部分参见产品经理必备知识之网页设计系列(一)-创建出色用户体验 https://blog.csdn.net/wenyusuran/article/details/108199875 第三部 ...
PS网页设计教程XXVI——如何在PS中创建一个专业的网页布局
作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作诗也会吟". 本系列的教程来源于网上的PS教程,都是国外的 ...
做网页用的小型服务器,ASP:用ASP打造一个小型的网页BBS系统
传统的网页BBS大多是采用CGI模式实现的,它的实现要求编程者既要掌握编程语言如Perl或C等,又要了解关于CGI模式的各项技术内容,因此要制作自己的网页BBS确实困难不小.ASP(Active Se ...
前端html网页，点击按钮或超链接弹出一个登陆的div窗口或者对话框
1.点击链接弹出一个可操作的div窗口代码效果图展示: 代码示例: <!DOCTYPE> <html> <head> <title>点击文字弹出一个DI ...
HTML与CSS基础（一）—— HTML基础（web标准、开发工具、标签）
目标能够理解HTML的基本语法和标签的关系能够使用排版标签实现网页中标题.段落等效果能够使用相对路径选择不同目录下的文件能够使用媒体标签在网页中显示图片.播放音频和视频能够使 ...
web标准，我们去向何方？一些想法...
web标准,我们去向何方?一些想法... 作者:阿捷 2004-7-5 0:52:42 原文作者:Veerle 原文出处:veerle.duoh.com 原文发表时间:2004年6月14日译者注:本 ...
Web标准概念--摘抄《CSS布局实录》
前言对于日常的很多事情,我们并没有注意到这背后都有着一个隐藏的"因素"在起作用,这个因素就是:标准. 生活中各行各业都有着自己相应的标准与规范,标准可以方便交流.促进协作.提高效 ...
WaSP的简要历史以及为何Web标准很重要
2013年8月,Aaron Gustafson 发布到了WaSP博客 . 他向一个社区传达了苦乐参半的信息: 由于无数WaSP成员和支持者(如您)的辛勤工作,Tim Berners-Lee将网络视为开 ...