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，点击就可以自动完成安装。

更多插件和快捷键（http://wenku.baidu.com/link?url=2Xab4xtekcXDAmEqxKGXODLGAmUewRfz5bTSW4WV8yUaiw-8I8tc3jq9pDIYRYLAuxGP0RxVGytYylDn5DK7UFLavd1zV0wjxSgeXQa00WC）

不是全英文的HTML文件保存方式要以utf-8的方式去保存.浏览器再以utf-8的方式解码就能正确显示。

• 颜色的三种写法：
  下图是两种写法，16进制色号最小值#00，最大值#ff；RGB写法最小值0，最大值255；还有一种直接英文颜色名字，如红色，直接写red。

  
  
  

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

第二课

• meta的使用，

 ```
在百度搜索的时候，content里的信息就会被展示出来。（搜索引擎的规则也是在变的）

 >
    
 ` `的具体含义是：如果安装了GCF，则使用GCF来渲染页面「"chrome=1"」，如果没有安装GCF，则使用最高版本的IE内核进行渲染「"IE=edge"」.

* 开发调试
浏览器审查元素,Elements对 dome元素的展示修改 ，styles,对应的样式，console对应JS调试。
一般的调试用`console.log();`在后台展示.把信息展示在控制台上，
在写代码的过程中很容易出错，所以需要用开发调试，要知道他每一步进展到什么地步。
* 样式的三种写法，样式放文档头部，JS放尾部。
浏览器的缺省设置，默认设置。 （什么样式都没有设置的情况下显示）
* 外置样式表,提高复用性。（用的最多的）
``````
 ` ./`表示当前路径下，不加`./`也表示在当前路径下。
` ../`表示上级目录下.
href资源定位符。
* 内部样式表
>

* 不要写成一排,`p{color: red;font-size: 20px;}`这样写的可能读性很差。
html5里面可以不加type="text/css"
> 

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

* 在CSS里引入其它的样式表
`@import url(index2.css);` 
* JS的引用 方式
* 内部JS，直接写在
>

* 外部JS
>
href基本只用于CSS和a标签的引用，JS用的是src.图片也用src.
*  新建HTML文件的时候最好命名为index.html.默认找到的为index.html.
* 字体
* 颜色 
* id和class
id定义唯一`#`,class定义一类`.`。
* 水平和垂直居中
行高 line-height=height的时候，垂直居中.可以做按钮，或者知道行高的情况下使用，段落超出无效。
水平居中 text-align:center.
>

    
    
    


    

        确定
    



###第三课
* 首行缩进2个字`text-decoration: 2em;`
* 强制折行`word-wrap:break-word;`
* 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;
}

* 跳转到锚点
```hunger
...
点击链接跳转到这里
```

* 表格table
tr:行，td:列，th：表头；
基本写法
```scriput



    
    
    


        

        

            
11
            
22
        
        

            
11
            
22
        
        

            
11
            
22
        
    

 ```


![01.png](http://upload-images.jianshu.io/upload_images/1221115-c15feaa7dbfd8e98.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
从上图可以看出th默认情况下是垂直和水平居中的，但td只是垂直居中并没有水平居中。
* 设置图片水平垂直居中
>


    

            
    


`display`常用的值//block; inline; inline-block; none; table-cell;
display-none:让一个元素消失，不显示在页面上。但依然在DOM树中并没有真正的消失.
opacity:0,透明度设置0，则不可见。

* 有序列表ol,无序列表ul,自定义列表dl.（块级元素）
有序列表的使用，当有明显的步骤，1.2.3....
无序列表是最常见的，用的最多的。凡是并列的，都建议用ul.
页面分析，先分大的区块，再分小的区块，再去一步步细化。
自定义列表，dl里面包含dt表头和dd
分析下图

![02.png](http://upload-images.jianshu.io/upload_images/1221115-428148e74f641d62.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

* div
html里使用最多的标签，用于页面结构划分，页面分区
比如一个典型的网页分为头部，内容，尾部；内容可分为侧边栏和主体内容
```javascrput
 
     

     

          
 
          
 
     
 
     

```

 ```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; /* 圆角 */ 
  }
 

• 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，应用的时候需要和后端交互
  区别

1. 数据提交方式不同，get把提交的数据url可以看到，post看不到
2. get一般用于提交少量数据，post用于提交大量数据
3. get最多提交1k数据，浏览器的限制。post理论上无限制，受服务器限制
4. get提交的数据在浏览器历史记录中，安全性不好
   查看提交结果，审查元素 network，Headers,勾选preserve log 控制刷新
   随机验证码由后端生成 ，前端只用写个img
   input name值一样，表示一组，只能单选，不能多选.(checkbox默认多选)
   checkbox:提交一组数据。默认选择上某项，只需要加一个checked

        

            爱好: 音乐
                  画画
                  旅行
                  瑜伽
                  电影
        
        
    

08.png

Hidden:隐藏域，用于暂存数据,安全校验.
select:多选框，selected定义默认选项.

 
    
      Volvo
      Saab
      Opel
      Audi
    
    提交

07.png

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

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