Front-end day1
1.前端三把刀：
1.html（好比人的骨架）（各种各样标签）
（HyperText Markup Language：超文本标记语言，通过标记符号来显示网页中的各个部分。）
2.css （好比衣服） （各种显示效果）
（Cascading Style Sheets：层叠样式表，用于定义HTML元素的显示形式。）
3.java script（让人动起来）（页面动起来）
（直译式脚本语言，应用于web应用开发，为网页添加各式各样的动态功能。）
（jQuery 相当于javascript的一个类库）
2.HTML是什么？
服务端→返回到→浏览器→可识别的一种形式，这种方式叫做html。
3.HTML头部信息
1.文档树（后续附图片）
2.<!DOCTYPE html>
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
3.<head>内容</head>
头部信息：定义内在的东西，网页是不显示的，除了title标签。
4.<body></body>
主题内容：定义用户看到的东西
5.头部事例：
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
6.头部标签
1.meta标签
<meta charset="UTF-8" />
1.自闭和标签，类似encoding，
2.为了区别自闭和标签和普通标签，在结尾加一个/ 。
3.页面编码：charset="UTF-8"
4.页面定时刷新:
例如：每2s刷新
<meta http-equiv="refresh" content="2" />
5.页面定时刷新跳转到某网页:
<meta http-equiv="refresh" content="2;Url=http://www.baidu.com" />
6.定义针对搜索引擎的关键词:
<meta name="keywords" content="html css xml" />
7.定义对页面的描述:
<meta name="description" content="免费的前端教程" />
8.定义页面的最新版本：
<meta name="revised" content="abc 2016/9/21">
9.X-UA-Compatible（兼容ie，专门为IE提供）
代表用IE最新内核处理网页：
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
注意：
1.<和字母之间不能有空格；
正确：<meta /> 错误：< meta />
2.<>里边的引号不能是中文的。
总结meta标签属性：
charset：定义文档的字符编码。
content：定义与 http-equiv 或 name 属性相关的元信息。
http-equiv：把 content 属性关联到 HTTP 头部。
name：把 content 属性关联到一个名称。
2.title标签
<title>Title</title>
网站的头部信息，用户可见。
一般不加属性
主动闭合标签，需要加</title>
注意：
如果不加</title>，浏览器会报错，但不显示报错信息，会一直卡在那里。
3.link标签
1.css 引入css样式
<link rel="stylesheet" type="text/css" href="/c5.css">
2.icon 引入icon图片：链接网页头部图标
<link rel="shortcut icon" href="favicon.ico">
4.style
在页面中写样式，例如：
<style>
.aa {
background-color: red;
color: white;
}
</style>
5.script
1.引入css文件
2.引入js文件
7.注释格式
<!--xxx-->
PyCharm 里边注释，在字体所在行，按Ctrl+？ 自动添加注释。
4.html标签之p、br以及各种标签
1.常用标签（页面上能看到的）
1.块级标签
特点：占整行；可以嵌套块级和内联标签；p标签是例外，不可以包含块级标签。
块级标签有：div、h、p
2.行内标签（又称内联标签）
特点：自己多大占多大；不可以嵌套块级标签；
行内标签有：a、span、select
2.各种符号
< = < ； > = >；   = 空格 ；
常用特殊符号链接查询：
http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
5.标签详细介绍（标签是可以嵌套的）
1.div标签
为html内容提供结构和背景的元素。
2.span标签
用来组合文档中的行内元素。
<p><span>some text.</span>some other text.</p>
3.p标签
定义段落
4.br标签
换行符
5.a标签
定义超链接，用于从一个页面链接到另一个页面。
链接方法有几种：
1.直接跳转到某网页
<a href="http://www.baidu.com">百度</a>
2.在浏览器上新建标签打开跳转网页
<a href="http://www.baidu.com" target="_blank">百度</a>
3.在页面中通过章节目录跳转到章节内容
<div>
<a href="#a1">第一章</a>
<a href="#a2">第二章</a>
<a href="#a3">第三章</a>
</div>
<div id="a1" style="height:600px;background-color:red">第一章内容</div>
<div id="a2" style="height:500px;background-color:blue">第二章内容</div>
<div id="a3" style="height:900px;background-color:white">第三章内容</div>
解释：
# ：代表在页面中寻找id等于a1的标签，将其标签放置到页面顶部。
id：每一个id的属性值不能重复，id属性可以不写。
6.h标签
定义标题。
<h1> - <h6> 标签是可定义的范围，标题大小递减。<h1> 定义最大的标题。<h6> 定义最小的标题。
7.hr标签
<hr> 标签在 HTML 页面中创建一条水平线。
8.li标签
<li> 标签定义列表项目。
<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。
6.html标签之input标签
1.加边框:
<div style="border:1px solid red">aaaaa</div>
border:边框 1px：像素 solid：实心的 red：颜色
2.单行文本操作
<p><input type="text"></p>
<!--text:输入为明文-->
<p><input type="password"></p>
<!--password：输入为密文-->
3.单选框
<br />男<input type="radio" name="aaa" />
<br />女<input type="radio" name="aaa" />
<!--radio：单选框-->
<!--name属性是为了两个标签互斥，以实现单选功能-->
4.复选框
<br />男1<input type="checkbox" />
<br />男2<input type="checkbox" />.
<!--checkbox：复选框，可以多选-->
5.下拉框
<p>
<select>
<option>北京</option>
<option>上海</option>
</select>
</p>
<!--select+option实现下拉框-->
6.支持多选
<p>
<select multiple>
<option>北京</option>
<option>上海</option>
</select>
</p>
<!--select multiple+option实现下拉框多选-->
<p>
<select multiple size="2">
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>山西</option>
</select>
</p>
<!--select multiple+option实现下拉框多选，按住Ctrl 多选；-->
<!--size：默认显示2个选项，大于2个就显示滚动条-->
7.标题分类
<select>
<optgroup label="北京">
<option>海淀区</option>>
<option>昌平区</option>>
</optgroup>
<optgroup label="山西">
<option>晋城市</option>>
<option>长治市</option>>
</optgroup>
</select>
<!--optgroup label实现标题分类-->
8.上传文件
<p>文件：<input type="file"></p>
<!--file:上传文件-->
9.邮箱格式输入
<p>邮箱:<input type="email"></p>>
<!--email:输入邮箱格式-->
10.备注
<p>备注：<textarea></textarea></p>
<!--textarea:实现文本多行输入-->
11.提交
<input type="submit" value="提交">
<!--submit：提交内容-->
<input type="button" value="提交">
<!--button：就是一个按钮，默认没有功能-->
<input type="reset" value="提交">
<!--reset：重置当前表单-->
12.表单
<form>
<p>邮箱:<input type="email"></p>
<input type="submit" value="提交">
</form>
<!--form: 表单；提交的时候用，所以要把所有需要提交的内容放到form标签里边-->
7.html标签之向后台发送数据
1.简单例子
<form action="https://www.sogou.com/web" method="get">
<!--action:数据往哪里提交-->
<!--get:默认方式；另一种方式是post。区别是提交的时候数据放置格式不一样。-->
<input type="text" name="query">
<!--name：定义一个name，加上name就会以字典形式发送到url，客户端就可以用字典的形式提取输入内容-->
<input type="submit" value="提交">
</form>
2.提交radio的时候，要加value来区分提交内容
<form action="https://www.sogou.com/web" method="get">
男<input type="radio" name="aaa" value="1" />
女<input type="radio" name="aaa" value="2" />
<input type="submit" value="提交">
</form>
3.还有p标签在提交复选框时候，也要加value来区分提交内容
<p>
篮球<input name="bb" type="checkbox" value="1">
足球<input name="bb" type="checkbox" value="2">
</p>
4.同样在提交下拉框、标题分类、备注等也需要value来区分提交内容
5.上传文件
<form action="http://localhost:64255/S13/day14/444.html" method="post" enctype="multipart/form-data">
<p>
<input type="file" name="ccc">
</p>
</form>
<input type="submit" value="提交">
8.html标签之table
1.label
<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
例如：
<label for="name">
姓名：
<input id="name" type="text">
</label>
2.ul ol dl
ul:定义无序列表，默认前缀加黑点；
<ul>
<li>aaa</li>
<li>bbb</li>
</ul>
ol：定义有序列表，默认前缀加数字；
<ol>
<li>aaa</li>
<li>bbb</li>
</ol>
dl：定义标题与内容列表，没有前缀。
<dl>
<dt>aaa</dt>
<dd>bbb</dd>
<dt>aaa</dt>
<dd>bbb</dd>
</dl>
3.table
表格：<table></table>
表格标题：<thead></thead>
表格内容：<body></tbody>
指定为标题：<th></th>
行：<tr></tr>
列：<td></td>
4.合并单元格
单元格合并前：
<table style="border:1px solid red">
<tr>
<th>标题一</th>
<th>标题二</th>
<th>标题三</th>
</tr>
<tr>
<td>内容一</td>
<td>内容二</td>
<td>内容三</td>
</tr>
<tr>
<td>内容一</td>
<td>内容二</td>
<td>内容三</td>
</tr>
</table>
单元格合并后：
colspan：左右合并单元格
rowspan：上下合并单元格
<table style="border:1px solid red">
<tr>
<th>标题一</th>
<th>标题二</th>
<th rowspan="2">标题三</th>
</tr>
<tr>
<td colspan="2">内容一</td>
<!--<td>内容二</td>-->
<!--<td>内容三</td>-->
</tr>
<tr>
<td>内容一</td>
<td>内容二</td>
<td>内容三</td>
</tr>
</table>
9.html标签补充
1.fieldset
将表单内的相关元素分组。
<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。
<fieldset>
<legend>登录提示</legend>
<p>用户名：</p>
<p>密码：</p>
</fieldset>
2.iframe
<h1>xxx</h1>
<iframe style="width:100%; height:2000px;" src="http://www.baidu.com"></iframe>
10.css介绍及css存在形式
1.标签属性
<div style="background:red; color:white;">8888</div>
特点：不可重用，属性所在标签使用。
2.html头部
特点：可以重用，整个页面内可以使用。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color:red;
color:white;
}
</style>
</head>
<body>
<div>888</div>
<div>999</div>
</body>
3.单独css文件引入
特点：可以重用，多个页面可以使用。
1.把以下内容写入一个css文件里，如：common.css
div{
background-color:red;
color:white;
}
2.在head引用：
<link rel="stylesheet" href="common.css">
11.css选择器
1.标签选择器
针对某个标签应用样式；
例如：div控制div标签样式；p控制p标签样式。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
color:red;
}
p{
color:blue;
}
</style>
</head>
<body>
<div>8888</div>
<p>8888</p>
</body>
2.id选择器
根据id值查找对应标签属性，应用样式。
例如：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
background-color:red;
color:blue;
}
</style>
</head>
<body>
<div>8888</div>
<p>8888</p>
<div id="i1">999</div>
</body>
3.class选择器
根据.xx查找class=xx的标签都应用样式；
4.层级选择器
查找对应层级关系的标签应用样式；
例如:
.c2 div p{}
空格表示一层一层的；
查找class=c2下边的所有div，下边的p标签都应用；
层级之间有一个子继承父类的关系；
5.组合选择器
多个标签应用一个样式；
例如：
.c4,.c5,.c6{}
逗号表示and的意思；
c4和c5和c6的标签都应用样式。
6.*{}
*匹配所有标签；
清除所有标签默认属性；（浏览器html页面默认都有一个属性存在）
12.css基本样式
1.color：字体颜色
2.background-color：背景颜色
3.font-size：字体大小
4.height：高度（单位px 没有100%定义）
5.width：宽度（单位px 可以定义100%）
6.background-image：背景图片（需要制定图片长、宽）
7.background-repeat：是否重复；三个属性 （no-repeat；repeat-x；repeat-y）
8.background-position：位置（不能变）
写法：84px -58px;
位置不能变，图片可以移动。
9.border：边框
例如：
border: 1px solid red;
解释：边框为1像素、实心线、红色
边框有四个边，默认顺序是：上、右、下、左
border：默认包含四个边
border-top：上边边框
border-right：右边边框
border-bottom：下边边框
border-left：左边边框
10.display:显示
1.隐藏某处：
display:none #内容消失，位置也消失
#应用于：1.默认隐藏，点击后再显示
2.左侧菜单
visibility:hidden #内容消失，位置也消失
2.内联标签变块级标签
display:block
3.块级标签变内联标签
display:inline
4.即有内联标签属性，又有块级标签属性
display:inline-block
11.cursor：改变鼠标放上去的时候的展示效果
<span style="cursor:pointer;">显示小手</span>
<span style="cursor:help;">显示帮助</span>
<span style="cursor:wait;">显示等待</span>
<span style="cursor:move;">显示移动</span>
<span style="cursor:crosshair;">显示十字准线</span>
<span style="cursor:pointer;">伪超链接</span>
13.css样式之边距
1.padding：内边距（本身增加）
2.margin：外边距（本身不增加）
14.css样式之漂浮
1.标签一旦漂浮起来，标签有多大就占多大。
漂浮方式：
<div style="width:500px; height:400px; border:1px solid red;">
<div style="width:20%; background-color:aqua; float:left">aa</div>
<div style="width:30%; background-color:blue; float:left">bb</div>
<!--<div style="clear:both;"></div>-->
</div>
2.标签一旦漂浮起来，子标签就会脱离父标签的高度。
3.标签一旦漂浮起来，加上一个clear:both; 就等于父标签把子标签拽回来了,也具有同等功能的是：
overflow:hidden
<div style="clear:both;"></div>
15.css样式之定位：position
position有三个值：
1.relative （默认设置没有效果）
relative+absolute才有效果，absolute针对relative窗口去定位。
2.absolute（固定窗口位置，当窗口滚动的时候，位置会移动。）
3.fixed（固定窗口位置，相对整个窗口固定位置；当窗口滚动的时候，位置不会移动。）
16.css样式之对话框
透明度：opacity:0.6; （默认是1：完全不透明）
优先级：z-index:10; （数字越大，优先级越高）
背景色和透明度有两种写法。
17.css样式之布局实例
网站一般分为：
1.头部
2.中间内容
3.底部
注意：
浏览器默认都有尺寸
1.去空白： margin:0;padding:0;
2.居中：margin:0 auto;
，如需转载请自行联系原作者
