前端1
前端的三大语言：
HTML： 超文本编辑语言 组成网页的结构，以标签的形式
CSS： 层级样式表 美化网页
Javascript： 脚本语言 完成与用户的交互： 1，用户操作 2，程序响应 3，返回结果
HTML：标签：
单标签和双标签
<meta /> 设置编码 关键字 适配手机页面等
<br /> 换行
<hr /> 水平线/垂直线 width size
<img /> 图片标签 src 路径 绝对地址和相对地址
alt 图片代替文字 当图片无法显示时，提示
提供给搜索引擎抓取
title 提示
双标签： <html> 开始标签
</html> 结束标签 限定了文档的范围
<head></head> 头部信息标签，主要放置与浏览器沟通的数据例如：设定编码，标题，关键字，资源引入等等。
<title></title> 网页标题标签
<body></body> 内容标签，将网页所要显示的内容放置在其中
<hn></hn> n<=6 标题标签
文字标签
<b></b> 加粗
<i></i> 斜体
<u></u> 下划线
s 删除线
strong 加粗
span 空白的文字标签
sup 上标注标签
sub 下标注标签
音频，视频
<audio></audio> 音频标签 src 地址
controls 显示操作界面
loop 循环播放
autoplay 加载完成后自动播放 Google不支持
<video></video> 视频标签 同样具有上述四个属性
width 和 height 调节播放界面的宽度和高度
<a></a> 超链接标签
href 地址
title 提示
1.外部链接 http://www.baidu.com
2.内部连接 Demo01.html
3.邮件链接
mailto://收件人地址?subject=主题&cc=抄送人&body=内容&bcc=暗抄送人
4.书签链接 定义锚点 <a name="id"></a>
跳转锚点 <a href="#id"></a>
标签：块元素标签和行内元素标签
区别： 块元素标签默认独占一行
块元素： <hn><hn>
行内元素： 文字标签 <a></a>
**************************************************************************************************
Day02：
1.图像热区链接
2.表格，表单标签
3.表单中的标签
4.CSS 使用，语法
5.选择器，优先级
6.标签的样式
1，图像热区链接：
1，设定大图 <img /> usemap="#id" 关联热区的id
http://pic.qiantucdn.com/58pic/18/68/33/564d5fc96692d_1024.jpg
2, 使用<map></map>标签 name="设定热区id"
其有子标签<area /> 使用子标签的属性 设定图像热区 的 形状 坐标 跳转链接
shape="circle" 圆形
coords="100,100,100" 前俩个值圆坐标 最后一个为圆半径
href 跳转地址
shape="poly" 多边形
coords="140,120,50,50,200,100" 俩俩成对，每个点的坐标，按顺序逐个连接
shape="rect" 四边形
coords="140,120,50,50" 俩俩成对，右下角坐标和左上角坐标
表格标签： <table></table>
border="2px" 表格的边框 2px为大小
由<tr></tr>和<td></td>组成
行 列
colspan="2" 合并的列数
两行三列表格
表单标签 <form></form> 限定了表单的范围
action="服务器地址"
<input type="text" placeholder="用户名/手机号"/> 文本输入框
文本框 提示文字
<input type="password" /> 密码输入框
单选框 注意 name值必须要一致否则无法单选
<input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女
<input type="radio" name="sex"/>不确定
下拉框
<select>
<option>--请选择--</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
</select>
多选框
<input type="checkbox" />敲代码
<input type="checkbox" />打游戏
cols 列数 rows 行数
<textarea cols="30" rows="5"></textarea>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
************************************************************************************************
CSS：层级样式表
1，美化网页，完成标签所不能完成的美化功能
2，提高了代码的复用率，以及其维护性
3，实现结构与样式相分离
如何使用样式：
1，行内/内联样式：写在开始标签的内部 style属性中
color : red; 字体颜色
样式属性 属性值
font-size: 50px; 字体大小
注意：每当写完一个样式请使用;结束
2, 内部样式： 可以统一的去设置标签的样式
在head标签内使用style标签 在其内部书写样式
要在style标签内写出type="text/css"属性
选择器： 选择所要设置样式的标签
3,外部样式：1，创建一个CSS文件
2，在文件内部书写样式 书写规则与内部样式一致
3，将此html文件与css文件相关联
在head标签内部 使用<link />引入css文件
注意：1个html文件可以关联多个css文件
1个css文件也可以被多个html文件所关联
优先级：样式有时会产生冲突，谁的优先级高，就使用谁的样式
行内样式>内部样式==外部样式
内部样式的优先级与外部样式的优先级一致
谁后运行，就使用谁的样式
选择器：在设置样式时用于选择标签
1，通用型选择器： * 代表的所有 给所有的标签都使用这个样式
注意：慎重使用其内样式，在设置通用属性时，例如字体，大小，格式
2，类选择器：1，使用标签class的属性，给标签定义一个名字
2，在设定其样式时 使用 .className 的方式作为此样式的选择器
注意： 1，class定义的样式可以被不同的标签使用，只需要给其标签定义相同名字的class属性即可
2，class定义的样式也可以设定固定的标签使用
标签名.className 限定只能该标签使用
3，元素选择器：直接将元素名作为选择器
4，id选择器：使用方式与类选择器一致 #idName{}
设定：同一html文件中，不允许出现相同idName的属性值
JS中会使用id进行操作，如果名字相同，会造成冲突
如果只针对与样式而言，id可以相同
优先级： 行内样式>id选择器>类选择器>元素选择器>通用选择器
复合选择器：多种选择器混合使用
1，群组选择器：元素1,元素2,元素3,...{样式}
给不同的元素设定相同的样式
2，后代选择器：根据元素在上下文（层级关系）的位置进行选择
写的越详细，优先级越高
优先级计算规则：
选择器 权值
元素选择器 0001
类选择器 0010
id选择器 0100
行内样式 1000
样式冲突时，权值相加，权值越大的优先级越高
注意： 同一级别的选择其不管累加了多少权值，其优先级都不会超过下一个级别的优先级
3，伪类选择器：使用选择器，完成一些动态效果
hover: 语法： 选择器:hover{样式}
鼠标移入时产生的变化
active: 元素激活时的变化
focus: 元素获取焦点时（表单标签）
