HTML

2022-04-21
3分钟阅读时长

HTML (HyperText Markup Language) 超文本标记语言是一种用来告知浏览器如何组织页面的标记语言。

它由一系列的元素(elements)组成,这些元素可以用来包围不同部分的内容,使其以某种方式呈现或者工作。 一对标签( tags)可以为一段文字或者一张图片添加超链接,将文字设置为斜体,改变字号,等等。

HTML元素

嵌套元素

可以把元素放到其它元素之中——这被称作嵌套,类似于套娃,一层叠着一层。

块级元素和内联元素

  • 块级元素在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行,其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容,例如段落、列表、导航菜单、页脚等等。一个以block形式展现的块级元素不会被嵌套进内联元素中,但可以嵌套在其它块级元素中。
  • 内联元素通常出现在块级元素中并环绕文档内容的一小部分,而不是一整个段落或者一组内容。内联元素不会导致文本换行:它通常出现在一堆文字之间例如超链接元素<a>或者强调元素<em>或者强调元素<strong>

空元素

不是所有元素都拥有开始标签,内容,结束标签。一些元素只有一个标签,通常用来在此元素所在位置插入/嵌入一些东西。

元素的属性

属性包含元素的额外信息,但是这些信息不会出现在实际的内容中。

&amp;amp;lt;p class=&ldquo;editor-note&rdquo;&gt;我的猫咪脾气爆&amp;amp;lt;/p&gt;

一个属性必须包含如下内容:

  1. 一个空格,在属性和元素名称之间。(如果已经有一个或多个属性,就与前一个属性之间有一个空格。)
  2. 属性名称,后面跟着一个等于号。
  3. 一个属性值,由一对引号“ ”引起来。

元素的布尔属性

没有值的属性,是合法的。这些属性被称为布尔属性,只能有跟它的属性名一样的属性值。例如disabled属性,他们可以标记表单输入使之变为不可用(变灰色),此时用户不能向他们输入任何数据。

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

<!-- 下面这个输入框没有disabled属性,所以用户可以向其中输入 -->
<input type="text">

一个html 文件的组成部分

  1. <!DOCTYPE html> : 声明文档类型. 很久以前,早期的HTML(大约1991年2月),文档类型声明类似于链接,规定了HTML页面必须遵从的良好规则,能自动检测错误和其他有用的东西。使用如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    

    这种写法已经过时了,只需要知道 <!DOCTYPE html>是最短有效的文档声明形式。

  2. <html></html>: <html>元素。这个元素包裹了整个完整的页面,是一个根元素。

  3. <head></head>: <head>元素。这个元素是一个容器,它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述,CSS样式,字符集声明等等。

  4. <meta charset="UTF-8">: 这个元素设置文档使用UTF-8字符集编码,一般均使用UTF-8。

  5. <title></title>: 设置页面标题,出现在浏览器标签上,当你标记/收藏页面时它可用来描述页面。

  6. <body></body>: <body>元素。 包含了你访问页面时所有显示在页面上的内容,文本,图片,音频,游戏等等。

html中的空格

在HTML元素的内容中使用多少空格(包括空白字符,包括换行),当渲染这些代码的时候,HTML解释器会将连续出现的空白字符减少为一个单独的空格符。

html中的特殊符号

在HTML中,字符 <, >,",'& 是特殊字符. 它们是HTML语法自身的一部分。

原义字符 等价字符引用
< &lt;
> &gt;
" &quot;
' &apos;
& amp;

html注释

<p>我在注释外!</p>

<!-- <p>我在注释内!</p> -->