July's Blog

花有重开日，人无再少年

0%

HTML笔记

发表于 分类于 ，
本文字数： 2.6k 阅读时长 ≈ 2 分钟

标签

1
2
3
4
5
6
# 段落标签
<p>My cat is very grumpy</p>  

# 斜体
<em>This is my text.</em>

块级元素和内联元素

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

空元素

不是所有元素都拥有开始标签，内容和结束标记. 一些元素只有一个标签，通常用来在此元素所在位置插入/嵌入一些东西 。例如：元素<img>是用来在元素<img>所在位置插入一张指定的图片。例子如下：

1
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">

属性

1
<p class="editor-note">My cat is very grumpy</p>

这个class属性给元素赋了一个识别的名字（id），这个名字此后可以被用来识别此元素的样式信息和其他信息。

元素<a>是锚，它使被标签包裹的内容成为一个超链接。此元素也可以添加大量的属性，其中几个如下：

  • href: 这个属性声明超链接的web地址，当这个链接被点击浏览器会跳转至href声明的web地址。例如： href="https://www.mozilla.org/"。
  • title: 标题title 属性为超链接声明额外的信息，比如你将链接至那个页面。例如：title="The Mozilla homepage"。当鼠标悬浮时，将出现一个工具提示。
  • target: 目标target 属性指定将用于显示链接的浏览上下文。例如，target="_blank"将在新标签页中显示链接。如果你希望在目前标签页显示链接，只需忽略这个属性。
1
<p>A link to my <a href="https://www.mozilla.org/" title="The Mozilla homepage">favorite website</a>.</p>

布尔属性

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

1
2
3
4
<input type="text" disabled="disabled">

# 可以简写为
<input type="text" disabled>

分析html文档

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>
  1. <!DOCTYPE html>: 声明文档类型. 很久以前，早期的HTML(大约1991年2月)，文档类型声明类似于链接，规定了HTML页面必须遵从的良好规则，能自动检测错误和其他有用的东西。使用如下：
1
2
<!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>元素。 包含了你访问页面时所有显示在页面上的内容，文本，图片，音频，游戏等等。

实体引用

| 原义字符 | 等价字符引用 |
| —- | —- | —- |
| < | &lt; |
| > | &gt; |
| “ | &quot; |
| ‘ | &apos; |
| & | &amp; |

注释

为了将一段HTML中的内容置为注释，你需要将其用特殊的记号<!--和-->包括起来， 比如：

1
<!-- <p>I am!</p> -->
请作者喝冰阔落