h5笔记2

•离线缓存:
html配置manifest属性,cache.manifest是缓存配置文件
<html lang="zh-CN" manifest="cache.manifest">
建立cache.manifest,写下如下内容
CACHE MANIFEST
#修改时间 2017-03-06 11:25
CACHE:
test2.css

表示test2.css将缓存在本地,下次即使test2.css文件更新,浏览器也先从本地获取,如果要重新获取,需要更改注释中的时间或版本号比上次更新的时间往前

CACHE MANIFEST下面的注释可以是时间,也可以是版本号,浏览器会比较本地的这个注释串和服务器的注释串,来确定是否要重新从服务器获取




•emmet父子连写:nav>ul>li*3 会自动填充:
       <nav>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </nav>


•header,article,nav,main标签的作用:
语义化标签。
原来写一个页面。
比如有头部。和底部。我们都是定义一个div
只不过头部有一个class=header 尾部的div是class=footer
现在html5出现以后。主张语义化标签。
现在我们写样式的时候。选择器直接就写header就可以了。
不需要这么写  div.header
这样的好处是使得文档结构层次清晰。利于代码编写和开发。
还有搜索引擎优化等等的好处 
实际上相当于有语义的div,简化的div,很多属性没有  

实际效果就是div


•大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
实例: <h1>, <p>, <ul>, <table>
内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>
<div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行
<span> 元素是内联元素,可用作文本的容器
<span> 元素也没有特定的含义。


•id一个页面必须唯一,class不需要唯一


•margin属性可以指定4个值,分别为上、右、下、左
如果只提供一个,将用于全部的四边。
如果提供两个,第一个用于上、下,第二个用于左、右。
如果提供三个,第一个用于上,第二个用于左、右,第三个用于下
值可以设置为auto:
margin-top/margin-bottom计算值为0,margin-left/margin-right取决于可用空间。


•让元素自己居中显示的方法:
margin: 5px auto;

第一个值为垂直方向上下的留白,根据需要设置,如果设置为auto,则为0,第二个值为水平方向的留白,设置为auto会自动根据可用的空白空间平分给左右使用

•<label> 标签为 input select等控件元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
如果是单个控件的标签,可以这样写:
<label>姓名:
                <input type="text" name="username" placeholder="姓名">
            </label>
如果是组合控件,可以这样写:
<label for="sex">
                性别:
            </label>
            <input type="radio" name="sex" value="male" checked>男
            <input type="radio" name="sex" value="female">女



●定义宽高时,必须写单位,如果不写,大部分浏览器会任务忽略此项对宽高的声明



•同一个属性的属性值,用逗号分隔,表示同一个属性的多个可能的取值,它是顺序取的,前一个不成立则选择后一个,它们描述的是同一个属性
font-family:"Times New Roman",Georgia,Serif;
一个属性有多个设定值,则只要用空格,不要逗号:
background: url("amazing-sky.jpg") center center;

猜你喜欢

转载自www.cnblogs.com/cowboybusy/p/9067065.html