、块元素显示规律
切记:P标签里不能有DIV标签
二、行内元素显示规律
三、行内块元素显示规律
小总结:
四、元素显示模式转换
在 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>
$("#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()
*请认真填写需求信息,我们会在24小时内与您取得联系。