前端小白历险记1-1:HTML入门

259 阅读3分钟

今天在视频里面学习了万维网的历史,还有HTML的演化和常用标签。主要内容如下:

HTML的诞生

HTML全称为超文本标记语言,由蒂姆·伯纳斯-李爵士发明。

HTML起手式

在vscode编辑器中,打感叹号和tab键,即可生成HTML的初始格式:

<!--文档类型-->
<!DOCTYPE html>
<!--HTML语标签,表示语言为中文-->
<html lang="zh-CN">
  <!--子元素head-->
  <head>
    <!--文件的字符编码为UTF-8-->
    <meta charset="UTF-8" />
    <!--可以防止页面缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <!--网页标题-->
    <title>my-index-page</title>
  </head>
  <!--子元素body-->
  <body></body>
</html>

常用表章节标签

  • 标题:<h1>~<h6>
  • 章节:<section>
  • 文章:<article>
  • 段落:<p>
  • 头部:<header>
  • 脚注:<footer>
  • 主要内容:<main>
  • 旁支内容:<aside>
  • 划分单元:<div>

全局属性

即所有标签都拥有的属性,它们可以用于所有元素:

<!--contenteditable="true"即为标签属性-->
<blockquote contenteditable="true">
    <p>Edit this content to add your own quote</p>
</blockquote>

常用的属性如下:

  • class:给标签分类。
  • contenteditable:表示元素可以被用户编辑。
  • hidden:隐藏某个标签。
  • id:给标签添加id。
  • style:给标签添加样式(颜色、字体等)。
  • tabindex:标签中的元素是否可以聚焦,通常用户使用tab键来选择不同的元素。

常用的内容标签

  • <ol>+<li>:表示多个有序列表项。
  • <ul>+<li>:表示多个无序列表项。
  • <dl>+<dt>+<dd>:包含属于定义和描述的列表。
<dl>
  <dt>Firefox</dt>
  <dd>A free, open source, cross-platform, graphical web browser
      developed by the Mozilla Corporation and hundreds of volunteers.
  </dd>
</dl>
  • <pre>:文本中的空白符(比如空格和换行符)都会显示出来。
  • <hr>:内容中间插入一条水平线。
  • <br>:在文本中换行。
  • <a>:可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。
<a href="https://example.com">Website</a>
  • <em>:在语气上强调,用于改变一个句子的意思(比如"我<em>喜欢</em>胡萝卜" 和"我喜欢<em>胡萝卜</em>",分别强调喜欢和胡萝卜),通常会被浏览器展示为斜体
  • <strong>:在内容上做强调对一个句子的部分增加重要性(比如 "警告! 这非常危险。"),通常被浏览器展示为粗体。
  • <code>:呈现一段计算机代码. 默认情况下, 它以浏览器的默认等宽字体显示。
  • <quote><blockquote>:代表其中的文字是引用内容。