混合开发的需求越来越强烈，原生开发开始捉襟见村，特别和前端同事调试的时候，有时候不能直接定位是前端的问题还是本地的问题。因为学生时代学的那些前端技能早还给了老师，所以是时候重温一遍了。本文开始当做笔记。希望我们都能成为混合开发大牛，共勉。

html第一天

1. 网页的组成：

文字、图片和超链接等元素构成，还包括了音频、视频等等。

1. 网页的形成：

有W3c机构规定的一系列标签（英文单词）书写而成。

3. 常见的5大浏览器

IE、火狐（Firefox）、谷歌（Chrome）、safari和Operra，统称5大浏览器。

4. Web标准

由于各个浏览器的内核不同，所以我们要遵循W3C组织制定的web标准让所有浏览器最终显示的效果完全一致。

结构标准HTML：页面的基本结构的搭建。
表现标准 CSS：页面的样式美化
行为标准 javascript：实现页面的交互

4. Html介绍

HTML是超文本标记语言，不是编程语言；
用HTML标签来描述网页元素，比如：链接、图片、文字等；
我们需要将所有的标签放在尖括号"<>" 里面。

5. html的基本结构

一对html标签嵌套一对head标签和body标签，head标签嵌套一对title标签，head是给浏览器看的，body是给用户看的。

<html>
      <head>
                <title>标题</tilte>
      </head>
      <body>
              网页主体内容
      </body>
</html>

6. html标签的分类

双标签：由开始标签<开始标签>和结束标签</结束标签>组成；例如：

<html></html>    <body></body>   <head></head>

单标签: 不需要包含内容，直接在开始标签最后面添加一个结束的符号/;例如：

<br /> <hr /> <img src=""/>

7. Html标签之间的关系

父子级的嵌套关系
并列的兄弟关系

8. sublime的使用技巧

使用步骤

需要新建一个项目文件夹；
新建的文件必须放在项目文件夹里面，并且文件后缀必须是.html才能进行后续操作；
快捷生成html架构：输入法是英文输入的时候输入!+tab或者html:5+tab。

使用技巧

新建文档 Ctrl+N
保存 Ctrl+S 保存文件名必须为.html 放大缩小界面文字大小：按住Ctrl键，滚动鼠标滚轮或者Ctrl+加号变大，Ctrl+减号缩小
生成页面骨架：

html:5 按下tab键
！按tab键

浏览页面效果：右键在浏览器中打开.

9. 默认生成的html结构代码解释

<!DOCTYPE html> 告诉浏览器按照HTML5规范解析页面；
常见的页面语言：en 英语 zh-CN中文；
<meta charset="utf-8" />
注意：一般我们考虑到浏览器和操作系统的兼容性问题，目前仍然使用zh-CN属性值。
常用的字符编码：
Gb2312 简体中文
BIG5 繁体中文
GBK 全部中文（包括简体和繁体中文）
UTF-8 全世界所有国家需要用到的字符

10 . 标签语义化的作用

语义化标签让代码结构更清晰，方便代码的阅读和维护，也可以让浏览器或者网络爬虫更好的解析从而分析其中的内容，更好得到优化网站的搜索引擎。

11. 标题标签H

总共分为6个档次，权重依次递减

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

在实际开发的时候h1标签一个页面只能出现一次，并且建议h1里面放网站logo，h2标签在一个页面中建议最多出现两次一般放主标题，h3到h6可以任意使用。

12. 段落标签p

双标签，是用来放一段文字。

13．hr线

<hr />

单标记

14. 浏览器对空格的解析

浏览器默认对空格的解析是解析并且只解析一个空格，不管输入多少个空格都会解析一个。如果想要2个空格：

&nbsp;&nbsp;

15. 浏览器对回车换行的解析

浏览器对回车换行得到解析并且默认解析为一个空格，如果想要实现强制换行，我们需要使用

<br />

强制换行标记。

16. 强制换行

<br />

17. div和span

div大标签，主要用来做网页的布局，独自占一行。 span小标签，也是用来做布局的，但是一般用来放小图标或者特殊效果的文字，一行可以存在多个。

18. 常见的文本修饰标签（小标签）

语义	写法	写法	推荐
加粗	b	strong	strong
倾斜	i	em	em
下划线	u	ins	ins
删除线	s	del	del

19. html标签属性

使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下：

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>

注意：在书写标签属性的时候每一个属性之间要用空格隔开

20. 图片图像标签 img（重点）

img标签是单标签，我们在用img引入图片的时候必须配合原则性属性src属性找到图片对应的路径。

<img src=”图片路径” />

图片标签img的常见属性：

src 属性值 --- url（图像路径）
alt 属性值 --- 替换文本图像不能正常显示的时候替换文本
title属性值 --- 提示文本鼠标移入图片显示提示文本
width属性值 --- 自定义数值设置图片的宽度
height属性值 --- 自定义数值设置图片的高度
border 属性值 --- 自定义数值设置图片的边框宽度

border设置图片的描边，一般不使用，后期会使用css进行设置。
注意：

src属性是必须书写的；
给图片设置宽高的时候我们一般只设置一个宽度或者高度，不能同时设置，因为我们设置一个值的话图片就会等比例缩放，要是设置两个值图片就变形。

21. 超链接a（重点）

双标签

<a href=”文件路径”></a>

Href属性必须要书写，双引号里面是要跳转的目标文件。超链接的链接方式：

外部链接（线上链接）：直接在href=“http://+要访问的网址”，注意http://必须书写；
内部链接：直接在href=“书写html页面名称（相对路径查找）”，注意在书写内部链接的时候要书写清楚页面的路径；内部跳转的是所有的文件必须在一个项目下面；
空链接：如果不知道要链接到什么地方，我们就暂时用#代替即可；
其他链接：我们不仅仅能给文字添加链接，我们还可以给其他的网页元素添加链接，例如：图像、表格、音频、视频等。

新窗口打开链接：target="_blank"

两天学完HTML标签之一