HTML

一， web前端标准

1. 结构标签----html
2. 样式标准,美化----css
3. 行为标准---js

二，专业名词解释

1，web也叫www，指代的就是万维网

2，http协议，就是在输入网址的时候，默认给我们添加的一段代码，这个代码的意思是超文本传输协议

3，多个网页（图片、文字、链接.....）组成一个网站

4，网页在浏览器中运行（解析）

三，五大浏览器厂商

1、Ie
2、谷歌
3、火狐
4、欧朋
5、苹果
注意：除了这五个浏览器之外的都没有自己的技术，都是使用ie或谷歌的技术，更改了一套皮肤而已。
测试的细节：作为测试人员，必须测试ie、谷歌、火狐，欧朋占有率低，苹果和谷歌最终的效果很相似；除非用户要求

四，HMTL

1）HTML基本定义

html 是单词 HyperText Markup Language 的缩写，中文称之为超文本标记语言。其中的超指的就是超链接， 在没有HTML之前，互联网上的信息传播都是文字，而 HTML 可以传输除了纯文字之外的 图片、声音、视频等内容。

2）HTML 网页骨架定义

​网页的本质就是一个 HTML 文件，经过浏览器解析之后展示给用户。而所有的网页都会有一部分相同且固定的结构，这部分内容我们就称之为网页骨架

3）HTML 网页骨架内容

注意：

1，DocTYPE  html  就是 document type html  用来申明当前的文档类型是 html 
2，html  是网页当中最大的标签，我们称之为根标签
3，head 称之为网页的头部，它里面的内容主要用来定义网页标签 及 给浏览器查看的一些信息
4，<meta charset=utf-8用来定义网页的编码标准
5，title 称之为网页标题标签 ，它里的内容会显示在浏览器的标签页上
6，body 称之为网页主体标签，它里面的内容都会显示在浏览器的白色窗口区域【网页里展示的内容都会写在body标签里】

五，编码工具Hbuilder 工具介绍

编辑器
文本编辑器 ：
– Notepad++(免费)
– Sublime(收费)

IDE（集成开发工具） ：
– DreamWeaver（收费）
– WebStorm（收费）
– Hbuilder（免费）

Hbuilder 是由 Dcloud 公司推的一款支持 HTML5 的 web 开发 IDE ，本质上就是一款用来书写HTML 的代码编辑器，需要注意的是 能够用来编写 HTML 代码的编辑器有很多种，Hbuilder 只是其中的一款

六，Hbuilder 安装

1，Hbuilder 是一款免安装软件，可以在官网上下载相应的版本
2，将压缩包解压后 直接放置到自已习惯的软件安装目录下
3，将启动项发送到桌面生成快捷方式
官网下载地址：http://www.dcloud.io/
现在下载下来是Hbuilder X

七，HTML 标签和语法

1，HTML 是超文本标记语言，当前主要被用来制作网页。在这个过程中我们可以将 网页比做我们认知当中的 “文章” ，而 “文章”都是我们通过汉语当中的 汉字 来书写的，所以在 HTML 这门标记语言中也会存在着一些类似于 汉语中 文字的符号，这些符号我们就称之为标签，即我们要学习的 HTML 标签

2，HTML 做为一门语言，那么就和汉语一样 需要遵循一定的规则才能正确使用。而这种规则我们就称之为 HTML 语法，在我们使用 HTML 标签书写网页的时候必须遵循这些语法

八，HTML 标签分类及书写规则

1）HTML 标签被人为定义分为 单标签 和 双标签
2）单标签书写规则：<单标签名称 />
3）双标签书写规则: <双标签名称></双标签名称>
4）严格的HTML 语法要求，无论是 单标签还是双标签都必须要正确关闭，单标签通过 / 关闭，双标签通过 /标签名 关闭
5）HTML 标签可以嵌套使用，但是不能出现交叉嵌套现象

正确语法：
	<双标签名1>
    	<双标签名2></双标签名2>
	</双标签名1>

错误语法：
	<双标签名1><双标签名2></双标签名1></双标签名2>

九，HTML 内容换行及空格

1，在 HTML 源代码编写格式中，手动输入换行 在浏览器上是不会有效果的。

2，在 HTML 源代码中手动多个空格 在浏览器上只会显示一个空格的效果

3，在 HTML 中想要实现换行可以通过定义单标签 br .语法是 <br /> ，
  想要添加空格可以通过实体符号 &nbsp;如果采用的是 utf8 编码 ，那么三个 &nbsp;相当于一个汉字
  实际操作中程序员都是使用CSS来实现样式效果的

4，通过上述的现象我们可以看出在 HTML 中如果想要实现某个效果，就必须依赖 HTML 当中的一些标签定义

十，标签

1，标题标签

在 HTML 中定义了一组专门用表示网页标题的标签 ，从h1-h6 共计 六个 标签

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
依次缩小，没有h7

2，段落标签

和标题不同的地方大于 HTML 中定义了六种标题，而段落只有一个标签 ，标签名是 p ，这是双标签

<p>段落内容</p>

3，文字标签

文字标签有很多，但是在书写网页的时候关于文字的外在样式我们一般通过 CSS 来进行设置，下面会分二组列出一些文字标签

弱语义：
1）<b>文字加粗</b>
2）<s>删除线</s>
3）<i>倾斜</i>

强语义：
1）<strong>文字加粗</strong>
2）<del>删除线</del>
3）<em>倾斜文字</em>

4，常用布局标签

1， div 和 span 是 HTML 当中很常用的二个标签。对于 div 来说我们可以认为它就表示一个大盒子。在它里面可以嵌套很多其它的小盒子，一行只允许存在一个

2， span 在语义上就是一个小盒子，一般用来存放一些文字内容等

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

<div></div>
<span></span>

5，img标签

在 HTML 当中定义了一个专门用于像网页中插入图片的标签，名称是 img 它是一个单标签。可以通过 img 标签身的 src 属性来插入图片。

<img src="04.jpeg" />

6，标签属性

1，标签可以具有属性，属性名与属性值之间用 单等号 进行连接。 属性名=属性值，这个格式我们也称之为 键值对，属性值就是键名 ，属性值就是键值

2，键值对与标签名之间需要用空格隔开，例如 src 与 img 之间的空格

3，一个标签也可以具有多个属性键值对，多个属性键值对之间也需要用空格隔开 <img 属性名1=“值1” 属性名2=“值2” />

4，属性值一般需要放在引号里，单引或者双引都可以，如果属性值是数字，那么也可以省略引号

7，图片标签常见属性

<img src="路径" title="图片标题" alt="图片提示文字" width="宽度" height="高度" />

1. src 用来指定当前想要引入的图片位置，这个属性值我们也称之为 路径
2. title 属性用来定义图片的标题，它里面的内容会在鼠标悬停到图片上方时显示
3. alt 属性定义图片的提示文字，当图片由于某些原因无法正常加载显示的时候 ，就会显示 alt 里的文字。网页阅读器可以读取此处的文字给视障用户听，增加用户体验
4. width 用来定义图片的宽度，只需要定义数值大小，默认单位是 px
5. height 用来定义图片的高度，规则和width 一样
6. 对于图片来说，如果只设置 width 或者 高度中的某一个值，那么另外的一边就会按着原图宽高比自动缩放

8，标签语义化

在合适的地方使用合理的标签，符合标签语义化的网站，搜索引擎更喜欢（网站的排名更靠前）
http://www.w3school.com.cn/ w3c联盟组织的一些语法规则可以从这里查询到

十一，路径

1，路径基本介绍

定义：在代码中我们可以将路径看做是查找某个资源所 ”走过“ 的路( 一段定位地址 )。
路径分类：
一、绝对路径

一般是以盘符为起点来查找某个资源，或者是一个绝对的网络资源地址，但是不推荐使用，假如以盘符为起点查找，我们不能保证用户电脑的盘符关系与我们的电脑保持一致，如果是绝对的网络地址我们则不能保证该资源永远存且不发生变化

二、相对路径

相对路径我们往往以当前代码所在文件为起点去查找某个资源

2，相对路径分类及使用

1）同级路径：HTML 文件与被查找的图片存放在同一级目录下，二者是 ”兄弟“关系，此时我们只需要在 src 中写入图片名称即可

2）下级路径：HTML 文件与图片不在同级目录，此时要查找的图片被放在了HTML 文件的下级目录中，此时需要通过 / 符号来向下进行查找。

<img src="img/**.jpg" />  下级路径写法，通过 / 来向下进行查找

3）上级路径：仍然以HTML文件做为起点，此时 图片被存放在了 HTML 文件上级目录，这种情况下我们需要使用 …/ 符号来向上进行回退查找

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

<img src="../**.jpg" />

​1 上述的相对路径关系是以图片标签做为举例
2 图片的路径关系适用于所有存在路径的场景当中
3 图片的格式可以存在多种

十二，注释：

注释：<!—这里的html代码都不会被显示-->

十三，超链接标签：

1，定义

1）超链接就是我们平时在网页上见到的点击可以发生页面路转的模块

2）在 HTML 当中定义了专门用来实现 链接的标签，名称叫 a ，是一个双标签

<a href="目标页面地址">点我点我点我啊</a>

1，默认情况下 a 标签中的文字内容显示会带有 下划线和颜色
2，href 属性与 img 标签的 src 属性作用类似，用来指定当前链接点击时要路径到哪里

2，链接相关使用

1）空链接：作用就是定义一个点击时不会发生跳转的链接，一般出现在生产阶段。因为此时还不能确定目标地址所在，具体作用可以将 href 的值设置为 # 或 javascript:；

<a href="#">空链接</a>

三个井号才是完美空链接写法

2）新窗口打开页面：在点击链接跳转到新页面的时候会在一个新的窗口打开此页面，通过 target 属性来完成

<a href="http://itcast.cn" target="_blank">新窗口打开页面</a>	

3，HTML–锚点链接：

作用：跳转到当前页面的某个位置
<a href=”#id”></a>

十四，HTML–表单：

1）表单和表格是完全不同的两种元素，表单是专门处理跟后台有关系的一些工作的一个标签；
2）定义：所有的用户输入的：用户名、账户、密码、邮箱。。。。统一称他们表单数据，
3）表单的作用：
因为前台往往会跟后台发生一些数据的交换和传输，比如传递用户名和密码；
所以现在就需要有一个标签能完成传递数据的功能，它就是表单；

<form></form> 注意：这个东西是一个容器，它表示它内部的所有东西都会被提交给服务器；

4）输入框中的提示文字应该使用placeholder属性替代value属性，得到更好的用户体验
5）注意:此属性属于html5最新属性，ie低版本不识别，但是也不会造成页面的混乱，这种情况下，千万不要提bug，因为有理论依据（渐进增强、优雅降级）；
下图是在ie浏览中，按f12弹出的调试工具，可以修改浏览器的版本

十五，表单解析

1，form:

1）是一个容器，内部可以存放大量的表单元素，同时可以和按钮配合提交表单给服务器。
   <form></form>

2）form有一个必须要设置的属性：
  action：服务器地址
  method：发送方式
  get：明文发送
  post：密文发送

3）所有的表单元素收集上来的数据都是以键值对的形式发送的：k=v 

2，input标签type属性值总结：

type的属性值有以下（注意这些都是值不是属性！）
1）text文本框，默认就是这个值；
2）password，密码框；
3）radio，单选框，单选按钮；（当name值为相同的时候才能保证只能选其一）；
   测试细节：  
   1，点击查看是否实现的单选效果
   2，点击文字查看是否能切换（用户体验的提升）
   3，默认是否有某一个选中状态（根据用户和产品经理的要求来定）
	  	
4）checkbox，多选框；复选可多选；
	测试细节：
	1，点击文字查看是否能切换（用户体验的提升）
	2，默认是否有某一个或多个是选中状态（根据用户和产品经理的要求来定）
	注释：被注释的内容，不会被浏览器解析（打开浏览器查看的时候，不会显示），作用是给程序员自己的提醒的文字。测试细节：在最后一个阶段的测试过程中，必须要求程序员删除所有的注释代码，因为注释代码也会影响页面的打开速度；
5）button;按钮
	普通按钮，需要JS控制才能实现其他效果
6）submit 功能为提交的按钮*提交功能
7）reset 功能为重置的按钮
	点击之后，可以让当前的表单数据恢复到默认状态（不是清空）
	注意：按钮建议设置value属性，此属性在按钮中，表示按钮的提示文字，如果不写，有可能会导致浏览器的兼容性问题；（测试ie、谷歌、火狐提示文字一致即可）
8）下拉菜单的测试细节：
	1、测试数据是否满足用户的要求：顺序、个数
	2、刷新页面的时候的默认选中是哪一个数据
9）文本域测试细节：
	定义：可以多行输入内容的文本框
	1、测试ie、谷歌、火狐浏览器最终的显示大小是否一致
	2、查看文本域右下角是否可以拖拽放大缩小（要求程序员禁止此功能）

10）input标签（表单）：

1，据环境的不同可以变化出不同的颜色； 而input标签是可以根据type属性值的不同可以变化不同的外观和功能；
2，在<input>标签中type是原则性属性必须加；name和value属性是后台人员用的时候必须加的；
3，<input type=“” name=“” value=“”>
其中：name用来标识<input>标签名称 因为很多input之间需要有所区别；
	1）. value则是此<input>提交到服务器上的值（后台人员）
	2）. 设置默认值（前台人员）

11）文本域标记—多行文本框（表单）：

<textarea name=“多行文本框名称” cols=“文本区内的可见宽度” rows=“显示的行数”>
 初始内容
</textarea>文本区内的可见宽度

12）下拉菜单元素（表单）：

<select></select>选择标签，它极其的类似于无序列表；它内部的每个选项用的是
<option></option>就类似与li这个标签可以算是一个无属性的标签，所以比较好记； 他的属性至多需要指定一个name用于传到后台以后加以区分；
     option标签有一个属性，可以将自己设置为当前项；这个属性就是select分组
<select>
    <optgroup label="北京">
              <option>东城区</option><option>西城区</option><option>朝阳区</option>
        </optgroup>
    <optgroup label="上海">
        <option>浦东区</option><option>闵行区</option> <option>虹口区</option>
    </optgroup>
</select>

13）单选框和复选框（表单）：

1，他们使用的都是input标签只是一个格式设置为radio单选，另外一个设置为checkbox复选；
2，如果设置默认情况为已选状态的话都是使用的同一个键值对，即 checked=“checked”
3，单选框：<input type=“radio” name=“sex” value=“nan” /> 

14）input重要属性（表单）：

1）type必填属性；有多重值；
2）name 使标记之间有所区分！并且他的值将扮演表单提交给后台时候的键值对中的键部分；
3）value 值属性可以设置默认值，这个值也可以是用户添加的；
4）maxlength 能填写字符的最大长度；
5）size  定义文本框或者密码框的宽度尺寸

15）按钮（表单）：

1）<input type=“按钮类型(reset[重置表单]、submit[提交表单]、button[普通按钮])” name=“按钮名称” value=“按钮显示文本”/>
2）图片按钮
 <input name="图片按钮名称" type="image" src="图片路径" />
3）提交表单和重置表单都是控制的整个form元素

18）label标签:

1）扩大选择范围；可以包含其他表单元素
例：
<input type="radio" checked="checked“  id=“nan” /><label for=“nan”>男</label>
2）单选框、复选：
	1，单选框必须同时只有一个能被点选（单选）
	2，提示文字也要可以点击切换（单选、复选）
	3，按照需求设置默认选中的状态（单选、复选）
3）下拉菜单：
	1，注意默认选中状态
4）文本域：
	1，不能让用户自己设置右下角的缩放效果
	2，不能设置cols、rows属性，因为浏览器兼容性导致大小不一致，应该由css语法来解决
5）按钮：
	1，提交按钮：提交表单的数据给某个程序
	2，重置按钮：点击之后会让页面恢复到默认状态
	3，普通按钮：js可以让他做其它事情
6）注意：如果想要让按钮实现对应的功能必须把他们放在form标签中！！！