前端笔记day01

最新推荐文章于 2023-12-30 16:55:45 发布

晚.990

最新推荐文章于 2023-12-30 16:55:45 发布

阅读量43

点赞数

文章标签： firefox javascript safari

本文链接：https://blog.csdn.net/weixin_69506130/article/details/126102707

版权

本文介绍了浏览器的核心——渲染引擎，以及五大浏览器及其内核，如Chrome的Blink、Firefox的Gecko。接着，详细阐述了HTML的三大组成部分：结构、表现和行为，以及HTML的基本结构、标记、注释和常用标签。还提到了DOCTYPE html的作用，它是HTML5的文档声明，用于告知浏览器使用HTML5标准解析页面。

摘要由CSDN通过智能技术生成

1、浏览器及内核

web浏览器是用于读取HTML文件，并将其作为网页显示
浏览器最重要的部分或其核心是渲染引擎，我们一般称为内核；
内核的作用负责对网页语法的解释并渲染网页；
五大浏览器：chrome、safari、Firefox、Opera、IE

1.chrome 谷歌浏览器

生产商：Google

内核：webkit、blink

2.Firefox 火狐浏览器

生产商：Mozilla

内核：gecko

3.Safari 苹果浏览器

生产商：苹果公司

内核：webkit

4.opera 欧朋浏览器

生产商：挪威欧普拉软件公司

内核：presto blink

5.IE 浏览器

生产商：微软公司 Microsoft

内核：trident

其他浏览器：

大部分国产的浏览器（qq浏览器，uc浏览器，猎豹浏览器，360浏览器）基本上是在IE浏览器的内核上进行的二次开发

现在国内市场上有许多双内核的浏览器，使用的是trident,webkit内核

2、页面的三大组成部分

结构：给页面搭建基本的框架结构。 html ，类比于建房子的时候要搭的地基跟钢筋。
表现：页面的美化，装饰。 css 相当于给房子加背景和家具的排列布局。
行为：页面的轮播图，返回顶部... javascript 相当于房子加灯的开关。

结构层html和表现层css，是 W3C 制定的规范，万维网联名。

行为层js，是 ECMA 制定的规范，欧洲计算机协会。

2、HTML介绍

1、什么是HTML

HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言。

通过HTML标记（标签）对网页中的文本、图片、多媒体等内容进行描述。

说明：
- “超文本”：不仅能承载简单的文字、还能包含超链接、图片、音频、视频等。
- “标记语言”：标记语言是由一套标记标签组成的。

2、HTML文档——网页

HTML文档也被称为网页

后缀名.html
文件名格式：主文件名.后缀名

创建HTML文档

1）新建一个后缀名为.html的文件
2）添加基本结构：英文状态下!回车
3) 输入HTML：5

3、标记（标签）

构成网页的基本单位

标签：由尖括号括起来的关键词
- 单标签：<标签名 >或 <标签名 />
- 双标签：<开始标签名>[内容]</结束标签名>
元素：标签及内容的整体
属性

<标签名 属性名1="属性值1"  属性名2="属性值2"></标签名>

<后面的第一个单词叫做标签的名字，标签名空格之后的叫做标签的属性。

属性由属性名和属性值组成，属性名和属性值用等号连接
属性值用引号引起来。多个属性之间用空格隔开。

4、HTML注释

注释即对代码的解释和说明，不会被浏览器解析执行
注释内容不会出现在网页中，只是对代码的一个说明
语法

<!-- html注释内容 -->
HTML中的注释以`<!--`开头，以`-->`结束，开始和结束中间为注释内容。

ctrl + /
alt + shift + a: 可以在一行代码的后面进行注释

5、HTML文档的基本结构

<!DOCTYPE html>
<!-- 
    <!doctype> 文件类型定义DTD 
    作用：告诉浏览器该文档的版本信息，让浏览器解析器知道使用哪种语法解析文档
    文档第一代码是HTML5标准网页声明，告知浏览器用HTML5标准解析此网页。
    不是标签，是声明语句
    必须写在HTML文档的第一行
   
-->
<html lang="en">
<!-- 
 网页的根元素 
 定义整个HTML文档，包含head和body

  lang属性
- 作用：定义当前文档显示文字的语言
- 语法：lang=“en”
  (lang是language的简写)
- 取值:
  en定义语言为英语
  zh-CN定义语言为中文   -->

<head>
    <!--
网页的头部信息 其内容不会显示在网页中
定义文档的头部，包含文档的标题（title），可以包含文档脚本（script），样式（style），meta信息以及更多的其他信息。
-->
    <meta charset="UTF-8">
    <!-- 
文档字符集
字符集(Character set)是多个字符的集合，便于计算机识别和存储各种文字。
在<head>标签内,通过<meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。
            charset属性:设置编码方式
            UTF-8：万国码，通用性较好
(2)常用的字符集
- UTF-8被称为万国码，包含全世界所有国家需要用到的字符
- GB2312简单中文，包括6763个汉字
- GBK包含全部中文字符，是GB2312的扩展，加入对繁体字的支持，兼容GB2312
- BIG5繁体中文，港澳台等用
        -->
    <title>标题</title>
    <!--
网页标题
添加到收藏夹时的标题显示在搜索引擎结果中的页面标题。
-->
</head>

<body>
    <!-- 网页的主体内容     定义文档的主体，在浏览器窗口中可以看到的所有内容都包含在它内部。-->
    父子关系——嵌套关系
    兄弟关系——并列关系
</body>

</html>

6、常用HTML标签

1）块级标记

div标签搭建网页结构的基本标签——盒子；无语义标签

<div>[内容]</div>
<div> 文字内容</div>
<div>
    <div></div>
</div>

- 特性
    - 宽度默认撑满整个父元素
    - 高度默认由内容撑开
    - 独立成行——垂直布局

    作用：可以用来划分页面的区块，里面嵌套任何的标签

h系列标签：标题标签标题标签中文字大小依次减小，重要程度依次减弱。注意事项：h1标题一个页面中只有一个，h2~h6是可以有多个的。

    <h1>title1</h1>
    <h2>title2</h2>
    <h3>title3</h3>
    <h4>title4</h4>
    <h5>title5</h5>
    <h6>title6</h6>

- 特性
    - 宽度默认撑满整个父元素
    - 高度默认由内容撑开
    - 独立成行——垂直布局
    - 自带外间距
    - 自带加粗效果
    
    应用场景：
    - logo
    - 文章页标题、内容章节标题
    - 产品标题
    - 模块标题等

p标签：段落标记

<p>[文字]</p>

- 特性
    - 宽度默认撑满整个父元素
    - 高度默认由内容撑开
    - 独立成行——垂直布局
    - 自带外间距
    
    应用场景：文章中的段落、页面中的文字块
    
      注意：p标签不能嵌套块级标签，例如：div，p,h1~h6

hr标签：水平分割线块级标记

- 特性
      - 默认自带间距、自带边框 
      
      作用：在页面中显示一条水平线

面试题：

1.五大浏览器及内核

五大浏览器：chrome、safari、Firefox、Opera、IE

1.chrome 谷歌浏览器


内核：webkit、blink

2.Firefox 火狐浏览器

内核：gecko

3.Safari 苹果浏览器


内核：webkit

4.opera 欧朋浏览器

内核：presto  blink

5.IE 浏览器

内核：trident

2. !DOCTYPE html 代码的作用？

文档第一代码是HTML5标准网页声明，告知浏览器用HTML5标准解析此网页。
    不是标签，是声明语句