HTML5学习笔记（四）
2019-08-10 本文已影响0人
理以周
1、前端攻城狮的自我修养：
1.1 注释：如无必要，勿增实体的原则
- 通常写注释是为了告诉以后的自己或者和你共同开发的小伙伴：你的代码是做什么的，以及你修改了哪些内容，在复杂的逻辑结构前稍微做一下解释，看代码的人才不会像丈二摸不着头脑。
- HTML的注释：
<!--在此处写注释-->
- CSS的注释：
/*在此写注释*/
- JavaScript的注释：
//单行的注释
/*多行的注释*/
2、相拥和独行：（有些元素总喜欢报团取暖，而有些则踽踽独行）
- 块级元素(block element):块级元素总是在新的行上开始，并尽可能地占据本行全部可用的宽度；
- 块级元素有这些：<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>~<h6> <ol> <output> <p> <pre> <section> <table> <tfoot> <ul> <video>
- 行内元素：行内元素不会另起一行，它也只占用必要的宽度；
- 行内元素有这些：<a> <abbr> <acronym> <b> <bdo> <big>
<button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <q> <samp> <script> <select> <small> <span> <strong> <textarea> <time> <tt> <var>
块级元素讲究排场，行内元素勤俭节约
- 行内元素有这些：<a> <abbr> <acronym> <b> <bdo> <big>
<!--请在下面添加案例-->
<a href="http://bbs.fishc.com">论坛</a>
<a href="htttp://www.jianshu.com/">简书</a>
<p>踽踽独行</p>
<p>形单影只</p>
image.png
- <span>
<!DOCTYPE html>
<html>
<head>
<title>相拥和独行</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="keywords" content="周小雨进阶前端大神记">
<meta name="description" content="《跟随小甲鱼成为前端大神》">
<meta name="author" content="Belle zhou">
<style>
span {color:red}
</style>
</head>
<body>
<p>黑夜给了我黑色的<span>眼睛</span>,</p>
<p>我却用它寻找<span>光明</span>。</p>
</body>
</html>
image.png
-
如果想要让两个行内元素也能够独占一行，应该怎么做呢？(使用br元素换行)
image.png
- 行内元素与块级元素对比：
- 一般情况下，行内元素只能包含数据和其他行内元素。
- 而块级元素可以包含行内元素和其他块级元素；
- 这种结构上的包含继承区别可以使块级元素创建比行内元素更“大型”的结构；
- 为什么要将内容分为块级和行内？
- 因为HTML要求浏览器将连续的空白字符合并为一个空格；
3、所见即所得：
- pre元素：定义预格式化文本，预格式化就是保留文本在源代码中的格式，使得页面中现实的和源代码中的效果完全一致；
- HTML字符实体(Character Entities)
<!DOCTYPE html>
<html>
<head>
<title>pre元素演示</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="keywords" content="周小雨进阶前端大神记">
<meta name="description" content="《跟随小甲鱼成为前端大神》">
<meta name="author" content="Belle zhou">
</head>
<body>
<!--演示pre元素的使用-->
<pre>
<!DOCTYPE html>>
<html>>
<head>>
<title>>pre元素演示</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="keywords" content="周小雨进阶前端大神记">
<meta name="description"content="《跟随小甲鱼成为前端大神》v>
<meta name="author" content="Belle zhou">
</head>
<body>
<!--演示pre元素的使用-->>
</body>
</html>
</pre>
</body>
</html>
在浏览器上的显示
image.png
