前端基础【HTML】

  1. HTML 定义了网页的内容
  2. CSS 描述了网页的布局
  3. JavaScript 控制了网页的行为

什么是HTML

　　HTML用来描述网页的一种语言

  • HTML – hyper text markup language 超文本标记语言
  • 超文本包括：文字、图片、音频、视频、动画等等
  • 标记语言：是一套标记标签，HTML使用标记标签来描述网页

HTML发展史

invalid image(图片无法加载)

HTML5的优势

  • 浏览器厂商对HTML5的支持

    • Microsoft edge
    • Google chrome
    • Opera
    • Mozila
    • ……

  • 市场的需求

  • 跨平台

W3C

  • W3C

  • W3C标准包括

    • 结构化标准语言（HTML、XML）
    • 表现标准语言（CSS）
    • 行为标准（DOM、ECMAScript）

HTML基本结构

invalid image(图片无法加载)

　　示例

invalid image(图片无法加载)

invalid image(图片无法加载)

  • <!DOCTYPE html> 声明为HTML5文档
  • <html>元素 是HTML页面的根元素
  • <head>元素包含了文档的元（meta）数据，例如：<meta charset=“utf-8”>，定义网页的编码格式为UTF-8
  • <title>元素描述了文档的标题
  • <body>元素包含了可见的页面内容（主体部分）
  • <h1> 元素定义一个大标题

HTML标签

　　HTML标记标签通常被称为HTML标签（HTML tag）

  • HTML 标签是由尖括号包围的关键字，例如：<html>
  • HTML标签通常是成对出现的，例如：<h1>和</h1>，也称之为双标签
  • 双标签中的第一个标签表示开始标签，第二个标签表示结束标签

基础标签

标题标签 <h1> – <h6>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
    <head>
        <title>HTML基础标签</title>
    </head>
    <body>
        <!-- 标题标签-->
        <h1>一级标签</h1>
        <h2>二级标签</h2>
        <h3>三级标签</h3>
        <h4>四级标签</h4>
        <h5>五级标签</h5>
        <h6>六级标签</h6>
    </body>
</html>

　　‍

invalid image(图片无法加载)

HTML段落 <p> 标签

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
    <head>
        <title>HTML基础标签</title>
    </head>
    <body>
        <p>hello world</p>
        <p>hello James</p>
    </body>
</html>

　　‍

invalid image(图片无法加载)

换行标签 <br />标签

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
    <head>
        <title>HTML基础标签</title>
    </head>
    <body>
        ello world<br />
        hello James<br />
    </body>
</html>

　　‍

invalid image(图片无法加载)

粗体标签 <strong> 斜体标签 <em>

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
    <head>
        <title>HTML基础标签</title>
    </head>
    <body>
        <strong>hello world</strong> 
        <em>hello James</em>
    </body>
</html>

　　‍

invalid image(图片无法加载)

特殊字符 空格

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
    <head>
        <title>HTML基础标签</title>
    </head>
    <body>
        helloworld
        <br />
        hello world
    </body>
</html>

　　‍

invalid image(图片无法加载)

水平线标签 <hr \>

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
    <head>
        <title>HTML基础标签</title>
    </head>
    <body>
        helloworld
        <hr />
        hello world
  
    </body>
</html>

　　‍

invalid image(图片无法加载)

图像标签 <img />

invalid image(图片无法加载)

  • HTML标签可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性总是以名称/值对的形式出现，比如：name=“value”
  • 属性值应该始终被包括在引号内
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
    <head>
        <title>HTML基础标签</title>
    </head>
    <body>
        <!--相对路径
            ./ 当前目录
            ../ 上级目录
            属性名为：src
            属性值为：./image/222.jpg
        -->
        <img src="./image/222.jpg" />

        <!--绝对路径
            从根目录开始
        -->
        <img src="D:\A_programming\front_end\HTML\image\111.jpg"/>
    </body>
</html>

　　‍

invalid image(图片无法加载)

链接标签 <a >

invalid image(图片无法加载)

　　文本超链接

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
    <head>
        <title>HTML基础标签</title>
    </head>
    <body>
        <!--a标签
            href属性表示要跳转到哪个地址
        -->
        <a href="https://www.baidu.com">百度一下</a>
    </body>
</html>

　　‍

invalid image(图片无法加载)

　　点击百度一下就会跳到百度页面

　　图像超链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
    <head>
        <title>HTML基础标签</title>
    </head>
    <body>
        <!--a标签
            href属性表示要跳转到哪个地址
        -->
        <a href="https://www.baidu.com">
            <img src="./image/222.jpg" alt="跳转" />
        </a>
    </body>
</html>

　　‍

invalid image(图片无法加载)

　　点击图像即可跳转到baidu.com

块元素和行内元素

块元素

  • 无论内容多少，该元素独占一行，例如<p>、<h1> 等等
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
    <head>
        <title>HTML基础标签</title>
    </head>
    <body>
        <h1>hello world</h1>123
    </body>
</html>

　　‍

invalid image(图片无法加载)

行内元素

  • 内容撑开宽度，左右都是行内元素的可以排在一行，例如<a>、<em>等
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
    <head>
        <title>HTML基础标签</title>
    </head>
    <body>
        <a href="https://www.baidu.com">百度一下</a>123
    </body>
</html>

　　‍

invalid image(图片无法加载)

列表

什么是列表

  • 列表就是信息资源的一种展示形式，可以使得信息结构化和条理化，以列表的样式显示出来。

列表的分类

  • 无序列表
  • 有序列表
  • 自定义列表

有序列表 ol

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
    <ol>
        <li>C</li>
        <li>Java</li>
        <li>Python</li>
        <li>PHP</li>
    </ol>
</body>
</html>

　　‍

invalid image(图片无法加载)

无序列表 ul

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
    <ul>
        <li>C</li>
        <li>Java</li>
        <li>Python</li>
        <li>PHP</li>
    </ul>
</body>
</html>

　　‍

invalid image(图片无法加载)

自定义列表

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>
    <!--   自定义列表
        dl：标签
        dt：列表名称
        dd：列表内容
    -->
    <dl>
        <dt>编程语言</dt>
        <dd>C</dd>
        <dd>Java</dd>
        <dd>Python</dd>
        <dd>PHP</dd>
    </dl>
</body>
</html>

　　‍

invalid image(图片无法加载)

表格

基本结构

  • 单元格
  • 行
  • 列
  • 跨行
  • 跨列
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <!--表格 table
        tr: 行
        td：列
        colspan：跨列
        rowspan：跨行
        border:边框间距
    -->
    <table border="1px">
        <tr>
            <td>1-1</td>
            <td>1-2</td>
            <td>1-3</td>
            <td>1-4</td>
        </tr>
        <tr>
            <td>2-1</td>
            <td>2-2</td>
            <td>2-3</td>
            <td>2-4</td>
        </tr>
        <tr>
            <td>3-1</td>
            <td>3-2</td>
            <td>3-3</td>
            <td>3-4</td>
        </tr>
  
    </table>
</body>
</html>

　　‍

invalid image(图片无法加载)

示例

invalid image(图片无法加载)

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <!--表格 table
        tr: 行
        td：列
        colspan：跨列
        rowspan：跨行
        border:边框间距
    -->
    <table border="1px">
        <tr>
            <td colspan="3">学生成绩</td>

        </tr>
        <tr>
            <td  rowspan="2">小明</td>
            <td>语文</td>
            <td>70</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>80</td>
        </tr>
        <tr>
            <td  rowspan="2">小红</td>
            <td>语文</td>
            <td>80</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>90</td>
        </tr>
  
    </table>
</body>
</html>

　　‍

媒体元素

视频元素 video

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  
    <title>视频</title>
</head>
<body>
    <!--视频元素    video
        src：资源地址
        controls：控制条
        autoplay：自动播放
    -->
    <video src="./image/Java内容介绍.mp4" controls autoplay>Java</video>
</body>
</html>

　　‍

image-20220827161841224

音频元素 audio

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
  
    <title>音频</title>
</head>
<body>
    <!--音频元素    audio
        src：资源地址
        controls：控制条
        autoplay：自动播放
    -->
    <audio src="郑钧.mp3" controls autoplay></audio>
</body>
</html>

　　‍

invalid image(图片无法加载)

页面结构分析

元素名 描述
header 标题头部区域的内容（用于页面或页面中的一块区域）
footer 标记脚部区域的内容（用于整个页面或页面的一块区域）
section Web页面中的一块独立的区域
article 独立的文章内容
aside 相关内容或应用（常用于测边框）
nav 导航类辅助内容

iframe内联框架

invalid image(图片无法加载)

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架 iframe</title>
</head>
<body>
    <iframe src="https://www.runoob.com/" frameborder="0" width="1000px" height="800px"></iframe>
</body>
</html>

　　‍

invalid image(图片无法加载)

表单

　　表单标签 - form

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <!-- 表单提交
        表单元素：form标签
            action：表单提交的地方
            method：请求方法
        输入标签：input
            name:标识
            type 输入框的类型
                text文本
                password 密码
                submit 提交按钮
                reset   重置按钮
    -->
    <form action="./05媒体元素.html" method="get">
        <p>用户名：<input type="text" name="username"></p>
        <p>密码：<input type="password" name="password"></p>
        <p>
            <input type="submit">
            <input type="reset">
        </p>
    </form>

</body>
</html>

　　‍

invalid image(图片无法加载)

表单元素格式

属性 说明
type 指定元素的类型，text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text
name 指定表单元素的名称
value 元素的初始值，type为radio时必须指定一个值
size 指定表单元素的初始宽度。当type为text或者password时，表单元素的大小以字符为单位，对于其他类型，宽度以像素为单位
maxlength type为text或者password时，限制输入的最大字符数
checked type为radio或者checkbox，指定按钮默认处于选中

练习

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <!-- 表单提交
        表单元素：form标签
            action：表单提交的地方
            method：请求方法
        输入标签：inpu
            name:标识
            type 输入框的类型
                text文本
                password 密码
                submit 提交按钮
                reset   重置按钮
    --> 
    <form action="./05媒体元素.html" method="get">
        <p>用户名：<input type="text" name="username" value="小白学安全" maxlength="10" size="30"></p>
        <p>密码：<input type="password" name="password"></p>


        <!--单选框 radio-->
        <p>性别：
            <input type="radio" value="boy" name="sex" >男
            <input type="radio" value="giry" name="sex" checked>女
        </p>

        <!--多选框 checkbox-->
        <p>爱好：
            <input type="checkbox" value="Basketball" name="hobby" checked>篮球
            <input type="checkbox" value="Football" name="hobby">足球
            <input type="checkbox" value="run" name="hobby">跑步
            <input type="checkbox" value="sing" name="hobby">唱歌
        </p>

        <p>图片按钮：
            <input type="image" src="./image/444.png">
        </p>



        <!-- 下拉框-->
        <p>互联网公司：
            <select name="列表单">
                <option value="B">百度</option>
                <option value="A">阿里</option>
                <option value="T" selected>腾讯</option>
                <option value="Z">字节跳动</option>
            </select>
        </p>
   
        <!-- 文本域-->
        <p>评论：
            <textarea name="evaluate" id="" cols="40" rows="4"></textarea>
        </p>

        <!-- 文件域-->
        <p>上传文件：
            <input type="file" name="files">
        </p>

        <!-- 提交按钮 submit、重置按钮 reset-->
        <p>
            <input type="submit">
            <input type="reset" value="清空内容">
        </p>
    </form>

</body>
</html>

　　‍

invalid image(图片无法加载)

简单验证与搜索框

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
44
45
<!DOCTYPE html>
<html lang="en">
<head>

    <title>滑块与简单验证</title>
</head>
<body>
    <form action="./05媒体元素.html" method="get">
        <!-- 邮箱验证 -->
        <p>邮箱：
            <input type="email" name="email">
        </p>

        <!-- URL验证 -->
        <p>URL：
            <input type="url" name="url">
        </p>

        <!-- 数字验证 
            max：最大值
            min：最小值
            step：步长
        -->
        <p>数字：
            <input type="number" name="number" max="100" min="10" step="10">
        </p>

        <!-- 滑块 -->
        <p>滑块：
            <input type="range" name="value" max="100" min="2" step="2" >
        </p>

        <!-- 搜索框 -->
        <p>搜索框：
            <input type="search" name="search">
        </p>


        <!-- 提交按钮 -->
        <p>
            <input type="submit">
        </p>
    </form>
</body>
</html>

　　‍

invalid image(图片无法加载)

表单的应用

  • 隐藏域 hidden
  • 只读 readonly
  • 禁用 disabled
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单的应用</title>
</head>
<body>
    <form action="./05媒体元素.html" method="get">
        <!-- 只读属性  readonly -->
        <p>用户名：
            <input type="text" name="username" value="admin" readonly>
        </p>
        <!-- hidden 隐藏域 -->
        <p>密码：
            <input type="password" name="password" hidden>
        </p>

        <!-- disabled 禁用 -->
        <p>性别：
            <input type="radio" value="boy" disabled>男
            <input type="radio" value="girl">女
        </p>

        <p>
            <input type="submit">
        </p>
    </form>
</body>
</html>

　　‍

invalid image(图片无法加载)

表单初级验证

　　简单联系

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表单初级验证</title>
</head>
<body>
     <form action="./05媒体元素.html" method="get" >

        <!-- 
            placeholder  提示信息
            required    要求不能为空,非空判断
            pattern     正则表达式
         -->
        <p>
            用户名：<input type="text" name="username" placeholder="请输入用户名"   required>
        </p>
        <p>
            密码：<input type="password" name="password" placeholder="请输入密码">
        </p>

        <p>自定义手机号规则：
            <input type="text" name="phone" pattern="/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/">
        </p>

        <p>
            <input type="submit">
        </p>
     </form>
</body>
</html>

　　‍

invalid image(图片无法加载)

invalid image(图片无法加载)