2016-02-25

HTML总结

学习要求
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。
常见的浏览器内核
rem-em-px的用法:px是固定值。rem是相对于根节点，如果没有设置HTML字体大小，则以默认的16px为基础去计算。em是相对于父节点去改变，如果有很多嵌套的值则每个都计算一次。

第二课

meta的使用

1 2	<meta name="description" content="饥人谷前端学习社区"> <meta name="keywords" content="前端饥人谷社区 ">

在百度搜索的时候，content里的信息就会被展示出来。（搜索引擎的规则也是在变的）
<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放尾部。
浏览器的缺省设置，默认设置。（什么样式都没有设置的情况下显示）
外置样式表,提高复用性。

1	<link rel="stylesheet" type="text/css" href="./index.css">

./表示当前路径下，不加./也表示在当前路径下。
../表示上级目录下.
href资源定位符。

内部样式表

type="text/css">

1	p{ color: red; font-size: 20px; } </style>

不要写成一排,p{color: red;font-size: 20px;}这样写的可能读性很差。
html5里面可以不加type=”text/css”
1
2
3
4
5
6
<style>
p{
color: red;
font-size: 20px;
}
</style>

内置样式表
直接写在标签内,尽量不用。

1	<p style="border: 1px solid $fff; border-radius: 4px;">段落</p>

在CSS里引入其它的样式表
@import url(index2.css);
JS的引用方式
内部JS，直接写在
1
2
3
<script>
var a =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：表头；
基本写法

<!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里使用最多的标签，用于页面结构划分，页面分区
比如一个典型的网页分为头部，内容，尾部；内容可分为侧边栏和主体内容

<body> 
     <div id="header"></div>
     <div id="content">
          <div class="sidebar"></div> 
          <div class="main"></div> 
     </div> 
     <div id="footer"></div>
</body>
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对行内元素的应用：

可以通过display: block;/display: inline;去改变行内元素和块级元素本身的属性；
display:inline-block既能像行内元素一样水平的排列，又有块级元素的一些特性，比如上下边距，左右边距，宽，高；IE8以下不能使用。

第四课

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>

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>

iframe：在一个页面中嵌入另一个页面。做复杂效果弹框可以直接嵌入Iframe.

HTML的课程已经结束，但还有很多知识点需要再继续深入巩固，一边看视频一边整理的，感觉有些乱，还有很多不到位的，需要补充的会继续更改，有理解不对的地方希望大家多提意见。在这里谢谢各位看官了。