HTML是什么？

HTML（Hypertext Markup Language）超文本标记语言。

纯文本只能保存文字内容。超文本可以保存除文字之外的图片、音频等内容。

可以通过标签来标记内容（标签都是成对出现的，有开始和结束）
例如：<h1>一级标题</h1>

负责网页三个要素之中的结构。
HTML使用标签的形式来标识网页中的不同组成部分。
所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另外一个页面。

HTML标准结构

<!DOCTYPE html>
<!-- HTML根标签 ：一个页面有且只有一个根标签，网页中所有内容都应该在该html根标签中-->
<html>
    <!-- head标签： 该标签中的内容不会再网页中直接显示，它用来帮助浏览器解析页面-->
    <head>
        <!-- 
            title标签： 标题标签，默认会显示在浏览器的标题栏中。
            搜索引擎在检索页面时，会首先检索title标签中的内容。
            它是网页中对于搜索引擎来说最重要的内容，会影响到网页在搜索引擎中的排名
        -->
        <title>这是一个非常好的网页</title>
    </head>
    <!-- body标签：用来设置网页的主体内容，网页中所有可见的内容，都应该在body中编写 -->
    <body>
        <h1>这是我的第一个网页</h1>
    </body>
</html>

注释

<!-- 这是一个注释 -->
<!-- 
    功能：
    作者：
    日期：
 -->

在这个结构中，可以来编写HTML的注释
注释的内容，不会再页面中显示，但是可以在源码中查看
我们可以通过编写注释对代码进行描述，从而帮助其他的开发人员工作
一定要养成良好的编写注释的习惯，但是注释一定简洁明了。

属性

可以通过属性来设置标签如何处理标签中的内容
属性需要写在开始标签中，实际上就是一个 名&值(属性名=“属性值”) 对的内容
一个标签可以同时设置多个属性，属性之前需要用空格隔开

<h1>这是我的<font color="red" size="7">第一个</ront>网页</h1>

可以去 W3C HTML标签列表 查看都有什么属性

文档声明

为了让浏览器知道使用的HTML版本，我们需要在网页代码的最上边添加一个doctype的声明，来告诉浏览器网页的版本。
其中HTML5的文档声明如下：

<!--
    html5的文档声明，声明当前网页是按照HTML5的标准编写的
    编写网页时一定要将HTML5的文档声明写在网页的最上面
    -->
<!DOCTYPE html>
<html>
    <head>
        <title>这是一个非常好的网页</title>
    </head>
    <body>
        <h1>这是我的第一个网页</h1>
    </body>
</html>

注意：如果不写文档声明，则会导致有些浏览器进入一个怪异模式，进入怪异模式后，浏览器解析页面会导致页面无法正常显示，所以，一定要写文档声明。

为了兼容一些一些旧的页面，浏览器中设置了两种解析模式：
1.标准模式（Standards Mode）
2.怪异模式（Quirks Mode）

乱码的问题

首先介绍一下进制的基础知识

进制

几进制就是满几进一

二进制
1. 0 1
2. 10 11 100
十进制
1. 0 1 2 3 4 5 6 7 8 9
2. 10 11 12
十六进制
1.满16进1
2.0 1 2 3 4 5 6 ...9 a b c d e f
3.由于16进制满16进1，所以设置几个特殊字符表示 10 11 12 13 14 15 16
4.使用a b c d e f分别表示 10 11 12 13 14 15 16
八进制
1. 满8进1
2. 0 1 2 3 4 5 6 7
3. 10 11 12 ..17 20 21

乱码的原因以及解决方法

在计算机保存的任何内容，最终都需要转换为0 1这种二进制编码来保存，包括网页中的内容。
在读取内容时，需要将二进制编码，转换为正确的过程。
编码：依据一定的规则，将字符转换为二进制的编码的过程
解码：依据一定的规则，将二进制编码转换为字符的过程
字符集：编码和解码所采用的规则，称之为字符集。（ASCII、GBK、UTF-8）
乱码的原因：编码和解码采用的字符集不同
在中文系统中，默认采用GB231编码
解决办法：通过<mata />标签中告诉浏览器网页的编码

<!DOCTYPE html>
<html>
    <head>
    <!--
    需要告诉浏览器，网页所采用的编码字符集
    mata标签用来设置网页的一些元数据，比如网页的字符集、关键字、简介
    mata是一个自结束标签，编写一个自结束标签时，可以在开始标签中添加一个 /
    -->
        <mata charset="utf-8" />
        <title>这是一个非常好的网页</title>
    </head>
    <body>
        <h1>这是我的第一个网页</h1>
    </body>
</html>

常用标签

标题标签

在HTML中，一共有六级标题标签（h1-h6）
在显示效果上 h1最大，h6最小，但文字的大小我们并不关心
使用Html标签时，关心的是标签的语义，我们使用的是语义化标签
6级标题中，h1最重要，表示一个网页的主要内容，h2-h6重要性依次降低
一般页面中标题标签只使用h1、h2、h3，h3之后的基本不使用

注意：对于搜索引擎来说，h1的重要性仅次于title，搜索引擎检查完title，会立即查看h1

<!DOCTYPE html>
<html>
    <head>
        <mata charset="utf-8" />
        <title>这是一个非常好的网页</title>
    </head>
    <body>
        <!--
              在HTML中，一共有六级标题标签**（h1-h6）**
              在显示效果上 h1最大，h6最小
          -->
        <h1>一级标题</h1>
        <h2>二级标题</h2>
        <h3>三级标题</h3>
        <h4>四级标题</h4>
        <h5>五级标题</h5>
        <h6>六级标题</h6>
    </body>
</html>

段落标签

段落标签用于表示内容中的一个自然段
使用<p></p>标签来表示一个段落
p标签中的文字，默认会占用一行，且段与段之间会有一个间隔

在HTML中，字符之间再多的空格，浏览器也会当成一个空格解析，换行也会当成一个空格解析。可以使用 <br />标签来表示一个换行
<hr />可以在页面中生成一套水平线

<!DOCTYPE html>
<html>
    <head>
        <mata charset="utf-8" />
        <title>这是一个非常好的网页</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <!--
              段落标签用于表示内容中的一个自然段
              使用p标签来表示一个段落
              p标签中的文字，默认会占用一行，且段与段之间会有一个间隔
        -->
        <p>我是一个p标签，用来表示一个段落</p>
        <!--
        在HTML中，字符之间再多的空格，浏览器也会当成一个空格解析，换行也会当成一个空格解析。
        在页面中可以使用br标签来表示一个换行，br标签是一个自结束标签
`        -->
        <p>
          锄禾日当午，<br />
          汗滴禾下土。<br />
          谁知盘中餐，<br />
          粒粒皆辛苦。<br />
        </p>
        <!--
        hr标签是一个自结束标签可以也页面中生成一条水平线。
`       -->
        <hr />
    </body>
</html>

实体

在HTML中，一些如<、>这种特殊字符是不能直接使用的
需要使用一些特殊的符号来表示这些特殊字符，这些特殊符号我们称之为实体（转义字符串）
实体的名字：

<       ：&lt;
>       ：&gt;
空格      ：nbsp;
版权符号  ：&copy;

浏览器解析到实体时，会自动讲实体转换为其自动的字符

<!DOCTYPE html>
<html>
    <head>
        <mata charset="utf-8" />
        <title>这是一个非常好的网页</title>
    </head>
    <body>
        <!--
        在HTML中，一些如<、>这种特殊字符是不能直接使用的
        需要使用一些特殊的符号来表示这些特殊字符，这些特殊符号我们称之为实体（转义字符串）
        实体的名字：
                      < ：&lt;
                      >：&gt;
                     空格：&nbsp;
                     版权符号：&copy;
          --> 
    a&lt;b&gt;c
    </body>
</html>

可以点击 W3C HTML实体 查看都有什么实体

图片

使用img标签来向网页中引入一个外部图片
img标签也是一个自结束标签
img标签属性：
src：设置一个外部图片的路径
alt：可以用来设置在图片不能显示时，对图片的描述
width：用来修改图片的宽度，一般用px作为单位
height：用来修改图片的高度，一般用px作为单位
图片的格式
JPEG（JPG）：
-- JPEG图片支持的颜色比较多，图片可以压缩，但不支持透明
-- 一般使用JPEG来保存照片等颜色丰富的图片
GIF：
-- GIF支持的颜色比较少，只支持简单透明，支持动态图
PNG：
-- PNG 支持的颜色比较多，并且支持复杂透明
-- 可以用来显示颜色复杂的透明的图片
图片使用原则：
效果不一致，使用效果好的
效果一致，使用小的

注意：
src属性配置的是图片的路径，日期我们所需要使用的路径全都是相对路径。相对路径指相对于当前资源所在目录的位置。

相对路径在下级的直接写 src=“文件夹名/a.gif”。相对路径在上级的直接写 src=“../a.gif”。
相对路径在每多返回一级就多使用一次“../”，返回上上级的直接写 src=“../../a.gif”

搜索引擎可以通过alt属性来识别不同的图片，若不写alt属性，则搜索引擎不会对img中的图片进行收录。
当宽度和高度两个属性只设置一个，则另一个也会等比例设置大小，如果两个都设置则按设置的来。一般开发中除了自适应的页面，不建议设置width和height。

<!DOCTYPE html>
<html>
    <head>
        <mata charset="utf-
8" />
        <title>图片标签</title>
    </head>
    <body>
        <!--
            img标签属性：
            src：设置一个外部图片的路径
            alt：可以用来设置在图片不能显示时，对图片的描述
            width：用来修改图片的宽度，一般用px作为单位
            height：用来修改图片的高度，一般用px作为单位
        -->
    <!--html文件与图片在同一个文件夹-->
    <img src="a.gif" alt="这是一个大松树">

    <!--html文件与图片不在同一个文件夹-->
    <!--
         src属性配置的是图片的路径，日期我们所需要使用的路径全都是相对路径
         相对路径指相对于当前资源所在目录的位置
         相对路径在下级的直接写 src=“文件夹名/a.gif”
         相对路径在上级的直接写 src=“../a.gif”
         相对路径在每多返回一级就多使用一次“../”，返回上上级的直接写 src=“../../a.gif”
    -->
    <img src="../src/2.gif" alt="这是一个大松树">
    </body>
</html>

<mata />标签

使用mata标签可以用来设置网页的关键字和描述
搜索引擎在检索页面时，会同时检索页面中的关键词和描述，但是这两个值不会影响页面在搜索引擎中的排名
使用mata标签可以用来做请求的重定向
<mata http-equiv="refresh" content="秒数;url=目标路径" />

<!DOCTYPE html>
<html>
    <head>
    <mata charset="utf-8" />
    <!--
      使用mata标签可以用来设置网页的关键字
    -->
   <mata name="keywords" content="HTML5,JavaScript,前端" />
   <!--
      使用mata标签可以用来指定网页的描述
    -->     
   <mata name="description" content="发布h5,js等前端相关的信息" />
   <!--
      使用mata标签可以用来做请求的重定向
    -->     
   <mata http-equiv="refresh" content="5;url=http://blog.ineazy.com" />
        <title>这是一个非常好的网页</title>
    </head>
    <body>
        <h1>这是我的第一个网页</h1>
    </body>
</html>

可以点击 HTML <meta> 标签来查看 <meta> 标签的具体属性

内联框架

使用内联框架就可以引入一个外部的页面，使用iframe来创建一个内联框架
属性：
src：指向一个外部页面的路径，可以使用相对路径
name：可以为内联框架指定一个name属性
width：宽
height：高

注意：在现实开发中不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索

<!DOCTYPE html>
<html>
    <head>
    <mata charset="utf-8" />
        <title>内联框架</title>
    </head>
    <body>
    <!--
      使用内联框架就可以引入一个外部的页面
    -->
    <iframe src="http://www.baidu.com" name="百度"></iframe>
    </body>
</html>

超链接

使用超链接可以让我们从一个页面跳转到另一个页面
使用a标签来创建一个超链接
属性：
href：指向链接跳转的目标地址，可以写一个相对路径也可以写一个地址
target：属性可以用来指定打开链接的位置
可选值：
_self，表示在当前窗口中打开（默认值）
_blank，在新的窗口中打开链接
可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开

<!DOCTYPE html>
<html>
    <head>
    <mata charset="utf-8" />
        <title>超链接</title>
    </head>
    <body>
    <!--
      使用a标签来创建一个超链接
      属性：
          href：**指向链接跳转的目标地址，可以写一个相对路径也可以写一个地址
          target：属性可以用来指定打开链接的位置
          可选值：
              _self，表示在当前窗口中打开（默认值）
              _blank，在新的窗口中打开链接
              可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开
    -->
   <a href="http://www.baidu.com">我是一个超链接</a>
   <a href="demo1.html">我也是一个超链接</a>
   <a href="demo1.html" target="_blank">在新的页面打开</a>
    </body>
</html>

可以点击 HTML <a> 标签来查看 <meta> 标签的具体属性

<center>标签

center标签中的内容，会默认在页面中居中显示我们可以将要居中的元素全都放到center标签里

<!DOCTYPE html>
<html>
    <head>
    <mata charset="utf-8" />
        <title>center标签</title>
    </head>
    <body>
        <center>
            <p>Hello World!</p>
        </center>
    </body>
</html>

块和内容

块元素

div就是一个块元素
所谓的块元素就是会独占一行的元素,无论其他内容有多少他都会独占一行
常见块元素：p h1 h2 h3 ...
div这个标签没有任何语义，就是一个纯粹的块元素，并且不会为它里边的元素设置任何的默认样式
div元素主要用来对页面进行布局的

内联元素

span是一个内联元素（行内元素）
所谓行内元素，指的是只占自身大小的元素，不会占用一行
常见内联元素： a img iframe span
用来选中文字，然后为文字来设置样式

注意：
块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式。
一般情况下只用块元素去包含内联元素，而不会使用内联元素去包含一个块元素。
a元素可以包含任意元素，但是除它本身。
p元素不可以包含任何其他的块元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            块元素
            div就是一个块元素
            所谓的块元素就是会独占一行的元素,无论其他内容有多少他都会独占一行
            常见块元素：p h1 h2 h3 ...
            div这个标签没有任何语义，就是一个纯粹的块元素，并且不会为它里边的元素设置任何的默认样式
            div元素主要用来对页面进行布局的
        -->
        
        <div style="background-color: red; width: 200px;">
            我是一个div
        </div>
        
        <div style="background-color: yellow; width: 200px;">
            我是一个div
        </div>
        
        <hr />
        <!--
            内联元素
            span是一个内联元素（行内元素）
            所谓行内元素，指的是只占自身大小的元素，不会占用一行
            常见内联元素： a img iframe span
            span没有任何语义，span标签专门用来选中文字，然后为文字来设置样式
        -->
        <span>我是一个span</span>
        <span>我是一个span</span>
        <span>我是一段文字</span>
        <!-- 
            块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式
            一般情况下只用块元素去包含内联元素，而不会使用内联 元素去包含一个块元素
            a元素可以包含任意元素，但是除它本身
            p元素不可以包含任何其他的块元素
        -->
        <div>
            <span>我是一段文字</span>
        </div>
    </body>
</html>

HTML语法规范

HTML中不区分大小写，但是我们一般都使用小写
HTML中的注释不能嵌套
HTML标签必须结构完整，要么成对出现，要么自结束标签
HTML标签可以嵌套，但是不能交叉嵌套
HTML标签中的属性必须有值，且值必须加引号（双引号单引号都可以）

练习

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>练习</title>
    </head>
    <body>
        <center>
            <!-- 
                跳转到id为bottom的元素所在的位置
                直接在href中写 #id属性值
            -->
            <a href="#bottom">去底部</a>
            <a href="#hello">去指定位置</a>
            <h1>这是我的个人博客</h1>
            <hr />
            <h2>东风破</h2>
            <!-- 创建超链接时，如果地址不确定可以直接写一个#作为占位符 -->
            <a href="#">周杰伦</a>
            
            <p id="hello">
                一盏离愁 孤单伫立在窗口 <br />
                我在门后 假装你人还没走 <br />
                旧地如重游 月圆更寂寞 <br /> 
                夜半清醒的烛火 不忍苛责我 <br />
                一壶漂泊 浪迹天涯难入喉 <br />
                你走之后 酒暖回忆思念瘦<br />
                水向东流 时间怎么偷<br />
                花开就一次成熟 我却错过<br />
                谁在用琵琶弹奏 一曲东风破<br />
                岁月在墙上剥落 看见小时候<br />
                犹记得那年我们都还很年幼<br />
                而如今琴声幽幽 我的等候你没听过<br />
                <img src="1.jpg" alt="图片" width="300px" /> <br />
                谁在用琵琶弹奏 一曲东风破<br />
                枫叶将故事染色 结局我看透<br />
                篱笆外的古道我牵着你走过<br />
                荒烟漫草的年头 就连分手都很沉默<br />
                一壶漂泊 浪迹天涯难入喉<br />
                你走之后 酒暖回忆思念瘦<br />
                水向东流 时间怎么偷<br />
                花开就一次成熟 我却错过<br />
                谁在用琵琶弹奏 一曲东风破<br />
                岁月在墙上剥落 看见小时候<br />
                犹记得那年我们都还很年幼<br />
                而如今琴声幽幽 我的等候你没听过<br />
                谁在用琵琶弹奏 一曲东风破<br />
                枫叶将故事染色 结局我看透<br />
                篱笆外的古道我牵着你走过<br />
                荒烟漫草的年头 就连分手都很沉默<br />
                <img src="2.jpg" alt="图片2" width="300px" /> <br />
                谁在用琵琶弹奏 一曲东风破<br />
                岁月在墙上剥落 看见小时候<br />
                犹记得那年我们都还很年幼<br />
                而如今琴声幽幽 我的等候你没听过<br />
                谁在用琵琶弹奏 一曲东风破<br />
                枫叶将故事染色 结局我看透<br />
                篱笆外的古道我牵着你走过<br />
                荒烟漫草的年头 就连分手都很沉默<br />
            </p>
            
            <hr />
            
            友情链接:<a href="#">A网站</a> | <a href="#">B网站</a> | <a href="#">C网站</a> <br /><br />
            
            <!-- 
                如果将链接地址设置为#，则点击超链接以后，会自动跳转到当前页面的顶部
                
                html中有一个属性，每一个元素都可以设置，该属性可以作为标签的唯一标识
                这个属性就是id，id属性在同一个页面中只能有一个不能重复
            -->
                <a id="bottom" href="#">回到顶部</a> | 
                
                <!-- 
                    发送电子邮件的超链接，点击链接以后可以自动打开计算机中默认的邮件客户端
                    href="mailto:邮件地址"
                    
                    当点击这个超链接时，会默认打开计算机的默认电子邮件客户端，并且将收件人设置mailto后的邮件地址
                -->
                
                <a href="mailto:abc@atguigu.com">联系我们</a>
        </center>
        
        
    </body>
</html>

练习总结：

如果将链接地址设置为#，则点击超链接以后，会自动跳转到当前页面的顶部
html中有一个属性，每一个元素都可以设置，该属性可以作为标签的唯一标识
这个属性就是id，id属性在同一个页面中只能有一个不能重复
发送电子邮件的超链接，点击链接以后可以自动打开计算机中默认的邮件客户端
href="mailto:邮件地址"
当点击这个超链接时，会默认打开计算机的默认电子邮件客户端，并且将收件人设置mailto后的邮件地址

文本标签

<em>和<strong>标签

em 标签用于表示一段内容中的重点
strong 标签用于表示一个内容的重要性
这个两个标签可以单独使用，也可以一起使用
通常 em显示为斜体，而strong显示为粗体

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!-- 
            em和strong
            - 这两个标签都表示一个强调的内容
                em主要表示语气上的强调，em在浏览器中默认使用斜体显示
                strong表示强调的内容，比em更强烈，默认使用粗体显示
        -->
        <p>
            今天天气<em>真不错</em>
        </p>
        
        <p>
            <strong>
                注意：如果你不认真上课，你就找不到好工作！
            </strong>
        </p>
    </body>
</html>

i标签和b标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            i标签中的内容会以斜体显示
            b标签中的内容会以加粗显示
            i和b没有任何语义
            h5规范中规定，对于不需要着重的内容而是单独的加粗或者是斜体
            就可以用b标签和i标签
        -->
        <p>
            <i>我是i标签中的内容</i>
            <b>我是b标签中的内容</b>
        </p>
    </body>
</html>

small标签

small标签中的内容会比他的父元素中的文字要小一些
在h5中使用small标签来列示一些细则一类的内容
比如：合同中小字，网站的版权声明都可以放small中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            small标签中的内容会比他的父元素中的文字要小一些
                在h5中使用small标签来列示一些细则一类的内容
                比如：合同中小字，网站的版权声明都可以放small中
        -->
        <p>
            我是p标签中的内容<small>我是small标签中的内容</small>
        </p>
    </body>
</html>

cite标签

网页中所有加书名号的内容都可以使用cite标签，来表示参考的内容
比如：书名、歌名、话剧名、电影名

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            网页中所有加书名号的内容都可以使用cite标签，来表示参考的内容
                比如：书名、歌名、话剧名、电影名
        -->
        <p>
            <cite>论语</cite> 是我最喜欢的一本书
        </p>
    </body>
</html>

q标签和 blockquote标签（引用）

q标签表示一个短的引用（行内引用）
q标签引用的内容浏览器会默认加引号
blockquote标签表示一个长引用（块级引用）
blockquote标签是块元素，独占一行

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            q标签表示一个短的引用（行内引用）
            q标签引用的内容浏览器会默认加引号
        -->
        <p>
            子曰：<q>学而时习之不亦说乎！</q>
        </p>
        <!--
            blockquote标签表示一个长引用（块级引用）
            块元素，独占一行
                -->
        <div>
            子曰：
            <blockquote>
                有朋自远方来，乐呵乐呵
            </blockquote>
        </div>
    </body>
</html>

sup标签&sub标签

使用sup标签设置一个上标
sub标签用了表示一个下标

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            使用sup标签设置一个上标
        -->
        <p>
            2 <sup>2</sup>
        </p>
        <p>
            赵薇 <sup><a href="#">[1]</a></sup>
        </p>
        <!--
            sub标签用了表示一个下标
        -->
        <p>H<sub>2</sub>O</p>
    </body>
</html>

del标签

使用del标签来表示一个删除的内容
del标签中的内容，会自动添加一个删除线

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
 <!--
            使用del标签来表示一个删除的内容
            del标签中的内容，会自动添加一个删除线
        -->
        <p>
            <del>17.75</del> <br />
            15.54 <br />
        </p>
    </body>
</html>

ins标签

ins表示一个插入的内容
ins中的内容，会自动添加下划线

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            ins表示一个插入的内容
            ins中的内容，会自动添加下划线
        -->
        <p>
            我们的老师真 <ins>好</ins>啊！
        </p>
    </body>
</html>

pre标签&code标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            需要页面中直接编写一些代码
            pre是一个预格式标签，会将代码中的文字保存，不会忽略多个空格
            code专门表示代码，不会保留格式
            
            我们一般结合pre和code标签一起使用来表示一段代码
        -->
        <pre>
            <code>
                window.onload = function(){
                    alert("Hello World")
                };
            </code>
        </pre>
    </body>
</html>

列表

列表就相当于去超市购物时的购物清单
在HTML也可以创建列表，在网页中一共有三种列表
1.无序列表
2.有序列表
3.定义列表

无序列表

使用ul标签来创建一个无序列表
使用li在ul中创建一个一个的列表项
一个li就是一个列表项
可以通过type属性来修改无序列表的项目符合
可选值：
disc：默认值实心的圆点
square：实心的方框
circle：空心的圆圈

注意：默认的项目符号我们一般都不使用

HTML <ul> 标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            列表就相当于去超市购物时的购物清单
            在HTML也可以创建列表，在网页中一共有三种列表
                1.无序列表
                2.有序列表
                3.定义列表
        -->
        
        <!--
            无序列表
                - 使用ul标签来创建一共无序列表
                - 使用li在ul中创建一个一个列表项
                    一个li就是一共列表项
                    
            可以通过type属性来修改无序列表的项目符合
            **可选值：**
                disc：默认值 实心的圆点
                square：实心的方框
                circle：空心的圆圈
                
            注意：默认的项目符号我们一般都不使用
        -->
    <ul>
        <li>西门大官人</li>
        <li>唐胜大官人</li>
        <li>徐大官人</li>
    </ul>
    </body>
</html>

有序列表

有序列表和无序列表类似，只不过它使用ol代替ul
使用有序的序号来作为项目符号
type属性，可以指定序号的样式
可选值：
1 默认值：使用阿拉伯数字
a/A 使用小写或大写字母作为符号
i/I 采用小写或大写罗马数字作为序号
ol也是块元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            列表就相当于去超市购物时的购物清单
            在HTML也可以创建列表，在网页中一共有三种列表
                1.无序列表
                2.有序列表
                3.定义列表
        -->

    <!--
        有序列表和无序列表类似，只不过它使用ol代替ul
        使用有序的序号来作为项目符号
        type属性，可以指定序号的样式
            可选值：1 默认值：使用阿拉伯数字
                    a/A 使用小写或大写字母作为符号
                    i/I 采用小写或大写罗马数字作为序号
        ol也是块元素
    -->
    <ol>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ol>
    </body>
</html>

列表之间的嵌套

列表之间都是可以互相嵌套的
可以在无序列表里放有序列表
也可以在有序列表中放以无序列表

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <!--
        列表之间都是可以互相嵌套的，可以在无序列表里放有序列表
        也可以在有序列表中放以无序列表
    -->
    <p>菜谱</p>
    <ul>
        <li>
            鱼香肉丝
            <ol>
                <li>鱼香</li>
                <li>肉丝</li>
            </ol>       
        </li>
        <li>
            宫保鸡丁
            <ul>
                <li>宫保</li>
                <li>鸡丁</li>
            </ul>
        </li>
        
        <li>青椒肉丝</li>
    </ul>
    </body>
</html>

定义列表

定义列表用来对一些词汇或内容进行定义
使用dl来创建一共定义列表
dl标签中有两个子标签
dt:被定义的内容
dd:对定义内容的描述
同样dl和ul ol之间都可以互相嵌套

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            定义列表用来对一些词汇或内容进行定义
            使用dl来创建一共定义列表
            dl标签中有两个子标签
                dt:被定义的内容
                dd:对定义内容的描述
            同样dl和ul ol之间都可以互相嵌套
        -->
        <dl>
            <dt>胡萝卜</dt>
            <dd>一种蔬菜，兔子最爱</dd>
            <dd>明目</dd>
            <dt>武松</dt>
            <dd>景阳冈打老虎</dd>
            <dd>投奔梁山</dd>
        </dl>
    </body>
</html>

前端学习-HTML