前端基础总结之html 01
1. 起始
1.1 认识网页
网页主要由图片，文字，超链接等元素组成。除了这些元素，网页中还可以包含音频、视频以及Flash等。
1.2 浏览器
查看浏览器的市场占有份额
查看网站： http://tongji.baidu.com/data/browser
什么叫做浏览器内核：
浏览器最核心的部分叫做Rendering Engine ，准确的翻译为渲染引擎。习惯称之为浏览器内核。负责对网页语法的解释，并渲染整个网页。
原来的js引擎也是属于浏览器内核，js引擎的作用主要是执行js获取页面的动态效果。不过后面js引擎独立了出去。
常用浏览器内核：
| 浏览器 | 内核 | 备注 |
|---|---|---|
| IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 |
| firefox | Gecko | 可惜这几年已经没落了，打开速度慢、升级频繁 |
| Safari | webkit | 现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了）。苹果感觉像被别人抢了媳妇，都哭晕再厕所里面了。 |
| chrome（目前最好的） | Chromium/Blink | 在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发 |
| Opera | blink | 现在跟随chrome用blink内核。 |
移动端：
安卓机：使用率最高的是webkit内核，或者是在webkit基础上进行的二次开发
ios：苹果自带的浏览器当时是他们自己的safari
1.3 web标准
为什么会存在：
因为浏览器的渲染引擎不同，所以导致了对同一页面的渲染效果不同。可这并不是我们想看到的，所以我们需要有一个标准进行统一。
web标准的构成
- 结构 对应我们的源码 - > html
- 表现 css
- 行为 js
2. HTML
2.1 初识
html 超文本标记语言，注意它不是一种编程语言
基本骨架：
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
| 标签名 | 定义 | 说明 |
|---|---|---|
| html | HTML标签 | 页面中最大的标签，我们成为 根标签 |
| head | 文档的头部 | 注意在head标签中我们必须要设置的标签是title |
| title | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
| body | 文档的主体 | 元素包含文档的所有内容，页面内容 基本都是放到body里面的 |
文档类型<!DOCTYPE>
用法：
<!DOCTYPE html>
作用：
这个标签主要是告诉浏览器此文档使用了哪种规范，html也有不同的版本
如上，就是在告诉浏览器。此页面使用的是h5。故浏览器会安按照h5的规范进行解析
页面语言lang
<html lang="en"> 指定html 语言种类
最常见的2个：
1. en`义语言为英语
2. zh-CN定义语言为中文
字符集
<meta charset="UTF-8" />
作用：告知计算机此页面是以哪种编码储存在计算机中的。（可能非计算机专业的不太好理解，这样解释所有的东西在计算机存储时，计算机都会按照一定的规则进行编码。最后在计算机的形式只是01 。对应的它也什么样的规则编码它也得按照对应规则进行解码。如果编码方式为gb2312 储存在服务器中，而客户机是*用户其解码方式是英文的格式。那么此页面在其浏览器中便是乱码。）
utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。
- gb2312 简单中文 包括6763个汉字 GUO BIAO
- BIG5 繁体中文 港澳台等用
- GBK包含全部中文字符 是GB2312的扩展，加入对繁体字的支持，兼容GB2312
- UTF-8则基本包含全世界所有国家需要用到的字符
2.2 html元素标签
- 常规标签（双标签）
<标签名> 内容 </标签名> 比如 <body> 我是文字 </body>
- 单标签
<标签名 /> 比如 换行标签 <br />
2.3 html常用标签
1. 排版标签
- 标题标签h
- 段落标签p
- 水平线标签hr
- 换行标签br
- div和span
div和span使我们网页布局中主要的俩个盒子
区别一个为块级元素一个是行内元素
简单来说就是，一行只有一个div却可以有多个span
2. 文本格式化标签
在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
推荐使用：
| 标签 | 显示 |
|---|---|
| strong | 文字粗体 |
| em | 文字斜体 |
| del | 文字删除线 |
| ins | 文字下滑线 |
3. 重要标签
图像img
语法：
<img src="图像URL" />
重要属性：
src：图像地址
alt：图像不能显示时显示文本 eg：alt="这是一张图"
title：鼠标悬停在图像时显示的文本 eg：title="这是一张图"
width：宽，单位px
height： 高，单位px
border： 图像边框宽度，单位数字 eg：border=1;
链接标签a
语法：
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href:指定链接的url地址
target: 指定页面的打开方式其取值有_self和_blank两种，其中_self为默认值，__blank为在新窗口中打开方式。
扩展：锚点
通过创建锚点链接，达到快速定义。eg：目录
语法使用：
1. 使用相应的id名标注跳转目标的位置。 (找目标)
<h3 id="two">第2集</h3>
2. 使用<a href="#id名">链接文本</a>创建链接文本（被点击的） （拉关系） 我也有一个姓毕的姥爷..
<a href="#two">
4. 特殊字符
一些特殊的符号，我们再html 里面很难或者 不方便直接 使用， 我们此时可以使用下面的替代代码。
博文脑图：
下一篇： webpack使用图片配置