1. 初识HTML

什么是HTML？
Hyper Text Markup Language : 超文本标记语言

• 超文本包括：文字、图片、音频、视频、动画等

目前使用的是HTML5，使用 W3C标准

W3C标准包括：

结构化标准语言（HTML、XML）
表现标准语言（CSS）
行为标准语言（DOM、JavaScript）
1
2
3

2. 网页基本元素

HTML基本结构

• 网页头部
• 主体部分

网页基本信息

• DOCTYPE声明：告诉浏览器，我们要使用什么规范
• 标签
• 标签：描述性标签，用来描述网站的一些信息

"en">


    "UTF-8">
    
    "keyboards" content="Java">
    "description" content="学习Java">
    
    



HelloWorld


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3. 网页基本标签

标题标签

段落标签

换行标签

水平线标签

字体样式标签

注释和特殊符号

"en">

    "UTF-8">
    



一级标签
二级标签
六级标签



这是一整段这是一整段这是一整段这是一整段
    这是一整段这是一整段这是一整段
    这是一整段这是一整段
    这是一整段
    这是一整段

第一段
第二段
第三段



第一行 

第二行




粗体：I LOVE YOU 
斜体：I LOVE YOU 




空  ; ; ; ; ;格：

大于号：>;      

小于号：<;     

版权符号：©;




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

4. 图像标签

常见图像格式：

JPG
GIF
PNG
BMP：位图
…
语法：

"path" alt="text" title="标题" width="x" height="y">
src：图像地址
alt：图像的替代文字（找不到该图片时，才会显示）
title：鼠标悬停提示文字
width:图像宽度
height:图像高度


1
2
3
4
5
6
7
8
9

练习：新建放置图片的目录

--src:图片地址
        相对地址：../   1.html文件的上一级目录           
 (不推荐)绝对地址：C:\Users\15642\IdeaProjects\HTML\resources\image\1.JPG
-->
"../resources/image/1.JPG" alt="顶上战争" title="路飞VS三大将" width="889" height="500">


1
2
3
4
5
6
7
8

5. 链接标签

文本超链接：点击文本进行跳转

图像超链接：点击图片进行跳转

语法：

"path" target="目标窗口位置">链接文本或图像
href：必填 ，表示要跳转到那个页面
target:表示窗口在哪里打开，默认是当前页面打开
       _blank：在新的标签页打开
       _self:在自己的网页中打开
1
2
3
4
5
6

练习：

"http://www.baidu.com" target="_blank">点击我跳转到百度





"http://www.baidu.com">
    "../resources/image/1.JPG" alt="顶上战争" title="路飞VS三大将" width="889" height="500">



1
2
3
4
5
6
7
8
9
10
11
12
13

锚链接：

• 通过# 实现页面间的跳转
• 跳转到另一个页面指定的位置

练习：

"top">我是顶部



    "http://www.baidu.com">
        "../resources/image/1.JPG" alt="顶上战争" title="路飞VS三大将" width="889" height="500">
    



    "http://www.baidu.com">
        "../resources/image/1.JPG" alt="顶上战争" title="路飞VS三大将" width="889" height="500">
    



    "http://www.baidu.com">
        "../resources/image/1.JPG" alt="顶上战争" title="路飞VS三大将" width="889" height="500">
    



    "http://www.baidu.com">
        "../resources/image/1.JPG" alt="顶上战争" title="路飞VS三大将" width="889" height="500">
    

--也可以跳转到另一个页面的指定位置 : href="2.html#top"-->
"#top">跳转到顶部


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

功能性链接

"mailto:156420xxxx@qq.com">点击联系我！
1
2

6. 行内元素和块元素

块元素

• 无论内容多少，该元素独占一行
• p标签、h1-h6…

行内元素

• 内容撑开宽度，左右都是行内元素的可以在排一行
• a 标签、strong 标签、em 标签…

7. 列表

列表的分类：

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

    
Java
    
python
    
运维



    
Java
    
python
    
运维



    
学科
        
Java
        
python
        
运维
    
位置
        
北京
        
珠海



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

效果：

8. 表格

为什么使用表格？

• 简单通用
• 结构稳定

基本结构：

• 单元格
• 行 tr
• 列 td
• 跨行 rowspan
• 跨列 colspan

"1px">

    

        
1-1
        
1-2
        
1-3
        
1-4
    

    

        
2-1
        
2-2
        
2-3
        
2-4
    

    

        
3-1
        
3-2
        
3-3
        
3-4
    




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

效果：

"1px">

    

        
        
"2">1-1
        
1-2
        
1-3
    

    

        
        
"2">2-1
        
2-2
        
2-3
        
2-4
    

    

        
3-2
        
3-3
        
3-4
    



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

效果：

9. 媒体元素

视频元素：video

音频元素：audio

1
2
3
4
5
6
7
8
9

10. 页面结构分析

    
网页头部



    
网页主体部分





1
2
3
4
5
6
7
8
9
10
11
12
13
14

11. iframe内联框架

语法：

        引用页面地址                 框架标示名
1
2

"https://www.bilibili.com/" target="hello">点击我跳转到B站



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

12. 初识表单post和get提交

表单语法：

"get" action="2.基本标签.html">
    
    
姓名："text" name="username">
    
    
密码："password" name="password">

    
    "submit">
    
    "reset">

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

效果：

表单元素格式

13. 文本框和单选框

单选框：

	
    "radio" value="boy" name="sex" checked/>男
    "radio" value="girl" name="sex"/>女

1
2
3
4
5
6
7
8
9
10

多选框：

 爱好：
	
    "checkbox" value="sleep" name="hobby" checked>睡觉
    "checkbox" value="book" name="hobby">看书
    "checkbox" value="swimming" name="hobby">游泳
    "checkbox" value="write" name="hobby">写作


1
2
3
4
5
6
7
8
9

14. 按钮和多选框

普通按钮：

 按钮：
    "button" name="btn1" value="点击查看">

1
2
3
4

效果：

图片按钮：

"image" name="bt2" src="../resources/image/1.jpg">
1

下拉框：

国家：
    "country">
        "china">中国
        "us">美国
        
        "ruishi" selected>瑞士
    

1
2
3
4
5
6
7
8

15. 文本域和文件域

文本域：

反馈：
    "textarea"</span> cols=<span class="token string">"50"</span> rows=<span class="token string">"10"</span>>文本内容

1
2
3
4

文件域：

"file" name="files">
1
2

16. 搜索框滑块和简单验证

 邮箱：
    "email" name="email">


 URL：
    "url" name="url">


 number：
    "number" name="number" max="100" min="0" step="10">



音量：
    "range" name="voice" min="0" max="10">



搜索：
    "search" name="search">


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

17. 表单的应用

• 隐藏域 hidden
• 只读 readonly
• 禁用 disabled

    只读：
    
姓名："text" name="username" value="lisa" readonly>
    
    
禁用：
        
        "radio" value="boy" name="sex" disabled/>男
        "radio" value="girl" name="sex"/>女
    
    
    
    
密码："password" name="password" hidden value="123456">


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

增强鼠标的可用性：

增强鼠标的可用性：

    "mark">你点我试试！！
    "text" id="mark">

1
2
3
4

点击文字，自动跳转到对应的输入框

18. 表单初级验证

思考：

• 减轻服务器的压力
• 安全性

常用方式：

• placeholder 提示信息
• required 元素不能为空，应用于所有的文本框中
• pattern 正则表达式

    
姓名：
        "text" name="username" placeholder="请输入用户名">
    
    
    
姓名：
        "text" name="username" placeholder="请输入用户名" required>
    
    
    
 自定义邮箱：
        "text" name="diyEmail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15