html初识
html初识
1、基础认知(了解)
1.1 网页由那些部分组成
文字、图片、音频、视频、超链接
1.1.2 网页背后的本质
前端程序员写的html代码
1.1.3 前端代码是通过什么软件转换成用户眼中的页面
浏览器
浏览器是网页显示、运行的平台，是前端开发必备利器
常见的五大浏览器：
- IE浏览器(Win系统自带)
- 火狐浏览器(Firefox)
- 谷歌浏览器
- Safari浏览器(苹果电脑自带)
- Opera浏览器
1.2 渲染引擎
渲染引擎(浏览器内核):浏览器中专门对代码进行解析渲染的部分。
浏览器出品的公司不同，内在的渲染引擎也是不同的。
| 浏览器 | 内核 | 备注 |
|---|---|---|
| FireFox | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 |
| FireFox | Gecko | 火狐浏览器内核 |
| Safari | Webkit | 苹果浏览器内核 |
| Chrome/Opera | Bink | Blink其实是Webkit的分支 |
注意：渲染引擎不同，导致解析相同代码的
速度、性能、效果也不同的。谷歌浏览器的渲染引擎速度快、性能高、效果好，所以更吸引用户的喜爱(推荐)。
2、Web标准
2.1 为什么需要Web标准?(了解)
Web标准：让不同浏览器按照相同标准显示结果，让展示效果统一！
Web标准由下列三个构成：
Web标准要求页面实现：结构，表现，行为三层分离。
2.1 小结
Web标准的构成有哪些？分别通过什么语言表示？
- 结构：HTML -> 页面元素
- 表现：CSS -> 页面样式(美化页面)
- 行为：JavaScript -> 页面交互的动态效果
3、HTML的概念
HTML(Hyper Text Markup Language) 中文译为：超文本标记语言。
3.1 简介
专门用于网页开发的语言(HTML)，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述。
HTML的文件名格式为: xxx.html或者xxx.htm
浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果
浏览器按顺序阅读网页文件(html文件)：其实就是从上到下来解析HTML代码。
不同的浏览器，可能对同样的HTML标签由不同的含义，不同的显示效果。
3.2 体验html
下面我们用一个案例文字变粗来体验一下html的使用：
首先，第一步创建一个文本文件：
第二步，打开文件，添加以下内容:
未加粗：这里我们没有加粗。
<br/>
加粗后：<strong>你猜，这个字是加粗的吗？</strong>
第三步，修改文件后缀：
txt换成 html。
第四步，双击该文件，看效果：
在上面的内容中，我们通过标签<strong></strong>对文字进行了加粗。第一个<strong>为开始标签，第二个</strong>为结束标签。
3.3 HTML骨架
在上面的案例中，我们写的html代码其实不是特别的规范。如果按照上面的形式编写html，当代码非常多的时候，就会变得非常混乱，不利于代码的阅读和维护。因此我们在写html代码时，要基于html的骨架进行编写。
3.3.1 什么是HTML的骨架
举个1个例子：
- 网页类似于一篇文章，每一页的文章内容都是有固定的结构的，如：开头、正文、落款等·····
网页也是存在固定结构的，如：整体、头部、标题、主题。
3.3.2 html页面固定结构
上图为html的固定结构(也就是骨架)，我们都是基于它来编写网页内容的。
其中：
- 网页的所有内容都囊括在
<html></html>这一对标签中。 <head></head>标签为网页的头部- 在head中有一对
<title></title>标签，它表示网页的标题 <body></body>为网页的身体，用来放网页的主体内容的
例如，我们打开京东网页：
这个是京东的标题，放在title标签中。
上面的所有内容，都是放在body里面。
3.4 小结
html骨架结构由那些标签组成？
从外而内：
- html标签：网页整体
- head标签：网页的头部
- body标签：网页的身体
- title标签：网页的标签
浙公网安备 33010602011771号