526互联

HTML学习笔记——简单介绍

发布时间 2023-10-04 14:58:18作者: Gensokyo_Alice

什么是HTML

HTML: HyperText Markup Language

HTML是一种用来告知浏览器如何组织页面的标记语言。其由一系列的元素组成，这些元素用来包围或者标记不同部分的内容，让它以某种方式呈现或者工作。

简单拆分一个 HTML 元素

观察下面一个HTML元素

<p> Hello World! </p>

<p> Hello World! </p> 是一个HTML元素
<p> 是其开始标签。
</p> 是其结束标签。没有结束标签可能会产生一些不可名状的效果。
Hello World! 是其内容。

嵌套元素

你可以把元素放到其他元素之中，也就是嵌套。
比如

<p> Hello <strong> World! </strong> </p>

你需要确保元素被正确嵌套，比如上面的例子中，我们先开始 p 元素，然后才开始 strong 元素，那么我们需要先让 strong 元素结束，再让 p 元素结束。

所有元素都要正确的打开和关闭，才能确保按照你所想的方式展现

空元素

有时候我们可以发现有些元素没有结束标签，而是在开始标签后面添加了一个 /

<img src="..." alt="..." />

这样的标签我们叫做空标签，因为我们不需要它有内容。

块级元素和内联元素

  • 块级元素在页面中以块的形式展现。一个块级元素出现在它前面的内容之后的新行上。任何跟在块级元素后面的内容也会出现在新行上。块级元素通常是页面上的结构元素。例如，一个块级元素可能代表标题、段落、列表、导航菜单或页脚。一个块级元素不会嵌套在一个内联元素里面，但是它可能嵌套在另一个块级元素里面。
  • 内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组元素。内联元素通常不会导致文本换行。

属性

元素可以拥有属性，看起来就像给出的例子

<p class="MyText"> Hello World! </p>

其中 class="MyText" 就是一个属性。
属性必须包含如下三点：

  • 一个空格，它在属性和元素名称之间。如果一个元素具有多个属性，那么每个属性之间必须用空格分隔。
  • 属性名称，后面跟着一个等于号。
  • 一个属性值，由一对引号引起来。

布尔属性

有时候我们可能开到一个属性没有一个属性值，这些属性被称为布尔属性。布尔属性一般只能有一个值，这个值一般与属性名称相同。例如 disabled 属性，你可以将其分配给表单输入元素。用它来禁用表单输入元素，这样用户就不能输入了。

如下两种写法是等价的

<input type="text" disabled="disabled" />
<input type="text" disabled>

简单拆分一个 HTML文档

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>我的测试站点</title>
  </head>
  <body>
    <p>这是我的页面</p>
  </body>
</html>
  1. <!doctype html> 这是一个历史遗留问题，我们暂时不需要管它，只要记住需要包含这个才能使其他东西正常工作即可
  2. <html></html> 这个元素包裹了页面中所有的内容，有时我们称其为根元素。
  3. <head></head> 这个元素是一个容器，包含了所有你想包含在 HTML 页面中但是不在 HTML 页面中显示的内容。这些内容包含你想在搜索结果中出现的关键字和页面描述、CSS样式、字符集声明等等。
  4. <meta charser='utf-8'> 这个元素代表了不能由其他 HTML 元素表示的元数据。 charset 属性将你的文档字符集设定为 UTF-8。它可以帮助避免以后的一些问题。
  5. <title></title> 设置了页面的标题，也就是出现在该页面加载的浏览器标签的内容
  6. <body></body> 这个元素包含了你访问页面时所有显示在页面上的内容。