前端学习回顾-05

最新推荐文章于 2024-07-22 15:19:55 发布

huaqi_

最新推荐文章于 2024-07-22 15:19:55 发布

阅读量318

点赞数

分类专栏：前端学习回顾文章标签：前端 html css3

本文链接：https://blog.csdn.net/huaqi_/article/details/122257942

版权

前端学习回顾专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章目录

1、块级元素和内联元素
2、布尔属性
3、省略包围属性值的引号
4、单引号或双引号
5、空格符与换行符的使用
6、HTML 内容中包含特殊字符
7、HTML 注释

HTML 基础延申

1、块级元素和内联元素

块级元素和内联元素为 HTML 中的两种重要的元素类别。
（1）块级元素：块级元素在页面中以块的形式展现，相对于其前面的内容它会出现在新的一行，其后的内容也会另起一行展现。块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等。一个以 block 形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其他块级元素中。
（2）内联元素通常出现在块级元素中并表示内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行。
代码示例：

<em>第一</em><em>第二</em><em>第三</em>

<p>第四</p><p>第五</p><p>第六</p>

结果展示：
块级元素和内联元素展示
注：HTML5 重新定义了元素的类别，尽管这些新的定义更精确，但比上述的”块级元素“和”内联元素“更难理解，因此我们仍然使用旧的定义。
注：不能把 HTML 中的块级元素和内联元素，与 the types of CSS boxes 中的同名定义相混淆，虽然它们默认是相关的，但改变 CSS 中 HTML 的显示类型并不会改变元素的分类。

2、布尔属性

布尔属性：只声明属性名，不书写属性值。
如果属性名与属性值相同，那么书写属性时，可以只声明属性名。
示例：

<!-- 使用disabled属性来防止终端用户输入文本到输入框中 -->
<input type="text" disabled="disabled">

<!-- 布尔属性写法，代码执行结果与上例相同 -->
<input type="text" disabled>

3、省略包围属性值的引号

在某些只有一个属性的元素中，你可能看到属性名后的属性值并没有被引号包围。（当然这种写法是可以被浏览器正常解析的，但是为了代码的可读性和扩展性，不推荐这种写法。)
示例：

<!-- 元素只拥有单属性时 -->
<a href=https://www.mozilla.org>收藏页面</a>

<!-- 元素拥有多属性时
     此时浏览器会将 title 属性解析为： title=The 。
     而且代码完全没有可读性
 -->
<a href=https://www.mozilla.org/ title=The Mozilla homepage>收藏页面</a>

4、单引号或双引号

元素的属性值既可以被单引号包围也可以被双引号包围。（但是只能被它们其中一种包围哦。）
示例（注意看引号嗷）：

<!-- 正确示例 -->
<a href=‘http://www.example.com’>示例站点链接</a>

<a href=“http://www.example.com”>示例站点链接</a>

<!-- 你也可以整点花活 -->
<a href='http://www.example.com' target="_blank">示例站点链接</a>

<!-- 错误示例（只能选择一种哦，不能贪心） -->
<a href="http://www.example.com'>示例站点链接</a>

当然了，引号也是可以嵌套的，规则与 HTML 元素嵌套规则一样的。示例：

<a href="http://www.ILY.com" title="我说：'你愿意吗'？">通往幸福站点</a>

5、空格符与换行符的使用

除去代码规则要求（HTML 元素名与属性名之间必须用空格隔开），我们的代码书写中是不必使用空格符或换行符的。但是为了代码可读性，我们需要借助它们来使我们的代码更加简洁美观。不用担心会降低代码执行效率，HTML 解释器会将连续出现的空白字符解析为一个单独空格符。示例：

<!-- 使用空格和换行符 -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>我的测试站点</title>
  </head>
  <body>
    <p>这是我的页面</p>
  </body>
</html>

<!-- 对比（不使用空格和换行符） -->
<!DOCTYPE html><html><head><meta charset="utf-8"><title>我的测试站点</title></head><body><p>这是我的页面</p></body></html>

6、HTML 内容中包含特殊字符

提问：如何在一个元素内容中表示该元素的开始标签呢？
例如，在 <p></p> 包围的元素内容中表示<p> ，如果直接书写的话，浏览器会将其解释为标签，就达不到我们想要的效果。这个时候就需要使用字符引用（表示字符的特殊编码）。示例：

<p>HTML 中用 <p> 来定义段落元素。</p>

<p>HTML 中用 &lt;p&gt; 来定义段落元素</p>

代码结果：
字符引用示例
常见字符引用（规则：由 & 符号开始，由 ; 符号结尾）：

原义字符	等价字符引用
<	<
>	>
"	"
’	'
&	&

更多字符引用请见：维基百科-XML和HTML字符实体引用列表

7、HTML 注释

HTML 具有在代码中编写注释的机制。浏览器渲染页面时，会忽略注释使其对用户不可见。注释的目的是允许你在代码中包含注释，以解释您的逻辑或编码。当你长时间未接触该代码后，以及他人想要对该代码进行修改或更新，这时注释的重要性就体现出来了。
综上所述，善用注释但是不能滥用注释哦。

以上解释均借鉴自MDN