一、初始HTML

  • HyperTextMarkupLanguage（超文本标记语言）

  • < body >、< /body>等成对的标签，分别叫做开放标签和闭合标签，

  • 单独呈现的标签（空元素），如< hr/ >;意为用/来关闭空元素。

  • html注释：< !–注释内容–>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <!--DOCTYPE：告诉浏览器，我们使用什么规范，不写该标签也可以，因为浏览器默认的是html-->
    <!DOCTYPE html>

    <!--head：head标签代表网页头部-->
    <html lang="en">
        <head>

            <!--meta：描述性标签，它用来描述我们网站的一些信息-->
            <!--meta：一般用来做SEO-->
            <meta charset="UTF-8">

            <!--通过如下的关键字可以搜索到该网站-->
            <meta name="keywords" content="Java从入门到放弃，MySQL从删库到跑路">

            <!--网页描述-->
            <meta name="description" content="来这个地方可以学习">
            <!-- title：网页的标题 -->
            <title>第一个网站</title>
        </head>

        <!-- body标签代表网页的主体 -->
        <body>

        </body>
    </html>

二、网页基本标签

基本标签

  • 标题标签：
  • 段落标签：
  • 换行标签：
  • 字体样式标签：粗体、斜体标签等：
  • 特殊符号标签：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>基本标签-标题标签</title>
    </head>
    <body>

        <!--标题标签，有一到六级标签-->
        <h1>一级标签</h1>
        <h2>二级标签</h2>
        <h3>三级标签</h3>
        <h4>四级标签</h4>
        <h5>五级标签</h5>
        <h6>六级标签</h6>
        <hr/>

        <!--段落标签-->
        <p>空山不见人，但闻人语响。</p>
        <p>返影入深林，复照青苔上。</p>
        <hr/>

        <!--换行标签-->
        空山不见人，但闻人语响。<br/>
        返影入深林，复照青苔上。<br/>

        <!--水平线标签-->
        <hr/>

        <!--粗体、斜体标签-->
        <h1>字体样式标签</h1>
        粗体：<strong>粗体标签</strong><br/>
        斜体<em>斜体标签</em>
        <hr/>

        <!--特殊符号-->
        <p>空&nbsp;&nbsp;&nbsp;格：</p>
        <p>小于：1&lt;2</p>
        <p>大于：2&gt;1</p>
        <p>版权：&copy;</p>

    </body>
</html>

图片标签

常见的图片格式：JPG、GIF、PNG、BMP …..

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>图片标签</title>
    </head>
    <body>
        <!--
        src：图片地址
            相对地址（推荐使用）：
                ../：回到上一级目录

            绝对地址（物理磁盘路径，不推荐使用）：
                E:\HTML\HTML\HTML_01\resources\image\图片.webp

        alt：图像的替代文字。当图片加载不出来或不存在的时候，alt中的属性值就会显示出来
        title：鼠标悬停提示文字。将鼠标放在图片上会显示的文字
        width：图像宽度，宽高设置一个另一个会自动调节
        height：图像高度
        -->
        <img src="../resources/image/图片2.webp" alt="图片加载失败才会显示" title="悬停文字" width="20%" height="">

    </body>
</html>

超链接标签

  • 页面跳转：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>超链接标签</title>
        </head>
        <body>
            <!--
            a标签：
                href：必填，表示要跳转的地址
                target：表示窗口在哪里打开
                    target="_blank"：在新的页面打开
                    target="_self"（默认）：在当前页面打开
            -->
            <!--跳到自己写的页面-->
            <a href="1、我的第一个网页.html" target="_blank">点我跳转到我的第一个网页</a><br/>

            <!--跳转到百度首页-->
            <a href="https://www.baidu.com/" target="_self">点击我跳转到百度</a><br/>

            <!--使用图片替代文字，点击图片来跳转-->
            <a href="3、基本标签-图片标签.html"><br/>
                <img src="../resources/image/图片1.webp" alt="图片加载失败" width="50%"/>
            </a>

        </body>
    </html>

  • 锚链接

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>锚链接</title>
        </head>
        <body>
            <!--使用name作为标记-->
            <a name="top">顶部</a>
            <a href="5、基本标签-超链接标签-锚链接.html#down">跳到底部</a><br/>

            <!--锚链接，跳到指定的地方-->
            <a><img src="../resources/image/图片1.webp" alt="图片加载失败"></a><br/>
            <a><img src="../resources/image/图片1.webp" alt="图片加载失败"></a><br/>
            <a><img src="../resources/image/图片1.webp" alt="图片加载失败"></a><br/>
            <a><img src="../resources/image/图片1.webp" alt="图片加载失败"></a><br/>
            <a><img src="../resources/image/图片1.webp" alt="图片加载失败"></a><br/>
            <a><img src="../resources/image/图片1.webp" alt="图片加载失败"></a><br/>
            <!--
            锚链接
                1、需要一个标记
                2、跳转到标记
                使用：#标记名字
            -->
            <a href="#top">回到顶部</a>
            <a name="down">down</a>
        </body>
    </html>

  • 功能性链接

    • 邮件标签

    • QQ推广

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      <!DOCTYPE html>
      <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>功能标签</title>
          </head>
          <body>

              <!--
              功能标签：
                  邮件标签：mailto
      			QQ推广：去：（https://shang.qq.com/v3/index.html）获取QQ推广代码
              -->
              <a href="mailto:1903078434@qq.com">点击联系我</a>
              <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1903078434&site=qq&menu=yes">
                  <img border="0" src="http://wpa.qq.com/pa?p=2:2297294579:53"
                       alt="点击这里给我发消息"
                       title="点击这里给我发消息"/>
              </a>
          </body>
      </html>

行内元素和块元素标签

  • 块元素

    • 无论内容多少，该元素独占一行

    • {p，h1-h6}

      1
      2
      <address>	<center>	<h1>~<h6>	<p>
      <pre>	<ul>	<ol>	<dl>	<table>		<div>	<form>