1. HTML概述

1.1 HTML简介

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

1.2 HTML的标签(元素)、属性和注释

标签(元素)

HTML中的标记指的就是标签，也叫做元素
HTML使用标记标签来描述网页
标签分为两种：成对出现标签与自结束标签

成对出现标签：<标签名>标签内容</标签名>
自结束标签：<标签名/>

属性

可以为HTML标签设置属性
通过属性为HTML元素提供附加信息
属性需要设置在开始标签或自结束标签中
属性总是以名称/值对的形式出现
比如：name=“value”
有些属性可以是任意值，有些则必须是指定值

<h1 title="我是一个标题">标题</h1>
<img src="" alt="" />

注释

HTML注释中的内容不会在网页中显示
HTML中注释不能嵌套

<!-- 注释内容 -->

1.3 HTML固定结构

在编写HTML时，不能随意的进行编写，HTML有着其固定结构，每个HTML文件都有着这一固定内容：

文档声明：声明当前网页的版本
< html >：是根标签（元素），网页中的所有内容都要写根元素的里边，也用于告诉浏览器这个文档中包含的信息是用HTML编写的
< head >：是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页
< title >：其中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容
< body >：是html的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里

<!-- 文档声明，声明当前网页的版本 -->
<!doctype html>

<!-- html的根标签（元素），网页中的所有内容都要写根元素的里边 -->
<html>

    <!-- head是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页 -->
    <head>

        <!-- meta标签用来设置网页的元数据，这里meta用来设置网页的字符集，避免乱码问题 -->
        <meta charset="utf-8">
        
        <!-- title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容 -->
        <title>网页的标题</title>

    </head>

    <!-- body是html的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里 -->
    <body>

        <!-- h1网页的一级标题 -->
        <h1>网页的大标题</h1>

    </body>

</html>

2. HTML的基本使用

2.1 实体(转义字符)

在HTML中有些时候，我们不能直接书写一些特殊符号

比如，当我们在网页中编写多个空格时，默认情况下会自动被浏览器解析为一个空格；当我们需要在字母两侧使用大于号和小于号时，可能会被识别为标签

因此如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体(转义字符)

实体的语法结构：&实体的名字;

例如：

&nbsp; 空格
&gt; 大于号
&lt; 小于号
&copy; 版权符号

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>test01</title>
</head>
<body>
    <p>这里有3个空格&nbsp;&nbsp;&nbsp;。</p>
    <p>a&lt;b&gt;c</p>
    <p>我有100&yen;</p>
</body>
</html>

2.2 meta标签

meta主要用于设置网页中的一些元数据，元数据不是给用户看的

mata标签的属性有：

设置页面的字符集：< meta charset="utf-8" >
设置网页的描述：< meta name="description" content="" >
设置网页的关键字：< meta name="keywords" content="" >
请求的重定向：< meta http-equiv="refresh" content="5;url=地址"/ >

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="keywords" content="HTML5,前端,CSS3">
        <meta name="description" content="这是一个非常不错的网站">
        
        <title>前端之家</title>
    </head>

    <body>
        
    </body>
</html>

2.3 语义化标签

块元素与行内元素

块元素：在网页中一般通过块元素来对网页进行布局

行内元素：行内元素主要用来包裹文字

注意：

一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
块元素中基本什么都能放
p元素中不能放任何的块元素

语义化标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!--
        标题标签 
        h1-h6一共有六级标题，重要性递减，h1最重要，h6最不重要
        一般情况下一个页面中只会有一个h1
        一般情况下标题标签只会使用h1-h3，h4-h6很少使用

        标题标签都是块元素
     -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

    <!-- 
        hgroup标签用来为标题分组，可以将一组相关标题同时放入hgroup
     -->
    <hgroup>
        <h1>静夜思</h1>
        <h2>李白</h2>
    </hgroup>

    <!-- 
        em标签用于表示语音语调的加重
        strong表示强调，重要内容
        blockquote表示一个长引用
        q表示一个短引用
        br表示页面中的换行
     -->
     <p>今天天气<em>真</em>不错！</p>
     <p>你今天必须<strong>完成作业</strong>！</p>
     鲁迅说：
     <blockquote>
         这不是我说的
     </blockquote>
     子曰
     <q>学而时习之，不亦乐乎</q>
     <br>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 
        布局标签
     -->
     <!-- 
         header 表示网页的头部
         main 表示网页的主体部分（一个网页中只会有一个main）
         footer 表示网页的底部
         nav 表示网页的导航
         aside 和主体相关的其他内容（侧边栏）
         section 表示一个独立的区块，上边标签不能表示时使用section
         
         div 没有语义，就用来表示一个区块，目前div还是主要的布局元素
         span 行内元素，没有语义，一般用于在网页中选中文字
      -->
      <header></header>
      <main></main>
      <footer></footer>
      <nav></nav>
      <aside></aside>
      <article></article>
      <section></section>

      <div></div>
      <span></span>
</body>
</html>

2.4 列表

在html中可以创建列表，html列表一共有三种：有序列表、无序列表、定义列表
有序列表，使用ol标签来创建有序列表，使用li表示列表项
无序列表，使用ul标签来创建无序列表，使用li表示列表项
定义列表，使用dl标签来创建定义列表，使用dt来表示定义内容，使用dd来对内容进行解释说明
同种列表，不同列表之间可以相互嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 无序列表 -->
    <ul>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ul>

    <!-- 有序列表 -->
    <ol>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ol>

    <!-- 定义列表 -->
    <dl>
        <dt>结构</dt>
        <dd>结构表示网页的结构，结构用来规定网页中的内容</dd>
    </dl>

    <!-- 列表间的嵌套 -->
    <ul>
        <li>结构</li>
        <ul>
            <li>结构的作用</li>
        </ul>
    </ul>
</body>
</html>

2.5 超链接

超链接可以让我们从一个页面跳转到其它页面，或是当前页面的其他位置
使用a标签定义超链接，其属性href指定链接的目标路径
- 值可以是一个外部网站地址，即绝对路径
- 也可以是一个内部网页的地址，即相对路径
超链接是一个行内元素，在a标签中可以嵌套除它自身以外的任何元素
在超链接中还可以设置打开页面方式、跳转页面位置、页面占位符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!--  
        若在路径前加'./'，则代表当前目录下，不加时默认也为这种
        若在路径前加'../'，则代表当前目录的上一目录下
    -->
    <a href="https://www.baidu.com">超链接1</a>
    <a href="test05.html">超链接2</a>

    <!-- 
        tatget属性，用来指定超链接打开位置
        可选值：_self 默认值，在当前页面中打开超链接
               _blank 在一个新的页面中打开超链接
     -->
     <a href="https://www.baidu.com" target="_self">超链接3</a>
     <a href="https://www.baidu.com" target="_blank">超链接4</a>

     <!-- 
         id属性（唯一不重复的）
            1.每个标签都可以添加一个id属性
            2.id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性

        可以通过id属性跳转到页面任意位置，设置href为#目标元素的id属性值
      -->
    <a href="#bottom">去指定位置标签</a>

    <!-- 可以将超链接的href属性设置为#，这样点击超链接后页面不发生跳转，而是转到当前页面的顶部位置 -->
    <a id="bottom" href="#">回到顶部</a>

    <!-- 
        在开发中，可以将javascript:;来作为超链接路径的占位符
        作为href的属性，此时点击这个超链接什么也不会发生
     -->
     <a href="javascript:;">这是一个空的超链接</a>
</body>
</html>

2.6 图片标签

图片标签用于向当前页面中引入一个外部图片
使用img标签来引入外部图片，img是一个自结束标签
img的属性有src、alt、width、height等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        src 指定外部图片的路径(路径规则与超链接相同)
        alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示
            搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎收录
        
        width 图片的宽度(单位是像素)
        height 图片的高度(单位是像素)
     -->
     <img width='200'src="JavaIO流目录.png" alt="IO流">
     
</body>
</html>

2.7 内联框架

内联框架用于向当前页面中引入一个其他页面
有src、frameborder、width、height属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        src 指定要引入的网页的路径
        frameborder 指定内联框架的边框，0或1
        width 指定内联框架的宽
        height 指定内联框架的高
     -->
     <iframe width="800" height="600" src="https://www.qq.com" frameborder="0"></iframe>
</body>
</html>

2.8 音视频播放

音频

audio标签用来向页面中引入一个外部的音频文件
音频文件引入时，默认情况下不允许用户自己控制播放停止
有src、controls、autoplay、loop等属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        src 指定文件路径
        controls 是否允许用户控制播放
        autoplay 音频文件是否自动播放
        loop 音乐是否循环
     -->
     <audio src="音乐.mp3" controls autoplay loop></audio>

     <!-- 
         除了通过src来指定外部文件的路径外，还可以通过source来指定文件路径
      -->
      <audio controls>
          <source src="音乐.mp3">
      </audio>
</body>
</html>

视频

video标签用来向页面中引入一个外部的视频文件
video用法与audio基本相同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        src 指定文件路径
        controls 是否允许用户控制播放
        autoplay 视频文件是否自动播放
        loop 视频是否循环
     -->
    <video src="视频.mp4" controls autoplay loop></video>

    <video controls>
        <source src="视频.mp3">
    </video>
</body>
</html>

Web：HTML的使用