以目前所对接的项目维度分析以下大类

> - 普通常见的PC端网页，电商网站，H5活动页面
> - 带有权限机制的后台管理系统
> - 安卓原生项目
> - IOS原生项目（暂不探讨）
> - Electron桌面.exe项目
> - 嵌入式H5（嵌入安卓，IOS）
> - 原生小程序项目
> - 多平台小程序项目（uniapp项目，taro项目）



项目对接前先首要了解的常识

A. 是否存在鉴权
B. 是否存在跨端交互
C. 是否需要独立进程
D. 接口请求的协议是否一致

前端技术基础「接口对接常见案例」

> 前端常见的调试方式
> - 以浏览器为维度
> - 以Android开发的IDE的维度
> - 以三方代理抓包数据分析的维度



# 1、普通浏览器调试方法

作为前端都知道的调试方法。打开浏览器调试框（此处以谷歌浏览器举例），我们会看到如图的所有检查项目：

![image.png](https://seek.wiki/static/img/677535c07352c1a1566a34c959423302.677535c07352c1a1566a34c959423302.image.png)

> 检查界面
> 其中，Elements为元素检查框，关于文档内容、样式等都可以在进行调试。
> 
> Console控制台常用来显示程序中的打印内容，是最常用的调试方法，也可以直接在此处写js进行程序操作； 另外一个用处是，我们常打开一个控制台快捷进行一些代码验证、演示等。
> 
> Network对网络请求进行调试，所有要通过网络请求的内容都会在此显示，包括js、css文件，图片，http/https请求等，可以查看到请求最终发送的头部参数、地址和返回内容。


![image.png](https://seek.wiki/static/img/6ddbaa3c17589da3662bf704197577b5.6ddbaa3c17589da3662bf704197577b5.image.png)

> 查看https请求的结果
> Application 常用查看cookie信息、本地存储信息以及对iframe的调试。
> 
> Sources 调试框常用来进行程序中的断点调试，常用的方式是在Watch添加要监视的变量，程序步进的时候观察变量变化。与C调试方式基本无异。


![image.png](https://seek.wiki/static/img/740ab1be7904395253581048f505cdf4.740ab1be7904395253581048f505cdf4.image.png)

Sources调试框等


# 2、webview调试方法

## 安卓调试
安卓webview调试使用谷歌的DevTools。在浏览器中输入 chrome://inspect/#devices ，把手机连接上电脑选择调试模式，然后打开相应的app中使用webview的页面，看到如图页面。

> 注意：
> 
> 1、需要debug版本的app，安卓要在webview实例中配置允许调试， WebView.setWebContentsDebuggingEnabled(true);
> 
> 2、由于该功能需要到墙外加载相应的手机调试包，故你需要翻墙才可以实现本方法



![image.png](https://seek.wiki/static/img/46569fae52270fc2a7d0d0e3760cffd5.image.png)

谷歌DevTools界面
点击inspect即可跳出熟悉的页面调试台

webview检查页面
#### ios调试
ios版本的webview调试就比较方便，依靠于safari，不需要翻墙。

> 1、在Safari的偏好设置中选择“高级”，在底下的“在菜单栏中显示开发菜单”打钩。
> 
> 2、在iphone的Safari设置中勾选 “JavaScript”和“web检查器”
> 
> 
![image.png](https://seek.wiki/static/img/282ff7d3cbe6302df07b5158fd2ee509.282ff7d3cbe6302df07b5158fd2ee509.image.png)
> 
> iphone设置
> 
> 3、手机上打开相应的app的webview页面，连接电脑，活动区在Safari时点击“开发”菜单即可看到自己的iphone，选中后看到当前的webview页面地址，打开即可弹出页面调试窗口。

#### vue调试方式
当前vue.js 框架比较火热，除了常用的web调试方法之外，官方也推荐了一款vue专用插件 vue-devtools，安装链接： 

https://github.com/vuejs/vue-devtools

依照文档描述的方法安装即可，不同浏览器有相应的方式安装。

另外如果可以翻墙，可直接在谷歌的拓展程序中搜索安装，十分方便

谷歌拓展工具中搜索vue
vue-devtools可以很便捷地对.vue 组件中定义的变量进行监视，以及vuex、和事件的监视。


![image.png](https://seek.wiki/static/img/4e7a2410ba206d6dae1134516adb31ec.4e7a2410ba206d6dae1134516adb31ec.image.png)



# 3、线上问题调试抓包

### Ios

> 推荐Stream这个软件，简单易用，可以快捷设置HTTPS的证书，简单有效的抓取线上的数据参数以及返回结果，从数据的层面有效验证问题，解决问题

### Android

> 推荐同一局域网的情况下，使用fiddle参数设置，安装证书到安卓手机，开启手机无线代理，同一网络频段电脑抓包，实现参数的抓取，以及断点调试

前端技术基础「项目调试」

> 浏览器常用基础知识汇总



## 一. 浏览器的构成

### 用户界面：
包括地址栏，后退/前进按钮，书签目录等 
### 浏览器引擎：
用来查询和操作渲染引擎的接口 
### 渲染引擎：
用来显示请求的内容，eg.如果请求的内容为html，就负责解析html及 css,并将解析后的结果显示出来 
网络：用来完成网络调用，eg.http请求，有与平台无关的接口，可以在不同平台上工作 
### UI后端 
### Js解释器：
用来解释执行js代码 
### 数据存储：
属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，html5定义了 web database技术，一种轻量级完整的客户端存储技术 

## 二. 浏览器内核的理解
浏览器内核主要分成 两部分：渲染引擎和js引擎 
最开始渲染引擎和js引擎没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只渲染引擎 
### 1.渲染引擎：
负责取得网页的内容（HTML,XML,图像等等），整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核不同对于网页的语法解释会有不同，所以渲染的效果也不相同 
### 2.JS引擎：
解析和执行javascript来实现网页的动态效果 

## 三. 浏览器渲染的过程

简单地说，页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。
1. 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；
2. 浏览器开始载入html代码，发现head标签内有一个link标签引用外部CSS文件；
3. 浏览器又发出CSS文件的请求，服务器返回这个CSS文件；
4. 浏览器继续载入html中body部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；
5. 浏览器在代码中发现一个img标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；
6. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码
7. 浏览器发现了一个包含一行Javascript代码的script标签，赶快运行它
8. Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个div （style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码

## 四. 浏览器兼容问题总结（ie,firefox）

前言：ie兼容性必须要在windows中测，windowXP最高只支持ie8
> if 开发环境不是windows,解决：
> 1.开windows虚拟机 
> 2.将开发环境暂时切换到windows

1. str.trim() ie失效
解决：$.trim(str) 代替str.trim()
2. ie placeholder 失效问题
并且当input的type为password时，有部分解决失效的代码会导致placeholder部分的内容变成密码的黑色圆点
解决：详情解析见/html/ieCompatiable/placeholder.html
3. 设置背景图片大小background-size ie失效
解决：详情见/html/ieCompatiable/backgroundSize.html(给Ie加ie滤镜)
4. firefox的input 有 required属性，此控件自动加一圈粉色边框
解决：
```css
input[required]:invalid, 
input:focus:invalid, 
textarea[required]:invalid, 
textarea:focus:invalid{
 box-shadow: none;
}
```
5. ie中max-width失效（ie中严格要求父元素的宽度是固定的）
解决：详情见/html/ieCompatiable/maxWidth.html 
`(主要是在table加了table-layout:fixed;)`
6. ie中不兼容 `:first-child , :last-child , :nth-child()`
解决：一般情况下给这种列表的ul的宽度加大，或者单独设置这些特殊的个体
7. 所有浏览器 图片默认有间距
解决：img加上float属性（图片是行内属性标签） 详情见/html/special/index.html
8. ie透明度兼容的问题
解决：详情见链接
9. 所有浏览器 高度不适应
解决：详情见/html/ieCompatiable/test.html (给外面的盒子加上border)

## 五. Chrome的扩展、插件和应用：

扩展：chrome://extensions/(扩展可以有很多插件，但是插件不可能包含扩展)
应用：chrome://apps
插件：chrome://plugins

前端技术基础「浏览器知识汇总」

> CSS 指层叠样式表 (Cascading Style Sheets)，是一种用来表现 HTML 文档样式的语言，样式定义如何显示 HTML 元素，是能够真正做到网页表现与结构分离的一种样式设计语言。样式通常存储在样式表中，外部样式表通常存储在 CSS 文件中，多个样式定义可层叠为一。

## CSS 简介

 HTML 标签被设计为用于定义文档内容，也就是文档结构，为了增强代码的可读性，实现网页结构与表现相分离的原则，万维网联盟（W3C），肩负起了 HTML 标准化的使命，并在 HTML4 之外创造出样式（Style）。

 CSS 目前最新版本是 CSS3，相对于传统 HTML 的表现而言，CSS 能够对网页中对象的位置排版进行像素级的精确控制，拥有对网页对象编辑的能力，易于维护和改版，提高页面浏览速度，使用 CSS 布局页面更符合 W3C 标准，他是目前基于文本展示最优秀的表现设计语言。

 CSS 样式表极大地提高了工作效率：样式通常保存在外部的 .css 文件中，通过仅仅编辑一个简单的 CSS 文档，外部样式表有能力同时改变站点中所有页面的布局和外观。
 
 
## CSS 语法
```text
 CSS 规则由两个主要的部分构成：
 选择器，以及一条或多条声明。如下：
 选择器就是需要改变样式的 HTML 元素。
 每条声明由一个属性和一个值组成，属性是设置的样式属性（style attribute），
 每个属性都有一个值，属性和值用冒号分隔。
 CSS 声明总是以分号 ; 结束，声明组以大括号 {...} 括起来。
 为了让 CSS 可读性更强，可以每行只描述一个属性。
 CSS 注释是用来解释代码，并且可以随意编辑，浏览器会忽略它。
 CSS注释以 "/*" 开始，以 "*/" 结束。
```

## 创建 CSS
当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。CSS 创建样式表有三种方法：
 
 内联样式、内部样式、外部样式。
### 1. 内联样式
 内联样式也叫行内样式或者行间样式，即在相关标签内使用样式（style）属性定义。 
 由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。因此需要慎用这种方法，例如当样式仅需要在一个元素上应用一次时，可以使用内联样式。要使用内联样式，需要在相关的标签内使用样式属性定义，style 属性可以包含任何 CSS 属性。
 
### 2. 内部样式
 内部样式也叫内嵌样式，即在文档中创建内嵌的样式表，需要使用style标签在文档头部定义内部样式表。
 当单个文档需要特殊的样式时，就应该使用内部样式表。
 
### 3. 外部样式
 外部样式也叫做外联样式，即使用link标签链接到外部样式表 
 当样式需要应用于很多页面时，外部样式表将是理想的选择，在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用link标签链接到样式表，浏览器会从文件 style.css 中读到样式声明，并根据它来格式化文档。注意：link标签中 rel="stylesheet" type="text/css" 是固定代码格式，不可更改。 
 外部样式表可以在任何文本编辑器中进行编辑，样式文件不能包含任何的 HTML 标签，样式表以 .css 扩展名进行保存。注意：不要在属性值与单位之间留有空格。假如你使用 "margin-left: 20 px" 而不是 "margin-left: 20px" ，那么它在不同的浏览器中可能无法正常工作，导致意向不到的结果。
 
### 4. 样式优先级
 样式优先级，也可以称为层叠次序，即同一个 HTML 元素不止被一个样式定义时，会优先使用哪个样式。一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中： 
 `内联样式 > 内部样式 > 外部样式` 
 内联样式（在 HTML 元素内部）拥有最高的优先权，即优先采用在元素内部定义的样式信息，然后是内部样式表（位于 head标签内部），最后是外部样式表中的样式声明，浏览器中的样式声明（缺省值）同外部样式处于同一层次。 
 优先级的顺序是有一个前提的，即内联样式、内部样式、外部样式表中 CSS 样式是在的相同权值的情况下。
 但是内部样式 > 外部式也有一个前提，即内部样式的位置一定在外部样式的后面。
 
### 5. 多重样式
 样式表允许以多种方式规定样式信息，样式可以规定在单个的 HTML 元素中，或在 HTML 页的head元素中，亦或在一个外部的 CSS 文件中，甚至可以在同一个 HTML 文档内部引用多个外部样式表，但是最终多重样式将被层叠为一个。 
 那就意味着：如果你使用了外部文件的样式，在head中也定义了该样式，那么内部样式会取代外部文件中的样式。
 

## id 和 class 选择器

 如果要给 HTML 元素设置 CSS 样式，则需要在元素中设置 "id" 和 "class" 属性，该属性用作选择器。
### 1. id 选择器
 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，id 属性和身份证一样具有唯一性。HTML元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 "#" 来定义。注意： id 属性不能以数字开头。
### 2. class 选择器
 class 选择器用于描述一组元素的样式，也叫做类选择器，class 选择器有别于 id 选择器，class 可以在多个元素中使用，并且一个元素也可以指定多个类名。class 选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点 "." 号来定义。可以设置所有带有指定 class 的 HTML 元素，也可以指定特定的 HTML 元素使用 class。注意：类名的第一个字符也不能使用数字。
 实例：所有拥有 center 类的 HTML 元素均为居中显示。
### 3. ID 选择器和类（class）选择器的区别
 相同点：
 可以应用于任何元素。
 不同点： 
 　①、ID 选择器只能在文档中使用一次。与类选择器不同，在一个 HTML 文档中，ID 选择器只能使用一次，而且仅一次。而类选择器可以使用多次。 
 　②、可以使用类选择器词列表方法为一个元素同时设置多个样式。在一个 HTML 文档中，可以为一个元素同时设置多个样式，但只可以用类选择器的方法实现，ID 选择器是不可以的，不能使用 ID 词列表，即一个元素可以指定多个类名，如 
 `文本`
 而 ID 只能指定一个。

## CSS 元素选择器

 > 最常见的 CSS 选择器就是元素选择器，即标签选择器，也就是说 HTML 的元素就是最基本的选择器。


 如果使用元素选择器设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 body、h1、p、a，也可以是 html 本身。
 在 W3C 标准中，元素选择器也叫做类型选择器，类型选择器匹配文档中元素类型的名称，类型选择器匹配文档树中该元素类型的每一个实例，也就是如果使用元素选择器，比如 
 ```css 
 h1 { color:red; }
 ``` 
 他会匹配文档中所有的 h1 元素，即页面上所有的 h1 标题都显示为红色。
 
 
 ## CSS 背景

> background 属性用于定义 HTML 元素的背景。
> 定义元素背景效果的 CSS 属性有以下五种：


 1. background-color
 CSS 中，颜色值通常使用以下方式定义： 
 ①：十六进制，如："#ff0000"，类似这样的形式，可以缩写为："#f00"。 
 ②：RGB，如："rgb(255,0,0)"。 
 ③：颜色名称，如："red"。 
 2. background-image
 3. background-repeat
 4. background-position
 5. background-attachment

## CSS 文本格式
### 1、文本颜色
 color 属性被用来设置文字的颜色，可以使用合理的背景颜色和文本颜色搭配，这样有利于提高文本的可读性。
### 2、文本对齐方式
 > text-align 文本排列属性可以用来设置文本的水平对齐方式
 > 文本可以居中或对齐到左或右，两端对齐。
 > 该属性有4个值，默认值为 left，由浏览器决定，把文本排列到左边，即对齐到左。
 > center 则为文本居中，right 为文本对齐到右边。
 
 当 text-align 属性的值设置为 justify 时，则表示文本两端对齐，每一行将被展开为宽度相等，左、右外边距对齐，就像杂志和报纸那样，常应用于书刊杂志排版。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上，然后，调整单词和字母间的间隔，使各行的长度恰好相等。那就是说对于英文这样定义是可以的，但是对于中文两端对齐支持并不是很好。解决办法就是再定义 text-justify 属性，将其值设置为 inter-ideograph，用表意文本来对齐内容，他增加或减少表意字和词间的空格。表意字顾名思义，就是字形有一定表达意思性的文字，汉字属于表意文字，他是文字萌芽时期的产物，是汉语形成历史中最早的一种文字。该属性值的默认值为 auto，让浏览器决定两端对齐算法。
### 3、文本修饰
 text-decoration 属性用来设置或删除文本的修饰。
 从设计角度来讲该属性主要是用来删除超链接的下划线
 
## CSS 字体

> font 属性可用于设置文本字体，定义样式，如加粗，大小等，属于复合属性，也叫做简写属性，可以在一个声明中设置所有字体属性。
> 当使用简写属性时，属性值的顺序依次为：

` font-style --> font-variant --> font-weight --> font-size/line-height --> font-family`


## CSS 链接

 不同的链接可以设置不同的样式，设置链接样式可以用任何 CSS 属性（如 color，background，font 等），链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
 在所有浏览器中，链接的默认外观如下： 
 ①：未被访问的链接带有下划线而且是蓝色的。 
 ②：已被访问的链接带有下划线而且是紫色的。 
 ③：活动链接带有下划线而且是红色的。 
 文本修饰属性 text-decoration:none 可用于删除链接中的下划线。
### 链接的四种状态是：
 1. a:link-正常，未访问过的链接。
 2. a:visited-已访问过的链接。
 3. a:hover-当鼠标滑动到链接上时。
 4. a:active-链接被点击的那一刻。


 当为链接的不同状态设置样式时，必须遵循以下顺序规则：
 ` 1. a:hover必须跟在a:link和a:visited后面。`
 ` 2. a:active必须跟在a:hover后面。`
 在这四种状态中，最常被应用到的状态是 
 `a:hover，:hvoer`
 是一个 CSS 伪类，在鼠标移动到元素上时添加的特殊样式，可用于所有元素，不只是链接，常被用来做鼠标滑过动画。当应用到链接上时，可以使用列表布局导航栏菜单，也叫选项卡，当鼠标移动到链接菜单上时，可以显示特殊的样式。

## CSS 列表

 从某种意义上讲，不是描述性的文本的任何内容都可以认为是列表，比如家谱、人口普查、太阳系，甚至你的所有朋友都可以表示为一个列表或者是列表的列表。由于列表如此多样，这使得列表相当重要，在 HTML 中，有两种类型的列表：
 ①：无序列表 - 列表项标记用特殊图形，默认以小黑点样式显示。 
 ②：有序列表 - 列表项的标记默认以数字样式显示。 
### CSS 列表属性作用如下：
 ①：设置不同的列表项标记。
 ②：设置列表项标记为图像。
 通过 CSS，可以列出进一步的样式，并可用图像作列表项标记。修改列表项标记使用 list-style-type，使用图像作为标记可以利用 list-style-image 属性完成。
 
 
### CSS 表格

使用 CSS 可以大大的提高 HTML 表格的外观。

### CSS 属性选择器

属性选择器可以为具有特定属性的 HTML 元素样式，而不仅仅是 class 和 id。
### 1、属性选择器
 属性选择器使用：[attr] 
### 2、属性和值选择器
 属性选择器使用：[attr=value]
### 3、属性和多个值的选择器
 属性和多个值的选择使用有两种情况：
 属性值用空格分隔使用：[attr~=value]
 属性值用连字符分隔则使用：[attr|=value]
### 4、表单样式
 属性选择器在为不带有 class 或 id 的表单设置样式时特别有用。
 
 
## CSS 组合选择符

 CSS 组合选择符是包括各种简单选择器的组合方式，组合选择符说明了两个选择器直接的关系。
 在 CSS3 中包含了四种组合方式： 
 ①：后代选择器，以空格分隔。 
 ②：子元素选择器，以 > 分隔。 
 ③：相邻兄弟选择器，以 + 分隔。 
 ④：普通兄弟选择器，以 ~ 分隔。 
### 1、后代选则器
 后代选则器又称为包含选择器，可以选择作为某元素后代的元素，并且包括子元素、孙元素、曾孙元素等等。
### 2、子元素选择器
 与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素，不包括孙元素、曾孙元素等等。如果不希望选择任意的后代元素，而是只选择某个元素的子元素，那么就使用子元素选择器。
### 3、相邻兄弟选择器
 相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，就可以使用相邻兄弟选择器。
### 4、普通相邻兄弟选择器
 普通兄弟选择器选取所有指定元素的相邻兄弟元素。
 
## CSS 伪类

 CSS 伪类是用来向一些选择器添加特殊的效果。
 伪类的语法：选择器:伪类{attr:value;}
 CSS 类也可以使用伪类：选择器.class:伪类{attr:value;}
 注意：伪类的名称不区分大小写。
 
## CSS 伪元素

 CSS 伪元素是用来为一些选择器添加特殊的效果。
### 1、before伪元素
 :before 伪元素可以在元素的内容前面插入新内容。
### 2、after伪元素
 :after 伪元素可以在元素的内容之后插入新内容。
 content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容，该属性用于定义元素之前或之后放置的生成内容。默认的，这往往是行内内容，不过该内容创建的框类型可以用 display 属性控制。content 的内容一般可以为以下四种：
 
 > ①、content:"none" 该值是默认值，不插入内容。
 
 > ②、content:"string" 插入文本。
 
 > ③、content:"attr(属性)" 插入标签属性值。
 
 > ④、content:"url(路径)" 使用指定的绝对或相对地址插入一个外部资源，可以是图像，音频，视频或浏览器支持的其他任何资源。


### 3、first-line 伪元素
 first-line 伪元素用于向文本的首行设置特殊样式。
 注意：first-line 伪元素只能用于块级元素，下面的属性可应用于first-line 伪元素： 
 ①、font 
 ②、color 
 ③、background 
 ④、line-height 
 ⑤、clear 
 ⑥、vertical-align 
 ⑦：text-decoration 
 ⑧：text-transform 
 ⑨、letter-spacing 
 ⑩、word-spacing 
### 4、first-letter 伪元素
 :first-letter 伪元素用于向文本的首字母设置特殊样式。
 注意：:first-letter 伪元素只能用于块级元素，下面的属性可应用于 "first-letter" 伪元素： 
 ①、font、color、background、line-height、clear、vertical-align (only if "float" is "none")、text-decoration、text-transform
 `以上8个属性和 :first-line 伪元素相同，除了 letter-spacing 和 word-spacing 之外。` 
 ②、float 
 ③、margin 
 ④：padding 
 ⑤：border 
### 5、伪元素和 CSS 类
 伪元素可以与 CSS 类配合使用。
### 6、多伪元素
 多重伪元素即可以结合多个伪元素来使用。

前端技术基础「css篇」

> 做为前端最基础的知识，这些内容简单，但是不容忽视，没有按照规范书写，往往出现各种异常的问题




## HTML的定义
> HTML，超文本标记语言，写给浏览器的语言，目前网络上应用最广泛的语言。HTML也在不断的更新，最新版本已经出现了HTML5。在HTML5中出现了许多新特性，也遗弃了一些旧元素。我们写好html文件后，在浏览器中打开。主流的浏览器包括IE、Firefox、Chrome、Goole等。
 
 
## HTML标签元素
> HTML元素由开始标签和结束标签组成。
```html
 /
 <h1><h1/>
```
> 虽然现在我们还不知道具体标签代表的意思，但标签一定是这样的格式：有一对开始<>和结束</>。一般标签名推荐用小写。标签具有属性，属性用来表示标签的特征。比如，我们用大小这个属性，来衡量一个苹果。所以，大小可以用来表示苹果的特征。属性时写在标签里面的，而且是开始标签内。


## HTML 的基本结构
结构由网页的头部和网页的身体组成。如下例子：
```html
<html>
 <head>
 <title>这是标题</title>
 </head>
 <body>
 这是内容
 </body>
</html>
```
`
在上面的例子中，第一个标签<html>是告诉浏览器这是html文档的开始。Html文档的最后一个标签是</html>，是告诉浏览器这是html的终止。标签<head></head>之间的文本是头部信息，在<title></title>之间的文本是文档标题，会显示在浏览器的窗口的标题栏。<body></body>之间的文本是正文。
`

## 规范的html页面

`
1、文档声明 - 在<html>前，要写文档声明语句: <!DOCTYPE HTML>，当然也可以用小写表示。文档声明的作用是告诉浏览器该文档遵循html规范。` 
`2、标题 - 一般情况下，我们都会设定html文档的标题。这样的作用是使用户看起来感觉友好。
标签为<title></title>,标签内放标题名称。` 
`3、页面编码 - 编码的种类有多种，但常用的是utf-8和gb2312。utf-8为多国语言编码，gb2312为中文简体编码。对于编码的详细问题，可以浏览博客。设置网页编码的语句为<meta charset= "utf-8" />，是在<head></head>标签内定义的。` 
`4、页面关键字，内容 - 我们可以在文档中设置一些关键词，内容介绍。这样的好处是，当我们的网页发布在网上，用户可以通过在搜索框中输入关键字，找出一些比较符合的网页。这样一来，我们的网页便可以更容易地被别人访问。
`

## html进阶内容

### canvas的认知与使用
### 输入框的各种使用场景与常见问题
### 浏览器调试页面代码
### dom节点的认知