前端开发工具：Hbuilderx
一、web相关名词介绍
1、world、wide、web的简称，www也叫万维网
2、http协议，输入网址的时候，默认添加的一种代码，这个代码就是超文本传输的协议
3、网站就是由多个网页（图片文字链接声音等一种HTML文件）组合而成的集合
4、网页在浏览器上运行（解析）和展示

二、WEB前端三大标准
1、html-结构标准：负责网页结构的搭建
2、css-样式标准/表现标准：负责网页的美化工作
3、js-行为标准：负责网页的行为动作

三、五大浏览器厂商
ie
谷歌
火狐
欧朋
苹果
除了五个之外都使用的谷歌或者ie的技术

测试的细节：
必须测试ie、谷歌、火狐，欧朋占用率低，苹果和谷歌最终的效果很相似，除非用户要求
··········
四、html发展
定义：超文本标记语言
现阶段使用的版本：html5.0和xhtml1.0

五、第一个html文件
1、打开hbuilder，把自己的代码文件夹拖到左侧项目管理器下
2、点击鼠标左键选中刚刚拖拽的
3、ctrl+n弹出下拉菜单，选择新建html
4、弹出的对话框中修改文件名字
5、在title中间输入内容
6、在body标签中间输入内容
7、在软件的菜单上找到浏览器运行按钮，点击选择浏览器运行代码。（也叫解析这个程序）

注意：第一行代码，代表当前html文件版本信息没有特别指定，就是html5.0
head中写的内容是网页的头部信息
meta中写的是网页的编码集，必须是（UTF-8）
Body中写的是网页的主体内容
注意：标签、标记、元素都可以表示尖括号这种语法

六、HTML标签和语法
回车和换行（HTML职责）
在html语法中，如果想实现回车和空格效果必须使用代码才能实现
回车
一个回车
空格   一个空格
注意：html中可以实现一点点的样式和效果，但是实际工作场景中，程序员一定使用css来实现样式效果

七、标题标签
例子：

呵呵

解释：被标题标签包裹的文字，会当作单独占一行标题来使用，文字会变粗变大
h标签的家族中只有1到6，特点就是依次缩小（不要臆造标签没有h7）

八、标签的语义化：合适的地方使用合适的标签，符合标签语义化的网站，搜索引擎更喜欢（网站的排名更靠前 ）
段落标签p

九、一些标签，主要记住删除线标签
b加粗 u下划线 i倾斜
strong加粗 em倾斜···强调语义
记住：代表删除，电商网站原价等 s del
（s逐渐被抛弃了,www.w3school.com）w3c联盟组织的一些语法规则可以从这里查询到

十、div和span
没有任何语气的标签，就是放数据的容器
div一行只允许存放一个
span只要放得下，一行可以放多个

十一、img加载图片

图片标签属于单标签 src：source是设置图片资源的（要显示哪一张图片）
属性名=“属性值”，我们管这种属性名和属性值的组合叫“键值对”，也叫“KV对”
width=“宽度值”
height=“高度值”
title=“鼠标悬停后的提示文字”
alt=“1、图片没有加载出来时候的提示文字2、网页阅读器可以读取此处的文字给视障用户听，增加用户体验”

十二、路径
1、同级路径：以当前文件为基准去找别的文件
2、下级路径：以当前文件为基准，点击文件夹后去找文件
3、上级路径：以当前文件为基准，返回上一级去找文件…/
注意：以上叫相对路径

绝对路径：把文件在电脑的所有路径地址拿过来的一种书写方式，这种不会出现在前端代码中