整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

CSS 的元素显示模式

、块元素显示规律

切记:P标签里不能有DIV标签

二、行内元素显示规律

三、行内块元素显示规律

小总结:

四、元素显示模式转换

TML 实体

在 HTML 中,某些字符是预留的。

在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)。

字符实体类似这样:

&entity_name;
或者
entity_number;

如需显示小于号,我们必须这样写:< 或 <

提示:使用实体名而不是数字的好处是,名称易于记忆。不过坏处是,浏览器也许并不支持所有实体名称(对实体数字的支持却很好)。

HTML基础教程: 浏览器中符号是怎么显示出来的

不间断空格(non-breaking space)

HTML 中的常用字符实体是不间断空格( )。

浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格,在显示该页面之前,浏览器会删除它们中的 9 个。如需在页面中增加空格的数量,您需要使用 字符实体。

实例

<html>
<body>
<h2>字符实体</h2>
<p>&x;</p>
<p>用实体数字(比如"divide")或者实体名称(比如 "#247")替代 "X",然后查看结果。</p>
</body>
</html>

HTML基础教程: 浏览器中符号是怎么显示出来的

希望以上可以解决你们心中的一些疑惑,其中可能会有不对的地方或是需要改进的地方,欢迎留言纠正。感觉还不错欢迎关注收藏转载哦

html页面,显示的内容太多,会影响用户体验,如果有一些,点击才出现的内容,就可以减少内容的干扰。使用jquery就可以很快的实现。


例子

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>div隐藏测试</title>
 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
 </script>
</head>
<body>
 <button id="controller">隐藏或者显示</button>
 <div id="contents" style="display: none;">
 <p>div的内容</p>
 </div>
 <script>
 $("#controller").click(function () {
 if ($("#contents").is(":hidden")) {
 $("#contents").show()
 } else {
 $("#contents").hide()
 }
 })
 </script>
</body>
</html>


jqyery操作

$("#contents").is(":hidden") 可以判断是否是隐藏

$("#contents").show() 表示display:block,

$("#contents").hide() 表示display:none;

操作元素的属性

$("#contents").attr("style","display:none;"); //隐藏div

$("#contents").attr("style","display:block;"); //显示div

也可以操作css属性

$("#contents").css("display","none"); //隐藏div

$("#contents").css("display","block"); //显示div

也可以直接使用toggle转换开关实现

$("#contents").toggle()