html学习总结

1. HTML 标签由开始标签和结束标签组成，空的 HTML元素没有结束标签，比如 <br />没有内容的 HTML 内容被称为空元素。空元素是在开始标签中关闭的。<br /> 就是没有关闭标签的空元素（<br /> 标签定义换行）。在 XHTML、XML 以及未来版本的 HTML 中，所有元素必须被关闭。在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

2. HTML 标签及属性值对大小写不敏感：<P> 等同于 <p>。W3School 使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='Bill "HelloWorld" Gates'

3. <hr /> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。

4. <address> 可定义一个地址（比如电子邮件地址）。您应当使用它来定义地址、签名或者文档的作者身份。

<a href="mailto:service@w3school.com.cn">用户服务信箱</a><br />

上海赢科投资有限公司<br />

金桥开发区 789 号<br />

</address>

5. 文本对齐：text-align:center;代替align:center;

6. Name 属性用于创建被命名的锚（named anchors）。当使用命名锚（named anchors）时，我们可以创建直接跳至定位至页面中某个节的链接，这样使用者就无需不停的滚动页面来寻找他们需要的信息。

使用<a>创建锚

<a name="tips">Useful Tips Section</a>

将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个节，就像这样：

Jump to the Useful Tips Section

</a>

7. <caption>定义表格的标题 colspan=”3”横跨三列的单元格；rowspan=”2”横跨两行的单元格，

Cell padding 来创建单元格内容与其边框之间的空白，Cell spacing 增加单元格之间的距离。

<tr>

</tr>

<tr>

<td>Bill Gates</td>

</tr></table>

8. 无序列表 ul li 有序列表 ol li 自定义列表 dl dt dd; 自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dd>White cold drink</dd>

</dl>

9. 文字环绕图片，只需设置图片align=left即可实现图片在左的文字环绕，align=right可实现图片在右的文字环绕

10. 通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩写图像

alt:图像无法载入时，替换文本属性告诉读者们失去的信息。

11.使用框架导航跳转至指定的节

<a href ="link.html" tppabs="http://www.w3school.com.cn/example/html/link.html" target ="showframe">没有锚的链接</a><br>

<a href ="link.html#C10" tppabs="http://www.w3school.com.cn/example/html/link.html#C10" target ="showframe">带有锚的链接</a>

导航框架：

<a href ="frame_a.html" tppabs="http://www.w3school.com.cn/example/html/frame_a.html" target ="showframe">Frame a</a><br>

<a href ="frame_b.html" tppabs="http://www.w3school.com.cn/example/html/frame_b.html" target ="showframe">Frame b</a><br>

<a href ="frame_c.html" tppabs="http://www.w3school.com.cn/example/html/frame_c.html" target ="showframe">Frame c</a>

<frame src="../example/html/frame_a.html" tppabs="http://www.w3school.com.cn/example/html/frame_a.html"

name="showframe">

12.

XHTML 元素都必须被正确地嵌套，XHTML 必须拥有良好的结构，所有的标签必须小写，并且所有的 XHTML 元素必须被关闭。XHTML 文档必须拥有 DOCTYPE 声明，并且 html、head、title 和 body 元素必须存在。

13.html实现文件的下载

<a href=文件路径/文件名>下载链接的文本</a>
必须是 exe rar doc txt 等文件类型

14.去除<a>标签点击时的虚线框：

在css中加入：

a {outline: none;}

a:active {star:expression_r(this.onFocus=this.blur());}

:focus { outline:0; }

15.html网页头部添加

当访问该页面时会自动跳转至url所指的页面。

16.img居中的方法：

1.img设置属性：display：block; margin:0 auto; 推荐 (对于width height 不确定的图片也适用)

2.给img设一包括img的div,div设置属性align=center;

17.p设置行间距用line-height 设置段间距用 margin-bottom或margin-top

18.返回上一页方法：

<a href="javascript :history.back(-1)">返回上一页</a>或：
<a href="javascript :;" onClick="javascript :history.back(-1);">返回上一页</a>

如果是用按钮做的话就是：
<input type="button" name="Submit" onclick="javascript:history.back(-1);" value="返回上一页">

用图片做的话就是：
<img src="图片路径" border="0" onclick="javascript:history.back(-1);" title="返回上一页">

几秒钟后自动返回上一页代码:
<meta http-equiv="refresh" content="3; url=javascript:window.history.go(-1);">
content=这后面是时间。

19.手机端页面宽度设置为：width=960px;<meta name="viewport" content="width=960, initial-scale=0.33">

电脑端页面宽度设置为 width=1200px

(1)标准手机端页面：<META name="viewport" content="width=device-width, initial-scale=1.0 minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">用百分比

(2)使用width:320px;

<!DOCTYPE html>

<html>

<head>

<title>天猫触屏版</title>

</head>

<body>

</div>

</div></body>

</html>

20.html快速定位到页面的某个具体位置：

<a href="#bottom">链接到底部</a>

<div style="height:1000px;">center</div>

21.输入框提示，鼠标离开提示隐藏

<input type="text" id="phone" name="phone" maxlength="13" value="为你保密哒" onfocus="if(value == defaultValue){value='';this.style.color='#000'}"onblur="if(!value){value = defaultValue;this.style.color='#999'}"

22.当div模块被position:fixed;后她包含的子模块定义position：absolute,将不起作用

23.当上一个模块元素有浮动时，模块的margin：将不起作用，解决方法：添加属性clear：both;

24.如何解决浏览器兼容性问题快捷方法之一：

浏览器将会大致以IE9的模式进行呈现，无论当前浏览器是何版本

25.自定义鼠标样式

body{ cursor:url(http://www.lakala.com/images_icon/damotouicon.ico), pointer;}

(1)鼠标图片最好是.ico格式的（可使用在线工具转换），不支持jpg,png，gif格式，其他格式容易有兼容性问题

(2)当自定义鼠标图片无法使用时，会用pointer样式。经测试ursor:url(http://www.lakala.com/images_icon/damotouicon.ico)；只这样写时鼠标自定义是不起效的。必须后面加上其他默认样式；最小要求：16px*16px;32px*32px最好

(3)图片路径要采用绝对路径，否则IE不识别

26.当给子元素模块添加margin-top:会出现父元素也偏移，子元素与父元素并没分离问题

解决办法：给包含它的父元素（祖父元素不必设）添加属性,overflow:hiddden;即可完美解决，这跟 bfc 的东西（块级元素格式化上下文）有关

27.

以上样式的实现可用

fieldset 样式可自定义

28.利用jsonp解决跨域

$.getJSON("url?表单数据&jsoncallback=?",function(data){

var mobile_callback=data;

if(mobile_callback.phone=='alreadyExist')

{

message="对不起，同一手机号只能办一张卡！";

$("#tx").html(message);

}

else{alert("恭喜您，存储成功") }

})

例如：

$(function(){

$("#sub").click(function(){

var mobile_phone=$("#phone").val();

var reg1=/^(^[\s]{0,}$)|(((1[0-9]{2})|159)+\d{8})$/;

if(mobile_phone.length==0){

message="*手机号码不为空！";

$("#tx").html(message);

$("#tx").show();

}

else if(!reg1.test(mobile_phone)){

message="*手机号码格式错误";

$("#tx").html(message);

$("#tx").show();

}

else{

$.getJSON("http://mall.lakala.com/ActivityControllerForPhoneSave/savePhone?"+$('#xyfm').serialize()+"&jsoncallback=?", function(data)

{

var mobile_callback=data;

if(mobile_callback.phone=='alreadyExist')

{

message="对不起，同一手机号只能办一张卡！";

$("#tx").html(message);

$("#tx").show();

}

else{alert("恭喜您，存储成功") }

})//json结束

}//else 结束

})//sub.click结束

}）

29.设置透明度兼容各个浏览器

· filter:alpha(opacity=50);

· -moz-opacity:0.5;

· -khtml-opacity: 0.5;

· opacity: 0.5;

filter:alpha(opacity=50);/*IE*/
-moz-opacity:0.5;//火狐私有

opacity:0.5;/*其他，透明度50%*/

30.

结果：1.

32.图片延迟加载

基于 jQuery 的图片延迟加载插件，在用户滚动页面到图片之后才进行加载。

对于有较多的图片的网页，使用图片延迟加载，能有效的提高页面加载速度。

版本：

jQuery v1.4.4+

jQuery Lazy Load v1.7.2

注意事项：

需要真正实现图片延迟加载，必须将真实图片地址写在 data-original 属性中。若 src 与 data-original 相同，则只是一个特效而已，并不达到延迟加载的功能。

使用方法

载入 JavaScript 文件

<script src="jquery.js"></script> <script src="jquery.lazyload.js"></script>

修改 HTML 代码中需要延迟加载的 IMG 标签

<img class="lazy" src="grey.gif" data-original="example.jpg" width="640" heigh="480">

调用 Lazy Load

$('img.lazy').lazyload();

块级元素和行内元素的区别

　　块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度.

　　行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化.

　　块级元素可以设置width,height属性.

　　行内元素设置width,height属性无效.

　　块级元素即使设置了宽度,仍然是独占一行.

　　块级元素可以设置margin和padding属性.

　　行内元素的margin和padding属性,水平方向的padding-left,padding-right,margin-left,margin-right都产生边距效果,但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom却不会产生边距效果.

　　块级元素对应于display:block.

行内元素对应于display:inline.

一、行内元素与块级元素

二、行内元素与块级函数的三个区别

1.行内元素与块级元素直观上的区别

行内元素会在一条直线上排列，都是同一行的，水平方向排列

块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。

2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

3.行内元素与块级元素属性的不同，主要是盒模型属性上

行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

三、行内元素转换为块级元素

display:block (字面意思表现形式设为块级)

Css hack

相关推荐

html学习总结

使用方法

载入 JavaScript 文件

修改 HTML 代码中需要延迟加载的 IMG 标签

调用 Lazy Load

块级元素和行内元素的区别

专栏推荐