注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

HTML第二轮总复习  

2014-04-07 20:50:47|  分类: 复习专题 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
1、HTML 是超文本标记语言,属于网页中结构部分;实现一个网页需要“结构”+“样式”+“行为”也就是HTML+CSS+JavaScript
2、HTML 包含什么标签?肯定是有html、head、body;标签如何嵌套?怎么使用才具有语义性?先了解如下:
2.1、什么是SEO?
SEO简单的理解就是搜索引擎优化,搜索引擎优化有多方面去合理规划,拿我们前端来说只能去改变网站的结构 (标签的合理嵌套,具有语义性),其他方面的我们是无法去改变的(比如网站的内容等)。
2.2、你去实现一个网页,如何让浏览器知道你写的是html类型的文件?
所以我们需要在html里面进行文档声明,说明文档是html文档,让浏览器按照html语法来解释这个页面;如果没有 写文档声明就会发生怪异解析了(IE6);
文档什么具有哪几种类型呢?
第一:严格<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
第二:过渡<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"                       "http://www.w3.org/TR/html4/loose.dtd">
第三:框架<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"     "http://www.w3.org/TR/html4/frameset.dtd">
3、head标签里面包含什么?
3.1 title
3.2 meta元信息(nanme属性)
主要就是<.meta name=’参数名称’ content=’参数值’>
第一:关键字Keywords告诉搜索引擎你的网页的关键字
第二:描述Description告诉搜索引擎你的网页的主要内容
第三:作者Author网页的作者
第四:机器人向导Robots,告诉机器人哪些页面需要索引,哪些页面不需要索引
        meta元信息(http-equiv属性)
第一:刷新Refresh<meta http-equiv=’Refresh’ content=’3;url=’指定地址’>
第二:content-Type(显示字符集的设定)
       <meta http-equiv='content-Type'content='text/html; charset=UTF-8'>
  3.3 link里面有什么属性呢?
样式表的引入
<link rel='stylesheet' type='text/css' href=''> 期中rel表示当前文档与被连接文档之间的关系(stylesheet表示样式       表)
实现文档在浏览器标签有图片
<link type='image/x-ico' rel='icon' href='../images/ibokan.ico'>
4、body标签里面包含什么?
4.1如何去选择标签?标签的语义性和合理嵌套;如下图
  HTML第二轮总复习 - HTML5守望者 - HTML5守望者
 代码如下:

<div class='reco'>
<h2>
<span>SHOP</span>
<strong>今日推荐</strong>
<a href='' title=''>more</a>
</h2>
<dl>
<dt>
<a href='' title=''>
<img src='' title='' alt=''>
<span>省20%</span>
</a>
</dt>
<dd>
<h3>汉菜国际美食百汇</h3>
<p>口味:<span>创意中餐</span></p>
<p>区域:<span>朝阳/CBD</span></p>
</dd>
</dl>
<dl>
<dt>
<a href='' title=''>
<img src='' title='' alt=''>
</a>
</dt>
<dd>
<h3>汉菜国际美食百汇</h3>
<p>口味:<span>创意中餐</span></p>
<p>区域:<span>朝阳/CBD</span></p>
</dd>
</dl>
</div>


看到这幅图,我们分为标题和内容,对于标题我们可以选择H系列标签,但是选择H系列标签也是有讲究的,他们也是有层级关系,依次根据重要性递减,因为这样能让页面的层级关系更明显,有利于爬虫抓取和分析页面主要内容。H1标签最好在网页出现一次,这是网页中唯一的标题;H2标签主要是文章标题和栏目标题;
在这里我们选择H2为标题,在内容区域这样的结构我们明显的可以用到dl标签,但是内容区域模块明显也有标题,但是H2标题我们已经使用了,为了凸显层级关系,选择使用H3标签。图片里面的“省20%”也是鼠标点击区域,所以包含在a标签里面,而不要写在外面。dd里面使用p标签,主要是因为明显是独占一行,而且行高也是相同,语义性比较强,你使用div标签也是可以实现的,但是div没有语义性,div主要是来布局使用。为什么p标签里面的span为什么不使用strong标签,主要也是为了凸显层级关系。
4.2行元素和块元素的区别
 块元素 行元素
 独占一行 同一行显示
 Height有效、margin、padding上下左右设置都有效 Height无效、margin、padding上下无效,左右设置都有效
 width为父亲容器的100% width内容撑开宽度
 转换display:inline 转换display:block
 块元素可以嵌套块元素和行内元素 一般行元素嵌套行元素
注意:这边的有效和无效的意思是,对自身设置是有效的,但是不能产生边距;就拿padding来
可以撑开高度,不与它上边的元素产生边距;
4.3特殊的嵌套规则
第一:ins、del虽然是行元素,但是可以包含块元素
第二:p、dt、h系列的标签虽然是块元素,但是不能包含块元素
第三:table下直接只能包含thead、tbody、tfoot,form下直接只能包含field
4.4 哪些标签的属性有利于SEO的优化
a标签里面的title ,img标签的title和alt(把图片转换成文本,有利于搜索引擎的抓取),input标签的title和alt属性

a的标签的兼容问题:
第一:A标签要遵循L-V-H-A的顺序来写,不然在不同的浏览器的显示不同;
第二:当a标签缺少href的时候,伪类的效果将失效,变成了普通标签。
5 表格
5.1 table可以直接包含thead、tbody、tfoot 
6 表单
为了提高用户体验,我们可以用label来方便聚焦 
对于表单的兼容(你懂得了)

<label for='text_inbut'>小陈</label><input type='button' title='用户名' id='text_inbut' value='提交' style='background-color:red'>

form就是表单元素的区域,向服务端发送所需要的数据,fieldset是给表单元素分组,一个表单元素区域可以多个 fieldset,可以用legend来描述;
filedset有默认样式,fieldset的border:0,legend设置display:none就行了
6.1、button与input中的button的差别
第一:关闭标签的设置,<button></button>而<input type=’button’/>
第二:属性值的设置,<button>属性值</button>而<input type='button' value='提交' />
第三:button鼠标点击没有任何反应而需要js的配合,而input中的button不要添加js会调教form的数据
第四:定义一个按钮。在 button 元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 input 元素创建的                   按钮之间的不同之处。
6.2、form中的input设置readonlydisabled,这两者有什么区别?

   第一:readonly只对inputtextpassword)、textarea有效,而disabled对所有表单元素有效

   第二:设置了readonly后,提交数据提交的话,值可以被传出去,而设置了disabled值是不会传出去的。

   第三:设置了readonly可以获取焦点,反之disabled不能获取焦点;

   第四:readonly可以进行Tap切换,但是disabled Tap切换将被跳过;






  评论这张
 
阅读(166)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017