一、Web三大元素

前端基础三件套

HTML (Hyper Text Markup Language) : 网页基础结构

CSS (Cascading Style Sheets）：网页展示效果

JS （JavaScript）：网页的功能与行为

二、HTML是什么

全程：Hyper Text Markup Language 超文本标记语言

一种用于定义内容结构的标记语言，由一系列的元素（element） 组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签（tags） 可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。

三、HTML元素

元素组成

<p>这    是   一   个元素</p>

HTML标签不区分大小写<p>与<P>是等价的,但从一致性、可读性等各方面来说，最好仅使用小写字母。

每个元素都含有几个部分

开始标签：<p>
结束标签：</p>
内容：“这是一个元素” 以上三者构成了一个元素,其输出为

这是一个元素

有的空格被省略了，这会在之后得到解释

嵌套元素

元素之间可以相互嵌套

<P><em>这是一个</em><strong>元素</stong></P>

这是一个元素

但是必须保证嵌套的正确性，以下为错误示范

<P><em>这是一个</em><strong>元素</P></stong>

块级元素、内联元素和行内块级元素

块级元素
- 出现在新的一行，其后的内容也会被挤到下一行展现。
- 能容纳其他块或内联元素
- 可以控制尺寸
- <div>、<p>、<h1>-<h6>
内联元素
- 内联元素不会导致文本换行
- 例如超链接元素<a>或者强调元素<em>和 <strong>。
行内块级元素
- 在行内排列不会单独占用一行。
- 支持设置宽高及垂直边距、边框。一个例子：

<em>内联元素1</em><em>内联元素2</em><em>内联元素3</em>
<p>块级元素1</p><p>块级元素2</p><p>块级元素3</p>

输出：

内联元素1内联元素2内联元素3

块级元素1
块级元素2
块级元素3

空元素

有的元素只有一个标签，如<img>

<img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/692069baa798408dbf838488b1b1f5c7~tplv-k3u1fbpfcp-watermark.image">

输出：

空元素（Empty elements）有时也被叫作 void elements.

属性

元素可以拥有属性，每个属性应该包含如下内容

在属性前与属性间的空格
属性名，称并伴随一个=。
属性值，由""引起来以元素<a>为例，其几个属性如下

href ：超链接Web地址，点击时将跳转到该地址
title ：悬停时显示的额外信息
target ：指定链接如何呈现，如target="_blank"表示将在将在新标签页显示内容

<p><em><a href="https://juejin.cn" title="掘金官网">掘金</em></p>

输出：

掘金

布尔属性

有的属性的值可以被省略，被称为布尔属性
其属性值与其属性名相同

例子：

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

以上两者等价

风格问题

省略包围属性值的引号

有的情况下，这是被允许的，如仅包含一个属性，且值中不包含空格时时

<a href=https://www.mozilla.org/>收藏页面</a>

但其它情况下，如添加一个额外属性时，则会出现问题

<a href=https://www.mozilla.org/ title= juejin homepage>主页</a>

输出（悬停以查看其title的属性值）：

主页 title属性被理解为两个属性，其值为"juejin"，还有一个homepage属性

单引号和双引号

以下两者均正确，但单双引号不应该混用

<a href="http://www.abc.com">示例</a>

<a href='http://www.abc.com'>示例</a>

在一个HTML中已使用一种引号，你可以在此引号中嵌套另外一种引号

<a href="http://www.abc.com" title="示例'abc'">示例站点链接</a>

HTML结构

这是一个完整的HTML页面：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>我的测试站点</title>
  </head>
  <body>
    <p>这是我的页面</p>
  </body>
</html>

<!DOCTYPE html>

doctype 声明不属于 HTML 标签；tag; 它是一条指令，告诉浏览器编写页面所用的标记的版本
HTML5普及前在 HTML 文档中规定 doctype 是非常重要的，这样浏览器就能了解预期的文档类型
在HTML5普及后，这种写法已经过时了，属于历史遗留问题

<html></html>

根元素，包裹了完整的html页面

<head></head>

包含在HTML页面中但不想在HTML页面中显示的内容
包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等

<body></body>

包含了访问页面时所有显示在页面上的内容，文本，图片，音频，游戏等

<title></title>

设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面

<meta>

元数据：描述数据的数据。本文仅示例部分用途charset/name

<meta charset="utf-8">

这个元素设置文档使用utf-8字符集编码。
utf-8字符集包含了绝大部分日常使用的文字

<meta name="keywords" content="HTML">

设置关键字

<meta name="description" content="HTML 基础">

设置页面描述

HTML中的空白

以下两段代码等价

<p>这两段 代 码 等 价</p>

<p>这两段        代
       码    等  价</p>

输出：

这两段代码等价

这两段代码等价

事实上，无论你在HTML元素的内容中使用多少空格(包括空白字符，包括换行)，当渲染这些代码的时候，HTML解释器会将连续出现的空白字符减少为一个单独的空格符。

但是，为了代码的可读性，我们常常使用空格来让每一个被嵌套的元素得到缩进！！！

字符引用：

在HTML中，字符 <, >,",' 和 & 是特殊字符。
当你想在文本中使用这些字符又不被识别为代码时，我们该怎么办呢？

答：使用字符引用 —— 这是一种表示字符的特殊编码，每个字符引用以符号&开始, 以分号(;)结束.

原义字符	等价字符引用
<	<
>
"	"
'	'
&	&

例子：

<p>HTML 中用 <p> 来定义段落元素。</p>

<p>HTML 中用 &lt;p&gt; 来定义段落元素</p>

输出：

HTML 中用
来定义段落元素。

HTML 中用 <p> 来定义段落元素

第一段代码被识别成了两个块级元素

HTML注释

HTML中有一种可用的机制来在代码中书写注释，来帮助自己和他人理解书写的代码如何工作

用 包围的内容即是注释

注释是被浏览器忽略的。
注释是对用户不可见的。
注释的目的是描述你的代码如何工作和不同代码的分工，利于代码的阅读性。案例：

<p>这不是注释</p>

<!-- 这是注释 -->

输出：

这不是注释

小结

利用本文所学内容，可以写出以下html页面，实现图像添加、元素嵌套、外部链接，试试吧！！！

示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <p><em>Hello</em> <strong>World!</strong></p>
    <p>下方是一个图片链接，请悬停并点击</p>
    <!--
    <a href="https://juejin.cn" title="掘金" target="_blank">
     <img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bb82b11254a14079bbfdb6ca04ada59b~tplv-k3u1fbpfcp-watermark.image"></a>
  </body>
</html>

输出：

Hello World!

下方是一个图片链接，请悬停并点击

【青训营】- 前端小白的HTML基基础 - HTML元素与基本结构