web前端技术
web前端技术不是指的某一项技术，他是由w3c组织指定一系列技术的集合，主要包括：
1、结构标准：html----页面结构的搭建：（布局和排版）
2、样式标准：css-----页面的样式和外观
3、行为标准：js------页面的行为和特效
html发展历史
标签书写规则
1、标签名称必须放到一对尖括号里面
2、成对出现
3、区分首尾：首标记和尾标记
html1.0-------------93起草了一个草案，纯文本的格式
html2.0------------
html3.0------------过渡版本
html4.0------------xhtml1.0------规避之前版本的缺点：语法松散，不规范
html5.0-----------应该是未来的一个发展趋势
==学习版本：xhtml1.0==
网页基本结构
html-----整个网页（人）-------作用：一个网页
head----网页头部（人的头部）------作用：承载的是给浏览器看的信息，默认不可见
body----网页主体（人的身体）-----作用：承载所有给用户看的信息
Mate标签的补充
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
上面代表如果是用ie打开的当前页面，那么就使用最新的ie版本打开此页面。
SEO优化的设置:
<meta name="keywords" content="UI设计,html5,css2,css3,js">
<meta name="description" content="麦壳UI,FE2职位遇见更棒的你。" >
Base标签
可以让当前页面中的所有的a标签都拥有相同的属性，比如targent属性。
<base target="_blank">
title------网页标题（人的脸部）-----作用：网页名称
Link标签的常见用法
1.引入DNS预先解析
dns预解析(了解)
<link rel="dns-prefetch" href="http://mimg.127.net">
2.引入网站icon图标：
<link rel="shortcut icon" href="http://www.126.com/favicon.ico" />
3.引入css样式，【后面讲】
<link rel="stylesheet" href="css/bg.css">
浏览器
兼容目标：ie6-9；火狐；谷歌
浏览器编码：
utf-8：国际编码；集成了各个国家已经被认证的语言字体；
gb2312和gbk：国家码：中文汉字和英文；
标签的作用：
1、选中目标
2、设置属性
标签属性的规则：
键值对：color=”red”；k=”v” k=”v”
键值对之间用空格隔开
<font>:设置文字属性的标签
文字三属性：
1、字体：face
2、字号：size
3、颜色：color
键值对练习
宽度：width=”500”
高度：height=”300”
对齐方式：align=”left|center|right”
字体：face=”黑体”
字号：size=”7”
颜色：color=”red”
body属性
背景色：bgcolor=””
背景图：background=”图片路径”
小常识：背景图和背景色共存的时候，背景图在上，背景颜色在下。
BUI标签----无属性标签
b：加粗
u：下划线
i：倾斜
H1标题标签
标注当前页面中的文档最重要的核心主题的文本
H1到 h6标签，相对于当前文档的重要性依次降低。注意h1标签在整个页面中最多一次（当然可以超过，但是不利于搜索SEO）。
H2以后的这些标签可以在一个页面中有多个，但是不要滥用，滥用会导致网页的SEO受影响，搜索引擎会认为我们作弊。
H1 到H6 标签不是用于 字体大小的样式设置，关键是文档内容的文字的重要性的体现，html是定义文档内容的，而样式由后面我们学的css来设定。
案例：新闻
h标记：align属性（left|center|right）
浏览器只认识标签语言，不认识任何的回车和换行、空格
空格：
插入图像
标签：img；单标记；有一个原则性属性：src=”图片路径”；
img插入的图像是在页面里面真真实实存在，是占位的；
img属性：
边框：border=”3”
宽度：width=”600”
高度：height=”200”
提示文本：title=”这是一张蒲公英图片”
替换文本：alt=“蒲公英图片不存在”
img相关知识点：被拉伸效果做法：同时设置宽高；等比缩放：只需任意设置一个宽度或者高度
Alt：图片不显示的时候，会显示alt属性的文本
Title：对网站的seo有很大的影响。当鼠标移上去的时候，图片显示的tip提示文本内容。
图片的选择
jpg
色彩还原高，适合复杂颜色图片，比如banner
gif
色彩效果最低，支持透明，支持动画，适合颜色比较少，不适合渐变色。
png
PNG的优点是，清晰，无损压缩，压缩比率很高，可渐变透明，具备几乎所有GIF的优点；缺点是不如JPG的颜色丰富，同样的图片体积也比JPG略大。
PNG有着另一个优点，那就是逐次逼近显示(progressive display)：传输图像文件的同时，可以先把整个轮廓显示出来，然后逐步显示图像的细节，即先显示低分辨率显示图像，从模糊到清晰，然后逐步提高它的分辨率。这是一个很好的用户体验。
总结：
gif和png基本差不多，色彩比较少的直接gif，如果图片动画用gif。对色彩要求高的用jpg。
相对路径
1、同级查找：图片和html在同一个根目录里面
2、下级查找：只需要写出图片所在的文件夹/图片名称；
例如：src=”images/pic00.jpg”
3、上级查找：只需要写../(返回上一级)图片名称；
例如：src=”../pic.jpg”
拓展：既有上级又有下级
例如：src=”../../images/pic00.jpg”
Span标签
Span标签定义文档中的一小节文本。语义不强。
Span标签可以跟其他的span标签共用一行。
Em标签
em标签是局部的文本的 加强语气，或者是文本的强调的作用。
Em标签可以会改变局部的文档的语义。
我更喜欢<em>小狗</em>和小猫咪。
Strong标签
是 针对整个文档而言，进行一个加强语气的作用。例如：一篇文章中最重要的主题思想或者段落用strong标签进行包裹。
Sub和sup标签
Del标签
知识点：凡是需要选中内容标签都是双标记，不需要选中内容的都是单标记
URL协议
平时我们写的 网址就是 url地址。
Url协议就是 规定 url地址的格式。
协议规定格式：协议名称:// 域名（ip地址):80/路径/文件a.htm
scheme - 定义因特网服务的类型。最常见的类型是 http, https,ftp
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3school.com.cn
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称
Demo：
http://news.sina.com.cn/c/zg/2015-10-27/doc-ifxizwsm2427861.shtml
http协议， 域名： news.sina.com.cn
服务器上： /c/zg/2015-10-27/路径下面的 ：doc-ifxizwsm2427861.shtml
URL编码
为什么要有URL编码呢？
如果我写的一==个中文的网页要在 阿拉伯国家的电脑上进行显示==。
中文字符在阿拉伯国家的电脑上会正常显示吗？
Url在线编码的工具：http://tool.chinaz.com/
列表
无序列表：比较常用
整体管理，它一种思想，涉及计算机方方面面，很有意义。
结构
ul嵌套li，ul标记无序列表整体，li列表的某一项。
li列表项前的符号叫做列表样式或者项目符号
disc：圆点，默认值 circle：空心圈。 square：矩形块。
超链接
a 标记
双标记，它有一个原则性属性：href=”路径/url”
==超链接默认样式：蓝色并且有下划线==
主要包括：文字链接、图片链接
文字链接：
链接线上网址
链接到本地文件：href=”相对路径查找到的文件名”
弹出新窗口打开文件：href=“”，多加了一个属性：
target=”_blank”
假链接：href=”#” 跳转到当前页面（回到页头）
空链接：href=”javascrip:void(0)” 不做跳转只保留a的样式（常用）
图片链接：href路径和文字链接一样，把文字替换成图片
有序列表
ol嵌套li，ol有序列表整体，li表示列表项，同时可以用type来设置项目符号
项目列表（自定义列表）
项目列表和有序、无序列表迥然不同，
结构：
dl嵌套dt和dd，dl表示项目列表的整体，dt表示项目（项目名称），
dd表示项目详情
项目列表可以被应用在图文混排效果
==dl里面只能包含dt和dd，dt和dd里面可以放任何标签==
拓展使用方法：
1.dl里面可以同时存在多对dt和dd
2.dl里面可以同时存在一个dt和多个dd
表格
它引领了一个时代，可以用做布局，但现在用div布局
结构：
table嵌套tr，tr嵌套td；table表示表格整体，
tr表示行，td表示单元格
==表格是一个弹性容器，默认情况下尺寸受内容控制==
想要几行设置几个tr，想要几列设置几个td；
表格默认情况下是没有边框线，设置方法：border。
table属性：
边框线：border
宽度：width
高度height
背景色：bgcolor
背景图：background
对齐方式：align
外边距：单元格和单元格之间的距离：cellspacing;设置值为正整数，最小为0
内边距：内容与边框的距离：cellpadding,数值设置于外边距一样
tr属性：是table的孙子级。浏览器解析时会自动加上中间省略tbody.
valign 设置一行中单元格垂直对齐方式
height 高度；(注意无宽度，因为宽度一般由table决定)
align 水平对齐方式；
bgcolor 背景色
td属性
bgcolor 设置行单元格背景颜色；
background 背景图；
align 设置单元格对齐方式
valign 设置单元格垂直对齐方式
width 设置单元格宽度
height 设置单元格高度
表格标签table
快捷键： ctrl+{ 进行左缩进， ctrl+} 进行右缩进
关于表格的合并单元格
Rowspan 行方向上合并单元格
Column 列方向合并单元格
<table border="1">
<thead>
<tr>
<th>姓名</th><th>年龄</th><th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<!-- rowspan：一个单元格占用两行进行显示 -->
<td rowspan="2">张三</td><!-- <td>14</td> -->
<!-- colspan=2 将一行中的 一个单元格 占用两个列进行显示。 -->
<td colspan="2">24</td>
</tr>
<tr>
<!-- <td>89</td> --><td>6</td><td>呵呵</td>
</tr>
</tbody>
</table>
表单form
Form标签，表单的域标签，用于包裹整个表单的内容。表单就是用户提交数据到后台的一个虚拟单子。
表单一般由 文本框、下拉列表、单选、多选、文本域等组成。
属性：
action-------服务器地址，用于指定当前表单 提交的时候指向后台的地址。项目初期不需要指定。
method------设置发送方式，有两个值：get：明文发送；post：密文发送。
表单总结
Form：包裹标签，action：#
表单将标签分为两类：input标签和非input标签
input标签：
文本框：type属性值为text；
密码：type属性值为password；
普通按钮：type属性值为button；
单选框：type属性值为radio；
扩大触发区域：label；
默认选中：checked=”checked”（复选框设置默认选中也是用次方法）
实现单选：为不同input标签设置相同name属性值（name=”sex”）
复选框：type属性值为checkbox。
提交按钮：type属性值为submit，设置默认值用value=”提交“
重置按钮：type属性值为reset
上传文件：type属性值为file
图片按钮：type属性值为image，原则性src属性===图片按钮的路径
非input标签：
下拉菜单：
select嵌套option，select表示下拉菜单整体，option表示下拉菜单的选项。
分组：<optgroup label=”组名称”></optgroup>
默认值：option设置selected=”selected“
分组的情况下：optgroup嵌套option
value值只有在后台有用。Option包裹的内容是显示的选项的文本。例如：
<select name="" id="" multiple>
<option value="1">公历</option>
<option value="2">农历</option>
<option value="2">农历</option>
<option value="2">农历</option>
</select>
Multipe:也是一个单属性。值只有一个multiple。设置了此属性表示select标签表现为 列表标签。否则表示下拉列表标签。
文本域：
textarea，cols设置水平方向宽度、水平显示的列数
rows设置垂直方向高度，垂直方向显示的行数
设置领域：
设置领域：fieldset嵌套legend（领域名称【注册信息】）
fieldset标签没有任何发送数据的功能，只是设置了前台的显示样式。
Lable标签
for属性指向要提供服务的 标签的id值。
Lable直接包裹标签，可以实现点击标签的文字内容，让包裹的表单标签 标签获得焦点。
< label for="txtName">文本框获得焦点< / label >< label>< input type="button" value="普通的按钮" > 选中按钮</label>
