🐻 认识网页

  1. 代码、浏览器渲染、用户看到的网页
  2. 推荐Google浏览器

🐦 常见浏览器介绍

浏览器渲染要通过内核

  • 渲染引擎（主要）和js引擎

五大主流浏览器用的内核

  1. trident（IE内核、Edge）
  2. Gecko（Firefox）开源内核
  3. webkit（Safari）
  4. Chroumium/Bink（Chrome）blink其实是webkit的分支
  5. Presto（Opera）前任，最新的改为blink。

移动端的内核

移动端的浏览器也是用上面的内核，ios主要为webkit，android4.4之前用webkit，之后切换到了chromium，windows phone8系统浏览器内核是trident。

🐌 Web标准

通过以上浏览器的内核不同，我们知道他们工作原理、解析肯定不同，显示就会有差别。

image.png

Web标准的好处

  1. 让Web的发展前景更广阔
  2. 内容能被更广泛的设备访问
  3. 更容易被搜寻引擎搜索
  4. 降低网站流量费用
  5. 使网站更易于维护
  6. 提高页面浏览速度

Web标准构成

Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

  1. 结构标准：用户网页元素进行整理和分类，主要包括XMl和XHTML两部分。
  2. 样式标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
  3. 行为标准：行为是指网页模型的定义及交互的编写，主要包括DOM和EfMAScript两个部分。

理想状态我们的源码: .html .css js
image.png

🐤 Html初识

HTML (英文Hyper TextMarkup Language的缩写)中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。

HTML骨架格式

  1. <HTML>   
  2.   <head>     
  3.       <title></title>
  4.   </head>
  6.   <body>
  7.   </body>
  8. </HTML>
  • html标签:作用所有html中标签的一个根节点。
  • head标签:作用:用于存放: title,meta ,base style,script, link注意在head标签中我们必须要设置的标签是title
  • title标签:作用:让页面拥有一个属于自己的标题。
  • body标签:作用:页面在的主体部分，用于存放所有的html标签: p,h,a,b,u,i,s,em,del,ins, strong.img

image.png

HTML标签分类

双标签

  1. <标签名> 内容 </标签名>

该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“</标签名>” 表示该标签的作用结束，一般称为“结束标签（end tag）”。和开始标签相比，结束标签只是在前面加了一个关闭符“/”。

单标签

  1. <标签名 />

单标签也称空标签，是指用一个标签符号即可完整地描述某个功能的标签。

HTML标签关系

标签的相互关系就分为两种

嵌套关系

  1. <head><title></title></head>

并列关系

  1. <head></head>
  2. <body></body>

倡议： 如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位。如果是并列关系，最好上下对齐。

🐅 文档类型

  1. <!DOCTYPE html>

<!DOCTYPE>标签位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范，必需在开头处使用<!DOCTYPE>标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析。

注意：一些老网站可能用的还是老版本的文档类型比如 XHTML之类的，但是我们学的是HTML 5,而且HTML 5的文档类型兼容很好(向下兼容的原则)，所以大家放心的使用HTML5的文档类型就好了。

🦐 字符集简介

  1. <meta charset="UTF-8">
  1. utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。
  2. gb2312 简单中文 包括6763个汉字
  3. BIG5 繁体中文 港澳台等用
  4. GBK包含全部中文字符 是GB2312的扩展，加入对繁体字的支持，兼容GB2312

UTF-8则包含全世界所有国家需要用到的字符

记住一点，以后我们统统使用UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了。