HTML 介绍

内容目录

HTML 介绍

  • HTML 是一种用于创建网页的标准标记语言,使用一套标记标签来描述网页结构

下面是一个简单的 HTML 文档

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </body>
</html>

可以看到上述在 <></> 之间的标签,这些标签就是 HTML 标记标签,它们用来描述网页的结构。

HTML 标签通常是成对出现的,比如 <head></head><title></title><body></body><h1></h1><p></p>

Info

在一个网页中,<h1> 标签定义了标题<p> 标签定义了段落,但是我仍然可以使用 <div> 标签来定义标题,可以使用 <h1> 标签来定义段落,这并不影响网页的正常显示,但是这样做会使得网页的结构变得混乱,不利于搜索引擎的优化,也不利于网页的维护。

<strong><b>两个标签都是表示加粗的意思,两者在视觉效果上表现的是一致的,但是在语义上,<strong>的语义更加的强烈<b>只是表示加粗,而<strong>表示加粗的同时,还表示这段文字的重要性更高。在我们编写 HTML 代码的时候,应该尽量使用语义更加明确的标签。

所以语义化的 HTML 文档也就是一个写的很漂亮且便于理解与维护的 HTML 文档。


HTML 元素

  • HTML 元素是由开始标签结束标签内容组成的。<h1>My First Heading</h1> 就是一个元素。

空元素

  • HTML 元素中的内容是可以为空的,比如 <br><hr><img><input><link>,他们的作用分别是在网页中插入一个换行符,水平线,图片,输入框,链接等等。


HTML 属性

  • HTML 元素可以拥有属性,属性提供了有关元素的额外信息

<a> 标签的 href 属性指定了链接的地址,<img> 标签的 src 属性指定了图片的地址。

<a href="https://swfoodt.netlify.app">This is a link</a>

Html

更多 HTML 标签以及其属性请参考 HTML 标签参考手册.

相关笔记

css盒子模型

盒子模型 html 标签中每个标签都可以看作是一个盒子,盒子模型中包括内容(content)、内边距(padding)、边框(border)、外边距(margin)。 内容部分 下面是一个简单的盒子模型。 内容部分是指标签中的内容,如下图所示的蓝色区域:

阅读全文

css显示与定位

css 显示模式 css 块级元素会独占一行,比如 div、p、h1 等等。 css 行内元素不会独占一行,比如 span、a、strong 等等。 css 行内块级元素不会独占一行,但是可以设置宽高,比如 img、input 等等。

阅读全文

css选择器

css 标签选择器 css 标签选择器用来选中 html 中的标签,比如 h1、p、div 等等。 h1 { color: red; } css 类选择器 css 类选择器用来选中 html 中的类,比如 .title、.content 等等。 .title { color: red; }

阅读全文