2022.9.15

一.浏览器介绍

市面上主流浏览器由5个分别是chrome、safari、Firefox、Opera、IE

  1.chrome 谷歌浏览器        内核：webkit、blink

  2.Firefox 火狐浏览器          内核：gecko

  3.Safari 苹果浏览器          内核：webkit

  4.opera 欧朋浏览器          内核：presto  blink

  5.IE 浏览器        内核：trident

其他大部分国产的浏览器（qq浏览器，uc浏览器，猎豹浏览器，360浏览器）基本上是在IE浏览器的内核上进行的二次开发,现在国内市场上有许多双内核的浏览器，使用的是trident,webkit内核.

页面的三大组成部分分为:结构.表现.行为

结构：给页面搭建基本的框架结构。 html ，类比于建房子的时候要搭的地基跟钢筋。

表现：页面的美化，装饰。 css 相当于给房子加背景和家具的排列布局。

 行为：页面的轮播图，返回顶部... javascript 相当于房子加灯的开关。

二.HTML介绍

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

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

三.常用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标签：水平分割线 块级标记

  - 特性

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

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