html(1)

一、专业名词解释

1. web也叫www，指代的就是万维网
2. http协议，就是在输入网址的时候，默认给我们添加的一段代码，这个代码的意思是超文本传输协议
3. 多个网页（图片、文字、链接.....）组成一个网站
4. 网页在浏览器中运行（解析）

二、web前端三大标准

1. html   结构标准
2. css    样式标准
3. js     行为标准

三、五大浏览器厂商

1. Ie
2. 谷歌
3. 火狐
4. 欧朋
5. 苹果

注意：除了这五个浏览器之外的都没有自己的技术，都是使用ie或谷歌的技术，更改了一套皮肤而已。

测试的细节：作为测试人员，必须测试ie、谷歌、火狐，欧朋占有率低，苹果和谷歌最终的效果很相似；除非用户要求

 

四、html发展

定义：超文本标记语言

现阶段使用的版本：html5.0和xhtml1.0

 

五、第一个html网页

1、打开hbuilder后，把自己的代码文件夹拖拽到左侧的“项目管理器”下

2、点击鼠标左键选中刚刚拖拽到左侧的文件夹（必须绿了他！）

3、ctrl+n 弹出下拉菜单，选中新建“html文件”

4、在弹出的对话框中修改文件的名字即可，因为版本5.0是默认选中的

5、在title标签的中间，输入内容

6、在body标签的中间输入内容

7、在软件的菜单上找到浏览器的运行按钮，点击后，就可以在指定的浏览器中运行代码

第一行代码代表，当前html文件的版本信息，如果没有详细的指定，就代表html5.0

head中写的内容是网页的头部信息

meta中写的是网页的编码集（必须是utf-8）

title中写的是网页的标题内容

body中写的是网页的主体内容

注意：标签、标记、元素词语都是可以表示尖括号这种语法

六、回车和换行（html的职责）

在html语法中，如果想实现回车和空格效果必须使用代码才能实现

回车-----  <br />   一个回车

空格----       一个空格

注意：html中可以实现一点点的样式效果，但是实际工作场景中，程序员一定使用css来实现的样式效果

七、标题标签

例：<h1>呵呵</h1>

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

八、标签语义化

在合适的地方使用合理的标签，符合标签语义化的网站，搜索引擎更喜欢（网站的排名更靠前）

w3school 在线教程  w3c联盟组织的一些语法规则可以从这里查询到

九、删除线标签

<s>删除线</s>

<del>删除线</del>

以上两个都可以实现删除线效果，但是前者已经逐渐被后者替代；

十、div和span

这两个标签都没有语义！就是放数据的容器；

<div>大盒子 一行只允许存在一个</div>

<span>小盒子 只要一行放得下 就可以存放多个</span>

十一、img图片标签

<img src=”图片的名字” />

解释：图片标签属于单标签，src是设置图片资源的（要显示哪一张图片）

属性名=“属性值” 我们管这种属性名和属性值的组合叫“键值对”也叫“KV对”

width=”宽度值”

height=”高度值”

title=”鼠标悬停后的提示文字”

alt=”1、图片没有加载出来时候的提示文字2、网页阅读器可以读取此处的文字给视障用户听，增加用户体验”

十二、路径

1. 同级路径：以当前文件为基准去找别的文件
2. 下级路径：以当前文件为基准点击文件夹后去找文件
3. 上级路径：以当前文件为基准返回上一级去找文件

注意：以上三条叫相对路径

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