HTML课后总结

2015-12-02 本文已影响498人饥人谷_曾萍

学习要求
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> ```


![01.png](https://img.haomeiwen.com/i1221115/c15feaa7dbfd8e98.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
从上图可以看出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
分析下图

![02.png](https://img.haomeiwen.com/i1221115/428148e74f641d62.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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

HTML课后总结

第一课

第二课

第4课

猜你喜欢

热点阅读