前端学习--html学习01

html简单了解

一、学习的网址

　　学习链接：HTML 基础 - 学习 Web 开发 | MDN (mozilla.org)

二、学习的内容

　　1、HTML是什么？

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

　　2、元素详解

　　　　开始标签、结束标签、内容、元素

　　3、嵌套元素

　　　　可以将一个元素置于其他元素之中 —— 称作嵌套

　　4、空元素

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

　　5、HTML文档详解

<!DOCTYPE html>  — 文档类型
<html>   — <html> 元素。该元素包含整个页面的内容，也称作根元素
  <head>  — <head> 元素。该元素的内容对用户不可见，其中包含例如面向搜索引擎的搜索关键字（keywords）、页面描述、CSS 样式表和字符编码声明等。
    <meta charset="utf-8">  — 该元素指定文档使用 UTF-8 字符编码
    <title>测试页面</title>  — <title> 元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。
  </head>
  <body>   — <body> 元素。该元素包含期望让用户在访问页面时看到的内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。
    <img src="images/firefox-icon.png" alt="测试图片">
  </body>
</html>

　　6、图像

<img src="images/firefox-icon.png" alt="测试图片">

- 　　该元素通过包含图像文件路径的地址属性 src，可在所在位置嵌入图像。
- 　　文字属性 alt，是图像的描述内容，用于当图像不能被用户看见时显示。

　　7、标记文本

- <h> 标题
- <p> 段落
- <ul> 无序列表
- <ol> 有序列表

　　8、链接

<a href="https://www.mozilla.org/zh-CN/about/manifesto/">Mozilla 宣言</a>

三、练习

　　1、效果图

　　2、自己的练习代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试页面</title>
</head>
<body>
    <h1>Mozilla 酷毙了！</h1>
    <img src="img/firefox-icon.png" alt="火狐头像">
    <p>Mozilla 是一个全球社区，这里聚集着来自五湖四海的</p>
    <ul>
        <li>技术人员</li>
        <li>思考者</li>
        <li>建造者</li>
    </ul>
    <p>我们致力于让Internet保持活力，保持畅通，人人皆可贡献，人人皆可创造。我们坚信：开放平台的协作对于人的发展至关重要，也决定着我们共同的未来。</p>
    <p>为了达成我们共同的理想，我们遵循一系列的价值观和理念，请参阅<a href="https://www.mozilla.org/zh-CN/about/manifesto/">Mozilla 宣言</a></p>
</body>
</html>