[知识随笔]HTML5哪些事?
2016-09-14 23:50
183 查看
a标签的link、visited、hover、active是有一定顺序的,以下是我一直在用的一个顺序,能正确显示四个颜色.如何顺序错误,有些状态的颜色显示不出来.
正确顺序:
取消下划线
a{TEXT-DECORATION:none}
通过display:block;或者display:inline两者可以相互转化。
有几个特殊的块级元素只能包含内嵌元素,不能再包含块级元素,这几个特殊的标签是:h1、h2、h3、h4、h5、h6、p、dt。所以说p里面不能嵌套div,就是我犯的错误。
特殊的
里面可以嵌套div(
可以但不行) 块级元素与块级元素并列、内联元素与内联元素并列
正确顺序:
a:link {color: red;} /* 未访问的链接 */ a:visited {color: blue;} /* 已访问的链接 */ a:hover{color: pink;} /* 鼠标在链接上 */ a:active {color: green;} /* 点击激活链接——在你点击该链接之后,页面正在转向新地址的时候,链接显示此颜色;当你已经到了要链接的页面,然后再返回,原页面上的此链接仍是此颜色 */
/* 这的顺序不能显示active的颜色 a:link{color:red;} a:active{color:blue;} a:visited{color:#fff;} a:hover{color:#000;} /* 其他的顺序还会出现其他的颜色不能正确显示,这里就不再一一举例了。 */
取消下划线
a{TEXT-DECORATION:none}
p标签里面不能嵌套div
p标签内嵌div的结果是p标签被div切成两个标签了<p>sample</p><div>inline</div><p></P>
下面我们来看看概念
1.块级元素(block)与内联元素(inline)的区别:
简单地说,块级元素用来搭建网站架构、布局、承载内容,负责整体的大的方面。块级元素总是会另起一行开始,其高度、行高和边距都是可控的。内联元素负责局部和细节,在同一行显示,其高度、行高和边距不可控。通过display:block;或者display:inline两者可以相互转化。
2.分类明细
块元素(block element) HTML标签分类明细* address - 地址 * blockquote - 块引用 * center - 举中对齐块 * dir - 目录列表 * div - 常用块级容易,也是css layout的主要标签 * dl - 定义列表 * fieldset - form控制组 * form - 交互表单 (只能用来容纳其它块元素) * h1 - 大标题 * h2 - 副标题 * h3 - 3级标题 * h4 - 4级标题 * h5 - 5级标题 * h6 - 6级标题 * hr - 水平分隔线 * isindex - input prompt * menu - 菜单列表 * noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容 * noscript - 可选脚本内容(对于不支持script的浏览器显示此内容) * ol - 排序表单 * p - 段落 * pre - 格式化文本 * table - 表格 * ul - 非排序列表
内联元素(inline element)
一般都是基于语义级(semantic)的基本元素,只能容纳文本或者其它内联元素。* a - 锚点 * abbr - 缩写 * acronym - 首字 * b - 粗体(不推荐) * bdo - bidi override * big - 大字体 * br - 换行 * cite - 引用 * code - 计算机代码(在引用源码的时候需要) * dfn - 定义字段 * em - 强调 * font - 字体设定(不推荐) * i - 斜体 * img - 图片 * input - 输入框 * kbd - 定义键盘文本 * label - 表格标签 * q - 短引用 * s - 中划线(不推荐) * samp - 定义范例计算机代码 * select - 项目选择 * small - 小字体文本 * span - 常用内联容器,定义文本内区块 * strike - 中划线 * strong - 粗体强调 * sub - 下标 * sup - 上标 * textarea - 多行文本输入框 * tt - 电传文本 * u - 下划线 * var - 定义变量
可变元素
它是基于以上两者随环境而变化的,它的基本概念就是根据上下文关系确定该元素是块元素还是内联元素。一旦确定了它的类别,它就遵循块元素或者内联元素的规则限制。* applet - java applet * button - 按钮 * del - 删除文本 * iframe - inline frame * ins - 插入的文本 * map - 图片区块(map) * object - object对象 * script - 客户端脚本
3.块级元素和内联元素的嵌套规则:
内联不能嵌套块级,块级可以嵌套内联元素<div><h1></h1><p></p></div> 正确(块级并列) <a href="#"><span></span></a> 正确(内联嵌套内联) <span><div></div></span> 错误(内联嵌套块级)
有几个特殊的块级元素只能包含内嵌元素,不能再包含块级元素,这几个特殊的标签是:h1、h2、h3、h4、h5、h6、p、dt。所以说p里面不能嵌套div,就是我犯的错误。
<p><ol><li></li></ol></p> —— 错 <p><div></div></p> —— 错
特殊的
里面可以嵌套div(
可以但不行) 块级元素与块级元素并列、内联元素与内联元素并列
<div><h2></h2><p></p></div> 正确 <div><a href="#"></a><span></span></div> 正确 <div><h2></h2><span></span></div> 错误(块级和内联并列了)
相关文章推荐
- HTML5 基础知识(一)
- 基于HTML5的数据可视化方法有哪些
- 想找一份Ruby on rails的工作,我应该知道哪些知识?
- html是什么,html5是什么?web开发必备知识之html
- HTML5有哪些新特性
- 【转载】成为一名嵌入式Linux开发工程师需要学习哪些知识?
- HTML5标签汇总及知识学习线路总结
- C语言编程预备知识(C语言学习随笔二)
- 学习SLAM需要哪些预备知识?
- 3到6年的.NETer应该掌握哪些知识?
- 开发android应用需要掌握哪些知识呢?
- HTML5的基本知识
- PMP认证知识普及:PMBOK中主要讲解哪些内容?
- 运维工程师到底在作什么?从何学起,掌握哪些知识?
- 一个老测试员对测试理解(需要掌握哪些知识)
- 电商之梳理html5相关知识---前端技术
- HTML5的新特性--基础知识(6)
- 一次完整的HTTP请知识求与响应涉及了哪些?
- HTML5 知识总结
- 成为一个Java的架构师要学习哪些知识?