html+css+js笔记

五大主流浏览器内核

1、IE浏览器内核：Trident内核，也是俗称的IE内核；
2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；
4、Safari浏览器内核：Webkit内核；
5、Opera浏览器内核：最初是自己的Presto内核，后来加入谷歌大军，从Webkit又到了Blink内核；
6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；

img 标签的宽度或高度自适应

图像img具有宽高比自适应的特性，宽度变化，高度也会变化。

设置锚点的三种方法

1、id定位

这种定位最大的好处就是可以针对任何标签来定位

<li>
     <a href="#a">定位到A</a>
</li>

 <li id="a">⇒A</li>

2、name定位

只适用于a标签

<li> <a href="#a">定位到A</a> </li>
... ...
<li> <a name="a">定位到A</a> </li>

3、js定位

<li onclick="javascript:document.getElementById('here').scrollIntoView()"> </li>
<li> <a id="here">定位到A</a> </li>
</body>

其中scrollintoview的值默认为true，在窗口顶部展示

如果值为false，在底部显示

文本格式化标签（文本样式）

加粗 b strong

斜体 i em

删除线 s del

下划线 u ins

b i s u 只有使用 没有 强调的意思 strong em del ins 语义更强烈

base 标签

定义整个页面的a 的target

特殊字符

小于号        <
大于号        >
空格          

表格的标题： caption

定义和用法

caption 元素定义表格标题。

<table>
   <caption>我是表格标题</caption>
</table>

caption 标签必须紧随 table 标签之后。

表格的cellspacing和cellpading

cellspacing单元格与单元格距离

cellpading单元格与内容距离

html5新增语义化标签

（1）section：独立内容区块，可以用h1~h6组成大纲，表示文档结构，也可以有章节、页眉、页脚或页眉的其他部分；
（2）article：特殊独立区块，表示这篇页眉中的核心内容；
（3）aside：标签内容之外与标签内容相关的辅助信息；
（4）header：某个区块的头部信息/标题；
（5）hgroup：头部信息/标题的补充内容；
（6）footer：底部信息；
（7）nav：导航条部分信息
（8）figure：独立的单元，例如某个有图片与内容的新闻块。

<figure> 
	<figcaption>Three different breeds of dog.</figcaption> //标题，可省略
	<img src="dog1.jpg" alt="Maltese Terrier"> //图片
</figure>

（9）mark ：高亮显示

<p>Do not forget to buy <mark>milk</mark> today.</p>

html5表单

input type

email 邮件

tel 因为外国电话格式不同，所以没有验证，只是为了手机端弹出数字键盘

url 网址

color 颜色

number 数字 max min step value

search 有右边的x号

range 滑块 max min step value

time 时分

date 年月日

datetime 时间 年月日时分 只有safari可以，其他浏览器用datatime_local

month 月年

week 星期年

html5表单属性

placeholder

autofocus

multiple 多文件上传

autocomplete 必须在form中 需要submit按钮提交过 当前控件必须有name

required

pattern=“” 后面可以写正则表达式

form 如果表单元素没有在form中，可以在该元素中添加form=“” 内容与form的id相同

html5插入音频

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

html5插入视频

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

设置背景图片常用

  background: url(../img/search.jpg) no-repeat center;

定位的盒子水平居中/垂直居中

.center {
    position: absolute;
    top: 50%;
    margin-top: -20px;
}

float:left与dispaly:inline-block

前者无间隙，后者自动添加一个空格的间隙

<div class="pag">
    <a href="#">首页</a>
    <a href="#">上一页</a>
    <a href="#" class="choose">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#">下一页</a>
    <a href="#">最后</a>
</div>

inline-block

        .pag a{
            display: inline-block;
            border: 1px #ddd solid;
            padding: 6px 13px;
            background: #fff;
            font-size: 16px;
            color: #333333;
            text-decoration: none;
        }
        .paging .pag .choose{
            background: #00a1f6;
            color: #fff;
        }

float :left

 		.pag a{
            float: left;
            border: 1px #ddd solid;
            padding: 6px 13px;
            background: #fff;
            font-size: 16px;
            color: #333333;
            text-decoration: none;
        }
        .pag .choose{
            background: #00a1f6;
            color: #fff;
        }

去除display：inline-block间隙的方法

父元素发字体大小变为0

	.pag {
            font-size: 0px;
        }

清除浮动的方法

1、overfolw:hidden

原理：这种方法是先找到浮动元素的父元素，再在父元素中添加属性overflow:hidden,

优点：简单，无需增加新的标签；

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏；

2、使用伪元素清除浮动

<div class="clearfix"><img src="images/search.jpg"/><img src="images/tel.jpg"/><img src="images/weixin.png"/><img src="images/nav_left.jpg"/><!-- <div style="clear:both;"></div> --></div>

.clearfix:after{content:'';display:block;clear:both;}
//兼容低版本IE
.clearfix{
zoom:1;
}

3、使用双伪元素清除

.clearfix:after,.clearfix:before{content:'';display:block;clear:both;}
//兼容低版本IE
.clearfix{
zoom:1;
}

transform旋转

transform: rotate(45deg);

transform-origin：left top；绕左上角旋转 left bottom top right