HTML总结

1.meta标签

 关键字:keywords
 简介:description
 设置网页刷新时间:refresh
<meta name="keywords" content="关键词1,关键词2..." >
<meta name="description" content="描述内容..." >
<meta http-equiv="refresh" content="30" >

2.字符编码格式

 UTF-8:收录了全世界所有语言的文字,存储一个汉字占3个字节
 GBK:存储一个汉字占2个字节,是国际标准
 GB2313:收录了汉字、片假名,是国际标准的扩展

3.常用特殊字符

 "<":&lt
 ">":&gt
 "&":&amp
 " ":&nbsp
 商标:&copy

4.标签语义化

  语义化标签:那些可以看出意思的标签名,如:header、footer等
  非语义化标签:div等

5.行内元素与块级元素嵌套

  同级标签必须要同类型,即块级元素与块级元素并列,行内元素与行内元素并列;
  块级元素可以嵌套行内元素,行内元素不能嵌套块级元素,例外:h1-h6、p、dt是块级元素,但它们都不能嵌套块级元素;
  li可以嵌套div或者其他块级元素,因为li和div都是装载内容的标签,没有级别之分;

6.锚点

href里的值可以为#或者"",都是跳转回页面头部;
#ID:跳转到id名为ID的元素处;

7.CSS3选择器

   	nth-child():不区分标签类别,例如:
<div>
	<div></div>
	<p></p>
</div>
div p:nth-child(1){
}
div p:nth-of-type(1){
}

这里第一种选择器只能选择到div里面的第一个div标签,
第二中才可以选择到里面的p

8.input的list属性

list主要输入框的历史记录提示文本,适用于以下input类型:text、search、url、telephone、email、data picker、number、range、color

<input type="text" id="list" list="datalists" >
<datalist id="datalists">
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
</datalist>

9.min、max 和 step 属性

适用于可以表示数值的input类型,例如number、range

<input type="range" min="0" max="50" step="5" />
<input type="number" min="0" max="10" step="2" />

10.行内元素与块级元素

行内元素:a,b,strong,span,img,label,button,input,select,textarea等
块级元素:header,form,ul,ol,table,div,hr,figure,footer等
行内元素可以在一行内显示多个,从左到右排列,块级元素独占一行,紧跟在其后的标签自动换行。

11.font标签

有以下几种属性:size(设置字体大小)、face(设置字体)、color;
font标签在h5中已经被废弃

12.表格

cellpadding属性:设置表格的内边距;
cellspacing属性:设置表格与表格之间的距离;
border属性:设置表格的边框大小;
rowspan:合并行;
colspan:合并列;
还有width、height、bordercolor、align等属性;
还有th标签、caption、thead、tbody、tfoot等标签;
注意:不要随意用表格进行网页布局,会影响浏览器的渲染。

13. H5 一些特性总结

1.最新版本的safari、firefox、chrome等都已兼容HTML5,IE在IE9之后兼容,IE9之前,可以使用菜鸟教程的静态资源包html5shiv:
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>

2.所有浏览器,最旧的或者最新的,对无法识别的HTML元素会作为内联元素处理。

3.HTML5的新元素都是块状元素,要是旧的浏览器支持HTML5,可以把其CSS的display属性设置为block:
header,section,footer,aside,nav,main,article,figure {display:block}

4.<filedset></filedset> 用于给表单的某组元素分组,且会在分组周围绘制边框,<legend></legend>是这个分组的标题
栗子:

<form method="post" action="/projects/1">           
	<fieldset id="personal_information">       
	<legend>Project Information</legend>        
	<ol>          
		<li>           
			 <label for="name">Name</label>           
			<input type="text" name="name" id="name">          
		</li>                   
		 <li>           
			 <input type="submit" value="Submit">          
		</li>        
	</ol>              
	</fieldset>   
 </form>

效果图:
效果图

5.autofocus属性:<input type="text" name="name" autofocus id="name">这个input输入框自动获得光标,其回退方案:

if (!Modernizr.autofocus){  
	$('input[autofocus]').focus();
}

6.使用Modernizr检测特性
Modernizr库可以用来检测浏览器对众多HTML5和CSS3特性的支持情况。
它并不添加缺失功能,但提供检测方式,比我们自己实现的更强壮。

14. H5 注意事项

HTML5声明(写在所有标签的最前面): <!DOCTYPE html>

防止中文乱码,在头部: <meta charset="utf-8">

在W3C万维网联盟中推荐使用小写标签名,在XHTML中强制使用小写标签。属性和属性名同理

改掉用标题标签达到使字体变粗或者大写的目的,浏览器根据标题标签为网页编排索引。

<pre></pre>:在这个标签中,文本的换行和空格都会被保留。
<abbr title="chenwenchun">cwc</abbr>:把鼠标停留在cwc上会显示chenwenchun。
<bdo dir="ltr"></bdo>:可以改变文字显示方向。
<del></del><ins></ins> :文字删除效果、下划线效果。

<a id="tips">有用的提示部分</a>

在HTML文档中创建一个链接到"有用的提示部分(id=“tips”)":

<a href="#tips">访问有用的提示部分</a>

或者,从另一个页面创建一个链接到"有用的提示部分(id=“tips”)":

<a href="http://www.runoob.com/html/html-links.html#tips"> 访问有用的提示部分</a>

<meta http-equiv="refresh" content="30">:每隔30秒刷新网页。

设置某图像的可点击区域:

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map>

<iframe></iframe> :在一个网页显示另一个网页的内容。
<strong></strong>
<em></em>

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值