【## 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、标记（标签）构成网页的基本单位- 标签：由尖括号括起来的关键词 - 单标签：<标签名 >或 <标签名 /> - 双标签：``<开始标签名>[内容]</结束标签名>``- 元素：标签及内容的整体- 属性```html<标签名属性名1="属性值1" 属性名2="属性值2"></标签名>```<后面的第一个单词叫做标签的名字，标签名空格之后的叫做标签的属性。

* 属性由属性名和属性值组成，属性名和属性值用等号连接

* 属性值用引号引起来。多个属性之间用空格隔开。

* tab可以进行缩进，shift+tab取消缩进。

## 4、HTML注释

* 注释即对代码的解释和说明，不会被浏览器解析执行

* 注释内容不会出现在网页中，只是对代码的一个说明

* 语法```htmlHTML中的注释以``结束，开始和结束中间为注释内容。```* ctrl + / * alt + shift + a: 可以在一行代码的后面进行注释

## 5、HTML文档的基本结构```html<!DOCTYPE html><html lang="en"><!-- 网页的根元素定义整个HTML文档，包含head和body lang属性

- 作用：定义当前文档显示文字的语言- 语法：lang=“en” (lang是language的简写)- 取值: en定义语言为英语 zh-CN定义语言为中文 --><head>  <meta charset="UTF-8">  <title>标题</title> </head><body>  父子关系——嵌套关系兄弟关系——并列关系</body></html>```

## 6、常用HTML标签### 1）块级标记- div标签搭建网页结构的基本标签——盒子；无语义标签```<div>[内容]</div><div> 文字内容</div><div> <div></div></div>``````html

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

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

- h系列标签：标题标签标题标签中文字大小依次减小，重要程度依次减弱。

注意事项：h1标题一个页面中只有一个，h2~h6是可以有多个的。``` <h1>title1</h1> <h2>title2</h2> <h3>title3</h3> <h4>title4</h4> <h5>title5</h5> <h6>title6</h6>``````

html- 特性 - 宽度默认撑满整个父元素 - 高度默认由内容撑开 - 独立成行——垂直布局 - 自带外间距 - 自带加粗效果

应用场景： - logo - 文章页标题、内容章节标题 - 产品标题 - 模块标题等```

- p标签：段落标记```<p>[文字]</p>``````html

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

应用场景：文章中的段落、页面中的文字块

注意：p标签不能嵌套块级标签，例如：div，p,h1~h6```- hr标签：水平分割线块级标记 ```html

- 特性 - 默认自带间距、自带边框

作用：在页面中显示一条水平线 ```

- 其他 - br标签：强制换行 ``` <br > | <br />

应用场景:用于强行换行 > 不参与分类，不能设置其他样式 ```

### 2）行级标记#### 文本格式化标签

- span标签:无语义标签，用于区分样式

* 没有实际的语义，可以理解为一个小盒子，里面一般装着一个或几个文本内容

* 应用场景：控制局部文本的样式

- b标签：一个实体标签，它里面包围的文本显示粗体效果

- strong标签：一个语义标签，强调语气，它里面包围的文本显示粗体效果

- i标签：它里面包围的文本显示斜体效果

- em标签：一个语义标签，强调语气，它里面包围的文本显示斜体效果

- del标签：删除线

- sup标签：上标

- sub标签：下标

- 特性

- 宽度默认由内容撑开

- 高度默认由内容撑开

- 默认横向显示

——水平布局，一行排不下，自动折行 - 换行和空格会被解析

#### a标签--超链接标签```html  <a href="https://www.baidu.com/">百度</a>  <a href="./摩洛哥/moluoge.html" target="_self">本地文件1</a>  <a href="#">空链接</a>  <a href="javascript:" title="我是伪链接">伪链接</a>  <a href="https://www.baidu.com/" title="百度">百度title</a> <!-- a:超链接标签 href:跳转的路径；网址，本地文件，空链接（#占位，跳转到当前页的顶部），伪链接（href="javascript:"假链接，不跳转的）

title:提示信息的作用 target:被链接文档在哪里显示

1.target='_self' 在当前窗口跳转,默认值 2.target='_blank'在新窗口跳转语法： <a href="">内容</a>

特性：

1.宽度默认由内容撑开

2.高度默认由内容撑开

3.默认横向显示，水平布局，一行排不下，自动折行

4.换行和空格会被解析

5.自带文字颜色

6.自带下划线

7.鼠标指针的形状为手型

8.去掉a标签下划线text-decoration: none; 利用锚点来跳转指定锚点处定义锚点 <div id='锚点名称'></div> 引用锚点 <a href="#锚点名称">内容</a> -->  <a href="">点击跳转到顶部没有#</a>```

### 3）行内块级标记img图像标签```html  <img src="https://img0.baidu.com/it/u=2409410196,1796254698&fm=26&fmt=auto&gp=0.jpg" alt="">  <img src="C:\Users\Administrator\Desktop\1.jpg" alt="">  <img src="./images/2.jpg" alt=""> <img src="./images/3.gif" alt="">  <img src="./images/4.jpg" alt="图片4"> <img src="./images/44.jpg" alt="图片4"> <img src="./images/444.jpg" alt="">  <img src="./images/1.jpg" alt="" title="打架" width="300px" height="200px"> img标签语法：<img src="" alt=""> src:图片的路径 ../../表示上上级目录 alt:作用:指定替换文本,默认不显示，当图像不能正常显示时，显示该文字对图像进行替换,有利于用户体验 title:提示信息的作用,鼠标悬停在图片时显示提示信息 width：宽度 height:高度注意：值可以不带单位默认px，只指定宽或高属性其中一个，另一个按照原比例等比缩放

特性：

1.默认横向显示，水平布局，一行排不下，自动折行

2.换行和空格会被解析

3.可以设置宽高 ```

## 四、路径###

1、绝对路径- 带着协议的完整的路径 https://www.baidu.com/- 盘符下的某个路径 E:\1_1.jpg###

2、相对路径- ./ 表示当前目录一个点（.）后面跟一个斜杠表示当前目录也就是当前文件所在目录。可以省略的- ../ 表示上一级目录两个点（.）后跟一个斜杠表示前文件所在目录的上一级目录。- ../../表示上上级目录- 文件夹名/ 表示下一级目录

**注意:**在链接到同一网站内的其他位置时，应尽可能使用相对链接。链接到另一个网站时，需要使用绝对链接。

【## 1、浏览器及内核-】相关推荐

java二次开发浏览器内核_常见的五大浏览器的内核
首先我们理解一下什么是内核: 英文叫做:Rendering Engine,中文翻译很多,排版引擎.解释引擎.渲染引擎,现在流行称为浏览器内核. Rendering Engine,顾名思义,就是用来渲染 ...
浏览器的内核及版本的判断
通过jquery 判断浏览器的内核及版本号<script type="text/javascript">$(function () {if ($.browser.msi ...
getelementsbyname谷歌浏览器兼容_常用的浏览器内核有哪些？常用浏览器及其内核介绍...
大家常用的浏览器内核有哪些?常用浏览器及其内核介绍如下: 1.360浏览器:Chrome内核和IE内核. 2.百度浏览器:IE和Webkit双内核. 3.QQ浏览器:Chromium内核+IE双内核. ...
C#开发浏览器谷歌内核
C#开发浏览器谷歌内核有什么问题,评论区留言,俺会不定时的回复你的下载地址:见尾页 [实例简介] 亲测可用首先,这一个国外下载一个c#开发谷歌内核浏览器源码为什么用这个,而不用VS自带的webBr ...
QQ浏览器X5内核问题汇总
23 September 2015 重要更新,X5内核即将更新为Blink内核,到时候下面的这些问题将全部被修复. X5内核开发团队也给开发者们提供了不少指引,推荐关注: http://x5.tenc ...
QQ浏览器x5内核的兼容性问题
X5内核是腾讯基于优秀开源Webkit[1] 深度优化的浏览器渲染引擎,搭载在最新一代的手机QQ浏览器上[2] ,更快,更便捷. 2014年9月23日,腾讯正式宣布开放业内首个浏览服务开放平台,向AP ...
360浏览器切换内核数据丢失
360浏览器切换内核数据丢失场景: 360浏览器兼容模式与极速模式切换时 localStorage数据丢失切换内核相当于切换浏览器,localStorage数据会被清除 sessionStorag ...
五大主流浏览器及其内核简要介绍
主流浏览器及其内核一.浏览器 1.什么是浏览器? 2.市面上的浏览器有哪些? 3.浏览器的组成部分二.主流浏览器 1.浏览器的最主要的两块? 2.什么叫主流浏览器? 3.市面上的主流浏览器有哪些? ...
各种浏览器的内核是什么
一.Trident内核代表产品Internet Explorer,又称其为IE内核.Trident(又称为MSHTML),是微软开发的一种排版引擎.使用Trident渲染引擎的浏览器包括:IE.傲游. ...
QQ浏览器X5内核问题汇总转
常常被人问及微信中使用的X5内核的问题,其实我也不是很清楚,只知道它是基于android 4.2的webkit,版本号是webkit 534.今天正好从X5团队拿到了一份问题汇总,梳理下发出来,给各位 ...

【## 1、浏览器及内核-】

【## 1、浏览器及内核-】相关推荐

最新文章

热门文章