第六届字节跳动青训营第一课 | 青训营

76 阅读3分钟

HTML

概念

超文本标记语言 HTML(英语:HyperText Markup Language,简称:HTML)是一种用来结构化 Web 网页及其内容的标记语言。

网页内容可以是:一组段落、一个重点信息列表、也可以含有图片和数据表。

HTML 不是一门编程语言,而是一种用于定义内容结构的标记语言。HTML 由一系列的元素组成,这些元素可以用来包围不同部分的内容,使其以某种方式呈现或者工作。

HTML元素

元素的主要部分有:开始标签、结束标签、内容;

开始标签、结束标签与内容相结合,便是一个完整的元素。 image.png

元素的属性:

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

其中class="editor-note"为元素p的属性,class 是属性名称,editor-note 是属性的值。

嵌套元素:

<p>My cat is <strong>very</strong> grumpy.</p>中将very<strong>元素包围,将其突出显示。

空元素:

不包含任何内容的元素称为空元素。比如 <img>元素:

其他元素:

  • <!DOCTYPE html>——文档类型。必不可少的开头,仅用于保证文档正常读取。
  • <html></html>——<html> 元素。该元素包含整个页面的所有内容,有时候也称作根元素。里面也包含了 lang 属性,写明了页面的主要语种。
  • <head></head>——<head>元素。所有那些你加到页面中,且不向看客展示的页面成员,都以这个元素为容器。其中包含诸如提供给搜索引擎的关键字和页面描述、用作风格化页面的 CSS、字符集声明等等。
  • <meta charset="utf-8">——该元素指明你的文档使用 UTF-8 字符编码,UTF-8 包括世界绝大多数书写语言的字符。它基本上可以处理任何文本内容。以它为编码还可以避免以后出现某些问题,没有理由再选用其他编码。
  • <title></title>——<title> 元素。该元素设置页面的标题,显示在浏览器标签页上,也作为收藏网页的描述文字。
  • <body></body>——<body>元素。该元素包含期望让用户在访问页面时看到的全部内容,包括文本、图像、视频、游戏、可播放的音轨或其他内容。

最常用的文本标记 HTML 元素:

标题

标题元素可用于指定内容的标题和子标题。 如:

<h1>主标题</h1>
<h2>顶层标题</h2>
<h3>子标题</h3>

段落

<p> 元素是用来指定段落的。

列表

标记列表通常包括至少两个元素。最常用的列表类型为:

  1. 无序列表(Unordered List)中项目的顺序并不重要,就像购物列表。用一个 <ul> 元素包围。
  2. 有序列表(Ordered List)中项目的顺序很重要,就像烹调指南。用一个 <ol>元素包围。

列表的每个项目用一个列表项目元素 <li>包围。

链接

要植入一个链接,我们需要使用一个简单的元素 — <a> — a 是 "anchor" (锚)的缩写。

添加步骤:

  1. 选择文本;
  2. 将文本包含在 <a>元素内;
  3. 为此 <a> 元素添加一个 href 属性;
  4. 把属性的值设置为所需网址;

心得:

本节课我认为学的是做前端网页最基础的东西,之前在做课设的时候也有所接触,但老师没讲,都是自己摸索;通过本节课我更加深入的学习了什么是HTML,以及怎么样去使用它。