软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
  软件世界网 -> Web前端 -> W3C标准化学习梳理 -> 正文阅读
Web前端 最新文章
10分钟
SSM框架SSM项目源码SSM源码下载java框架整合
javascript入门
JavaScript常用对象Array(2)
8.Smarty3:模版中的内置函数
表单脚本
iTextSharp5.0页眉页脚及Asp.net预览的实现
MVC基础学习—理论篇
JavaScript
http协议中get与post区别详解

[Web前端]W3C标准化学习梳理

  2016-03-29 23:00:00
一,行内元素与块级元素的三个区别
1.行内元素与块级元素直观上的区别
    行内元素会在一条直线上排列,都是同一行的,水平方向排列
    块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。
2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
3.行内元素与块级元素属性的不同,主要是盒模型属性上
行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效

在标准文档流里面,块级元素具有以下特点:
总是在新行上开始,占据一整行;
高度,行高以及外边距和内边距都可控制;
宽带始终是与浏览器宽度一样,与内容无关;
   行内元素的特点:
和其他元素都在一行上;
高,行高及外边距和内边距部分可改变;
宽度只与内容有关;
行内元素只能容纳文本或者其他行内元素。
不可以设置宽高,其宽度随着内容增加,高度随字体大小而改变,内联元素可以设置外边界,但是外边界不对上下起作用,只能对左右起作用,也可以设置内边界,但是内边界在ie6中不对上下起作用,只能对左右起作用
块级元素和行内元素可相互包含。

行内元素与块级元素以及之间的转换

http://www.jianshu.com/p/274614a078f3

display:inline 对应不显示为 display:none
display:block 对应不显示为 hidden
说通俗点 样式为none的元素不占位置,而样式为hidden的元素虽然不显示但还是占地方。
二。行内元素转换为块级元素
        display:block (字面意思表现形式设为块级)
三。行内元素与块级元素
块级元素列表
<address> 定义地址
<caption> 定义表格标题
<dd> 定义列表中定义条目
<div> 定义文档中的分区或节
<dl> 定义列表
<dt> 定义列表中的项目
<fieldset> 定义一个框架集
<form> 创建 HTML 表单
<h1> 定义最大的标题
<h2> 定义副标题
<h3> 定义标题
<h4> 定义标题
<h5> 定义标题
<h6> 定义最小的标题
<hr> 创建一条水平线
<legend> 元素为 fieldset 元素定义标题
<li> 标签定义列表项目
<noframes> 为那些不支持框架的浏览器显示文本,于 frameset 元素内部
<noscript> 定义在脚本未被执行时的替代内容
<ol> 定义有序列表
<ul> 定义无序列表
<p> 标签定义段落
<pre> 定义预格式化的文本
<table> 标签定义 HTML 表格
<tbody> 标签表格主体(正文)
<td> 表格中的标准单元格
<tfoot> 定义表格的页脚(脚注或表注)
<th> 定义表头单元格
<thead> 标签定义表格的表头
<tr> 定义表格中的行
行内元素列表
<a> 标签可定义锚
<abbr> 表示一个缩写形式
<acronym> 定义只取首字母缩写
<b> 字体加粗
<bdo> 可覆盖默认的文本方向
<big> 大号字体加粗
<br> 换行
<cite> 引用进行定义
<code> 定义计算机代码文本
<dfn> 定义一个定义项目
<em> 定义为强调的内容
<i> 斜体文本效果
<img> 向网页中嵌入一幅图像
<input> 输入框
<kbd> 定义键盘文本
<label> 标签为 input 元素定义标注(标记)
<q> 定义短的引用
<samp> 定义样本文本
<select> 创建单选或多选菜单
<small> 呈现小号字体效果
<span> 组合文档中的行内元素
<strong> 语气更强的强调的内容
<sub> 定义下标文本
<sup> 定义上标文本
<textarea> 多行的文本输入控件
<tt> 打字机或者等宽的文本效果
<var> 定义变量
可变元素素列表--可变元素为根据上下文语境决定该元素为块元素或者内联元素
<button> 按钮
<del> 定义文档中已被删除的文本
<iframe> 创建包含另外一个文档的内联框架(即行内框架)
<ins> 标签定义已经被插入文档中的文本
<map> 客户端图像映射(即热区)
<object> object对象
<script> 客户端脚本
四。
<dl>标记定义了一个定义列表,定义列表中的条目是通过使用<dt>标记(“definition title”,定义标题)和<dd>标记(“definition description”,定义描述)创建的。<dt>给出了术语名,<dd>标记给出了术语的定义。
也就是说<dt>用来创建列表中的上层项目,<dd>用来创建列表中最下层项目,<dt>和<dd>都必须放在<dl>< /dl>标志对之间。
<dl>
<dt>我们在做列表标题</dt>
<dd>我们在做列表</dd>
<dd>我们在做列表</dd>
<dd>我们在做列表</dd>
<dd>我们在做列表</dd>
</dl>
五。
<abbr>及<acronym>标记表示网页中呈现的文字缩写与简称,都通过title属性来给出缩写的完整名称。二者的区别在于<acronym>标记用来表示首字母缩略词,并且往往缩写形式是一个可发音的单词。
<abbr title="United Nations">U.N.</abbr><br>
六。table布局的网页有什么特点
代码量大,结构混乱;
标签语义不明确,对搜索引擎不友好;
后期代码维护困难,不易功能扩展
七。

HTML 元素 <b> 和 <strong> 有什么区别(无障碍人群)


HTML 标签 <b> 的意思是「bold」(粗体),它是一个单纯的样式标签,指定文本要用粗体。
<strong> 是一个带有着重意味的标签,浏览器通常也把它显示为粗体。
<b>这个标签对应 bold,即文本加粗,其目的仅仅是为了加粗显示文本,是一种样式/风格需求;
<strong>这个标签意思是加强,表示该文本比较重要,提醒读者/终端注意。为了达到这个目的,浏览器等终端将其加粗显示;
总结:<b>为了加粗而加粗,<strong>为了标明重点而加粗
盲人朋友使用阅读设备阅读网络时:<strong>会重读,<B>不会
- 自然样式标签b, i, u, s, pre
语义样式标签strong, em, ins, del, code
八。选择器

1 类别选择器


类选择器根据类名来选择
前面以”.”来标志,如:
.demoDiv{
color:#FF0000;
}

2 标签选择器


一个完整的HTML页面是有很多不同的标签组成,而标签选择器,则是决定哪些标签
采用相应的CSS样式
p{
font-size:12px;
background:#900;
color:090;
}

3 ID选择器


ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式。 根据元素ID来选择元素,具有唯一性,这意味着同一id在同一文档页面中只能出现一次
前面以”#”号来标志,在样式里面可以这样定义:
#demoDiv{
color:#FF0000;
}

4 后代选择器


后代选择器也称为包含选择器,用来选择特定元素或元素组的后代,将对父元素的选择放在前面,对子元素的选择放在后面,中间加一个空格分开。后代选择器中的元素不仅仅只能有两个,对于多层祖先后代关系,可以有多个空格加以分开,如id为a、b、c的三个元素,则后代选择器可以写成#a #b #c{}的形式,只要对祖先元素的选择在后代元素之前、中间以空格分开即可。
如:
<style>
.father.child{
color:#0000CC;
}
</style>

5.子选择器


请注意这个选择器与后代选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一个后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择
#links > a {color:blue;}

6 伪类选择器


有时候还会需要用文档以外的其他条件来应用元素的样式,比如鼠标悬停等。这时候我们就需要用到伪类了。以下是链接应用的伪类定义。
a:link{
color:#999999;
}
a:visited{
color:#FFFF00;
}
a:hover{
color:#006600;
}
/* IE不支持,用Firefox浏览可以看到效果 */
input:focus{
background:# E0F1F5;
}
Link表示链接在没有被点击时的样式。Visited表示链接已经被访问时的样式。Hover表示当鼠标悬停在链接上面时的样式。

7 通用选择器


通用选择器用*来表示。例如:
*{
font-size: 12px;
}
表示所有的元素的字体大小都是12px;同时通用选择器还可以和后代选择器组合。
例如:
p *{
……
}
表示所有p元素后代的所有元素都应用这个样式。

8 群组选择器


当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔。如:
p, td, li {
line-height:20px;
color:#c00;
}

9 相邻同胞选择器


我们除了上面的子选择器与后代选择器,我们可能还希望找到兄弟两个当中的一个,如一个标题h1元素后面紧跟了两个段落p元素,我们想定位第一个段落p元素,对它应用样式。我们就可以使用相邻同胞选择器。看下面的代码:
Example Source Code CSS
h1 + p {color:blue}
HTML
<h1>一个非常专业的CSS站点</h1>
<p>Div+CSS教程中,介绍了很多关于CSS网页布局的知识。</p>
<p>CSS布局实例中,有很多与CSS布局有关的案例。</p>
我们将会看到第一个段落“Div+CSS教程中,介绍了很多关于CSS网页布局的知识。”文字颜色将会是蓝色。而第二段则不受此CSS样式的影响。
+和~的区别:类似上面一个,两者都表示兄弟关系,但是+必须是“大哥+二哥”,~还能是“大哥~三弟”、“二哥~四妹”

10 属性选择器


您可以用判断html标签的某个属性是否存在的方法来定义css
属性选择器,是根据元素的属性来匹配的,其属性可以是标准属性也可以是自定义属性;!ie6,0 0 1 0
  当然,也可以同时匹配多个属性

11 伪元素选择器


所有伪元素选择器都必须放在出现该伪元素的选择器的最后面,也就是说伪元素选择器不能跟任何派生选择器
如:p:first-letter em {} 这就是不合法的,ie6不支持:first-letter,设置块元素首字母样式,行内元素转换成块元素和行内块元素也支持;
  div p:first-letter {font-size: 20px}
  //选择div元素里所有的p元素的第一个字母或汉字,如果把块元素转换成行内元素则就不支持了

12 结构性伪类选择器

结构性伪类选择器的冒号前边可以跟一个其他选择器做为限定;
  带括号的选择器,里面一定要有参数;
  匹配子元素,同时也会匹配孙子元素,因为子元素是孙子元素的父元素;
下面的 !lte8是指IE8一下浏览器不支持,包括IE8也不支持
:first-of-type,选择相对父元素里同类型子元素中的第一个,!

13 UI元素状态伪类选择器


:enabled,指定元素处于可用状态时的样式,一般用于input,select和textarea
  :disabled,指定元素处于不可用状态时的样式,一般用于input,select和textarea
:read-only,指定元素为只读状态时的样式,FF为-moz-read-only,一般用于input和textarea
  :read-write,指定元素为只可写状态时的样式,FF为-moz-read-write,一般用于input和textarea
  :checked,指定元素被选中状态时的样式,FF为-moz-checked一般用于checkbox和radio
  :default,指定元素默认选中的样式,一般用于checkbox和radio
  :indeterminate,指定默认一组单选或复选都没被选中的样式,只要有一个被选中则样式被取消,一般用于checkbox和radio
  ::selection,指定元素处理选中状态时的样式,可用于所有元素,上面的几个基本上只用于表单元素;!lte8

注意事项


由于对CSS的解释是自上而下的,对于一个元素的相同属性描述,放在下面的会覆盖掉位于上面的属性描述,因此我们在对元素的选择中一定要注意书写顺序,如:
a:visited {color: #00FF00; text-decoration: none}
  a:hover {color: #FF00FF; text-decoration: underline}
采用这样的书写顺序,无论链接有没有被访问过,只要当鼠标移到链接上,链接都会变成蓝色并有下划线。但是,如果采用下面的书写顺序:
a:hover {color: #FF00FF; text-decoration: underline}
a:visited {color: #00FF00; text-decoration: none}
如果链接被访问过,则当你鼠标移到链接上时不会变成蓝色并有下划线,依然保持绿色。

css important


定义及语法


!important是CSS1就定义的语法,作用是提高指定样式规则的应用优先权。语法格式{ cssRule !important },即写在定义的最后面,例如:box{color:red !important;}
在CSS中,通过对某一样式声明! important ,可以更改默认的CSS样式优先级规则,使该条样式属性声明具有最高优先级,也就是相当于写在最下面
默认情况下,CSS规则按级层覆盖,例如在.CSS文件中的定义可以被html文件中<style type="text/css"></style>里的定义覆盖,反之不行;书写在下面的定义可以覆盖写在上面的定义,反之不行。
然而,对覆盖平衡而言,加上一个“!important”就优先于正常的CSS规则。
例:
p { text-indent: 1em ! important }
p { font-style: italic ! important }
p { font-size: 18pt }
p { text-indent: 1.5em}
p { font: normal 12pt sans-serif}
p { font-size: 24pt }
在这些规则中 未被覆盖的有:
p { text-indent: 1em ! important }
p { font-style: italic ! important }
p { font-size: 24pt }




上一篇文章           查看所有文章
2016-03-29 22:59:18  
360图书馆 论文大全 母婴/育儿 软件开发资料 网页快照 文字转语音 购物精选 软件 美食菜谱 新闻中心 电影下载 小游戏 Chinese Culture
生肖星座解梦 人民的名义 人民的名义在线看 三沣玩客 拍拍 视频 开发 Android开发 站长 古典小说 网文精选 搜图网 天下美图
中国文化英文 多播视频 装修知识库
2017-4-29 9:43:37
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --