学习要求
1.要会使用标签和属性。
2.在什么时候使用什么样的标签。
3.写出语义化的页面。
html的语义化：选择合适的标签、使用合理的代码结构，合理的命名，便于开发者阅读，同时让浏览器的爬虫和机器很好地解析，在搜索引擎里的权重会相对高一些。
合理的使用标签：尽量使用语义化标签，越是原生的标签加载的越快。
命名的规范：全部用小写，两个词连起来中间“中横线”链接起来。
第一课
- sublime安装插件
步骤一：首先你需要为sublime text安装Package Control组件：
按Ctrl+`调出sublime text的console
粘贴以下代码到底部命令行并回车： import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installe dpackagespath();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())
重启Sublime Text
在Perferences->package settings中看到package control，则表示安装成功
步骤二：使用Package Control安装Emmet插件：
按Ctrl+Shift+P命令板
输入install然后选择install Package，然后输入emmet找到 Emmet Css Snippets，点击就可以自动完成安装。
不是全英文的HTML文件保存方式要以utf-8的方式去保存.浏览器再以utf-8的方式解码就能正确显示。
-
颜色的三种写法：
下图是两种写法，16进制色号最小值#00，最大值#ff；RGB写法最小值0，最大值255；还有一种直接英文颜色名字，如红色，直接写red。
09.png - 常见的浏览器内核
rem-em-px的用法:px是固定值。rem是相对于根节点，如果没有设置HTML字体大小，则以默认的16px为基础去计算。em是相对于父节点去改变，如果有很多嵌套的值则每个都计算一次。
第二课
- meta的使用，
<meta name="keywords" content="前端 饥人谷 社区 ">```
在百度搜索的时候，content里的信息就会被展示出来。（搜索引擎的规则也是在变的）
><meta http-equiv="X-UA-Compatible"content="IE=edge,chrome=1">
` <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">`的具体含义是：如果安装了GCF，则使用GCF来渲染页面「"chrome=1"」，如果没有安装GCF，则使用最高版本的IE内核进行渲染「"IE=edge"」.
* 开发调试
浏览器审查元素,Elements对 dome元素的展示修改 ，styles,对应的样式，console对应JS调试。
一般的调试用`console.log();`在后台展示.把信息展示在控制台上，
在写代码的过程中很容易出错，所以需要用开发调试，要知道他每一步进展到什么地步。
* 样式的三种写法，样式放文档头部，JS放尾部。
浏览器的缺省设置，默认设置。 （什么样式都没有设置的情况下显示）
* 外置样式表,提高复用性。（用的最多的）
```<link rel="stylesheet" type="text/css" href="./index.css">```
` ./`表示当前路径下，不加`./`也表示在当前路径下。
` ../`表示上级目录下.
href资源定位符。
* 内部样式表
><style type="text/css">
p{
color: red;
font-size: 20px;
}
</style>
* 不要写成一排,`p{color: red;font-size: 20px;}`这样写的可能读性很差。
html5里面可以不加type="text/css"
> <style>
p{
color: red;
font-size: 20px;
}
</style>
* 内置样式表
直接写在标签内,尽量不用。
><p style="border: 1px solid $fff; border-radius: 4px;">段落</p>
* 在CSS里引入其它的样式表
`@import url(index2.css);`
* JS的引用 方式
* 内部JS，直接写在
><script>
alert(1);
</script>
* 外部JS
><script type="text/javascript" src="js/basic.js"></script>
href基本只用于CSS和a标签的引用，JS用的是src.图片也用src.
* 新建HTML文件的时候最好命名为index.html.默认找到的为index.html.
* 字体
* 颜色
* id和class
id定义唯一`#`,class定义一类`.`。
* 水平和垂直居中
行高 line-height=height的时候，垂直居中.可以做按钮，或者知道行高的情况下使用，段落超出无效。
水平居中 text-align:center.
><html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background: red;
}
p{
border: 2px solid white;
border-radius: 4px;
width: 100px;
height: 60px;
line-height: 60px;
text-align: center;
}
</style>
</head>
<body>
<p>
确定
</p>
</body>
</html>
###第三课
* 首行缩进2个字`text-decoration: 2em;`
* 强制折行`word-wrap:break-word;`
* a链接
`<a href="#" target="_blank">我是链接</a>`**target="_blank"新标签打开**
a链接鼠标放上去有个手式，所以一般用a链接做按钮。**对a链接设置颜色必须指定到a链接本身。 **
下面是它的属性
>a{
color: red; /*设置链接初始颜色为红色*/
text-decoration: none; /*去掉默认的下划线*/
padding: 4px; /*加边框可以做成一个按钮*/
background: #ccc; /*按钮的背景色*/
border-radius: 3px; /*为按钮加个圆角*/
transition: color 0.2s; /*延迟两秒改变颜色，不要写在hover里面*/
}
a:hover{ /* hover一个伪类,IE8以上才可以用鼠标放在目标上颜色改变为蓝色，hover也可以用在div上*/
color: #eee;
}
a:active{ /*鼠标按住的时候颜色变为蓝色*/
background:blue;
}
* 跳转到锚点
```<a href="#tips" target="_blank">hunger</a>
...<p id="tips">点击链接跳转到这里</p>```
* 表格table
tr:行，td:列，th：表头；
基本写法
```scriput
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table{
border-collapse:collapse; /*一般针对表格，只能写在table里，不能写table th /td*/
width: 500px;
height: 100px;
}
table th,table td{ /*并列关系用逗号分隔*/
border: 1px solid #ccc;
padding: 5px; /*内边距，只能写在th,td里面，不能直接写table里面*/
}
th{
background-color: green;
color: #fff;
}
td:hover{
background-color: #eee;
}
</style>
</head>
<body>
<table>
<tr>
<th>11</th>
<th>22</th>
</tr>
<tr>
<td>11</td>
<td>22</td>
</tr>
<tr>
<td>11</td>
<td>22</td>
</tr>
</table>
</body>
</html> ```
从上图可以看出th默认情况下是垂直和水平居中的，但td只是垂直居中并没有水平居中。
* 设置图片水平垂直居中
><style>
div{
width: 500px;
height: 500px;
background-color: #ccc;
display: table-cell; /*div以表格的方式去渲染*/
vertical-align: middle; /*在div中无效，但在表格中有效*/
text-align: center;
}
</style>
</head>
<body>
<div>
<img src="1.png" alt="图片">
</div>
</body>
`display`常用的值//block; inline; inline-block; none; table-cell;
display-none:让一个元素消失，不显示在页面上。但依然在DOM树中并没有真正的消失.
opacity:0,透明度设置0，则不可见。
* 有序列表ol,无序列表ul,自定义列表dl.（块级元素）
有序列表的使用，当有明显的步骤，1.2.3....
无序列表是最常见的，用的最多的。凡是并列的，都建议用ul.
页面分析，先分大的区块，再分小的区块，再去一步步细化。
自定义列表，dl里面包含dt表头和dd
分析下图
* div
html里使用最多的标签，用于页面结构划分，页面分区
比如一个典型的网页分为头部，内容，尾部；内容可分为侧边栏和主体内容
```javascrput
<body>
<div id="header"></div>
<div id="content">
<div class="sidebar"></div>
<div class="main"></div>
</div>
<div id="footer"></div>
</body>```
```javascrput
style type="text/css">
div {
width: 100px; /* 宽度 */
height: 100px; /* 高度 */
border: 1px solid red; /* 边框 */
text-align: center; /* 内部文本居中 */
background-color: blue; /* 背景颜色*/
color: white; /* 字体颜色 */
border-radius: 4px; /* 圆角 */
}
</style>
- text-align应用在块级元素上(div或者p),对它内部的行内元素产生效果
- 块级别元素、行内元素
块级元素占用空间是一整行，行内元素占用空间是它自身的内容宽度。行内元素可以一并排显示，块级元素不能。
块级元素：div、p、h1...h6、table、tr、ul、li、dl、dt、form
行内元素：a、span、img、input、button、em、textarea
更多的块级元素和行内元素 http://blog.csdn.net/freshlover/article/details/7076831 -
对行内元素，需要注意如下：
设置宽度width 无效。
设置高度height 无效，可以通过line-height来设置。
设置margin 只有左右margin有效，上下无效。
设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。
下图是line-height对行内元素的应用：
05.png
06.png
可以通过display: block;/display: inline;去改变行内元素和块级元素本身的属性；
display:inline-block既能像行内元素一样水平的排列，又有块级元素的一些特性，比如上下边距，左右边距，宽，高；IE8以下不能使用。
第4课
- from表单
用于把用户输入的数据提交到后台
input都要有name属性
action: 提交到的地址
method: 提交方式，get和post，应用的时候需要和后端交互
区别
- 数据提交方式不同，get把提交的数据url可以看到，post看不到
- get一般用于提交少量数据，post用于提交大量数据
- get最多提交1k数据，浏览器的限制。post理论上无限制，受服务器限制
- get提交的数据在浏览器历史记录中，安全性不好
查看提交结果，审查元素 network，Headers,勾选preserve log 控制刷新
随机验证码由后端生成 ，前端只用写个img
input name值一样，表示一组，只能单选，不能多选.(checkbox默认多选)
checkbox:提交一组数据。默认选择上某项，只需要加一个checked
<form name="myform" action="/text/1.php" method="post">
<div>
爱好: <input type="checkbox" name="hobbies[]" value="music" checked />音乐
<input type="checkbox" name="hobbies[]" value="drawing" />画画
<input type="checkbox" name="hobbies[]" value="travel" />旅行
<input type="checkbox" name="hobbies[]" value="yoga" />瑜伽
<input type="checkbox" name="hobbies[]" value="movie" />电影
</div>
<input type="submit" value="提交">
</form>
08.png
Hidden:隐藏域，用于暂存数据,安全校验.
select:多选框，selected定义默认选项.
<form action="/test/6.php">
<select name="mycar">
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi" selected>Audi</option>
</select>
<button type="submit">提交</button>
</form>
07.png
iframe：在一个页面中嵌入另一个页面。做复杂效果弹框可以直接嵌入Iframe.
HTML的课程已经结束，但还有很多知识点需要再继续深入巩固，一边看视频一边整理的，感觉有些乱，还有很多不到位的，需要补充的会继续更改，有理解不对的地方希望大家多提意见。在这里谢谢各位看官了。
