软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
  软件世界网 -> Web前端 -> W3C标准化学习梳理 -> 正文阅读

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

一,行内元素与块级元素的三个区别
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 }
[img]



......显示全文...
    点击查看全文


上一篇文章           查看所有文章
2016-03-29 22:59:18  
Web前端 最新文章
10分钟
SSM框架SSM项目源码SSM源码下载java框架整合
javascript入门
JavaScript常用对象Array(2)
8.Smarty3:模版中的内置函数
表单脚本
iTextSharp5.0页眉页脚及Asp.net预览的实现
MVC基础学习—理论篇
JavaScript
http协议中get与post区别详解
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 美食菜谱 新闻资讯 电影视频 小游戏 Chinese Culture
生肖星座 三丰软件 视频 开发 Android开发 站长 古典小说 网文精选 搜图网 美图 中国文化英文版 多播 租车 短信
2017-7-26 10:41:11
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --