这些也是可以通过 CSS 来实现的，实际开发中，很少会直接使用 table 的属性来做，这是历史遗留问题，上古时期，只有 HTML，没有CSS

10、列表标签

    
无序列表
    

        
Gwen
        
Gwen
        
Gwen
    

    
有序列表
    

        
Gwen
        
Gwen
        
Gwen
    

    
自定义列表
    

        
student
        
Gwen
        
Gwen
        
Gwen
    

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

其中最常用的就是无序列表，
使用场景已经并不是单纯的，就用本身的这种显示行为了
把多个 “并列关系” 的元素给罗列到一起，这种经常就会使用到 ul，
这里的小圆点，要不要显示，显示成什么，都可以通过 CSS 来修改

11、表单标签 form

input

• 表单标签是用户和页面之间交互的重要手段，大部分的 html 标签都是给用户 “展示”
  表单标签，是让用户来 “输入”
• form 表示一个表单标签，借助这个 form 就可以允许用户输入一些信息，并且提交到服务器上，
• 在 form 里面可以放一些和用户交互的组件，
  input 标签，有很多种形态

各种输入控件, 单行文本框, 按钮, 单选框, 复选框.

• type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.
• name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一.
• value: input 中的默认值
• checked: 默认被选中. (用于单选按钮和多选按钮)
• maxlength: 设定最大长度.

1、文本框

	

1
2
3

2、密码框

也是一个单行文本框，但是这个可以用来输入密码

1

3、单选框

注意：单选框之间必须具备相同的 name 属性, 才能实现 多选一 效果

 男
 女
1
2

搭配上 label 的单选框，id 属性。任意 html 元素，都可以指定 id 属性，在一个页面中，id 的取值不能重复(唯一的)

 
男
 
女
1
2
3
4

下载点击文字，也可以选中

4、复选框

也可以使用 checked 来表示默认选中。也可以搭配 label 来实现点击文字，就选中元素

 吃饭
 睡觉
 学习
1
2
3

5、普通按钮

1

onclick 是一个 js 的代码，onclick 表示在点击元素的时候触发，触发的内容就是 “” 里的代码，会被浏览器直接执行，alert 就是弹出一个对话框

第二种写法：

这是按钮
1

6、提交按钮

	
	

1
2
3
4

提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送

7、清空按钮

	
	
	

1
2
3
4
5

清空按钮必须放在 form 中. 点击后会将 form 内所有的用户输入内容重置

8、选择文件

1

点击 “选择文件” 就会弹出一个对话框，就可以选择本地的一个文件，然后浏览器就会打开这个文件
进一步的就可以实现 提交 / 上传文件 到服务器的效果

select

    

        
            --请选择年份--
            2001 
            2000
            2001
            2002
            2003

        
        

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

使用 select 表示一个下拉菜单，每个菜单项是一个option，可以使用 selected 来表示默认的选项是啥

textarea

• 多行的文本框。
• 文本域中的内容，就是默认内容，注意，空格也会有影响
• rows 和 cols 也都不会直接使用，都是用 css 来改的

            

1
2
3

12、无语义标签: div & span

出厂频率最高的标签

前面的标签,都是"有语义"的标签，每个标签都有一个明确的角色，最初 HTML 诞生的初衷就是为了表示 “报纸 / 杂志” 这样的媒体
但是随着时代的发展，HTML 已经不仅仅是作为 “报纸"，而是变成了一个 “应用程序”
相比于有语义标签，无语义标签更适合于 “应用程序”

这里的 div 和 span 就可以代替上述绝大部分有语义标签的功能 (但是 form 这一系列是代替不了的.….)
极端来讲，一个网页，可以 90% 的标签都是 div / span (完全可行的，但是这种做法并不常见)

• div：默认是一个块级元素 (独占一行)

• span：默认是一个行内元素 (不独占一行)

也可以把 div 和 span 想象成一个矩形的盒子，在这个盒子里,，以放各种的页面内容

	

        hello
        hello
    
    

        hello
        hello
    
1
2
3
4
5
6
7
8

Emmet 快捷键

快速输入标签 input[tab]

快速输入多个标签 div*3[tab]

标签带id div#sex[tab]

标签带类名 div.sex[tab]

标签带子元素 ul>li*3[tab]

标签带兄弟元素 span+span

标签带内容 div{hello}

标签带内容(带编号) div{$.hello}

MDN 参考文档

mozilla 是一个开源组织，最大的一个产品就是 firefox 浏览器

HTML（超文本标记语言）

MDN-input

也可以鼠标放在想查看的标签上，点击可以跳转：

三、综合案例

1、案例一：展示简历信息

    
    
    
    


    
我的简历
    
基本信息
    
    
求职意向：Java 开发工程师
    
练习电话：111
    
个人邮箱：111@163.com
    

        我的博客
    
    

        
    

    
教育背景
    

        
2000-2005 翻斗小学
        
2006-2008 翻斗中学
        
2009-2012 翻斗大学
    

    
专业技能
    

        
熟练掌握 Java 的基础语法，熟悉面向对象程序设计的基本思想
        
熟练掌握常用的数据结构，和集合类，例如顺序表，链表，二叉树，哈希表等
        
熟悉 MySQL 数据库，熟悉 MySQL 语句，并且能进行基本的增删改查
        
熟悉网络原理和网络编程，例如：TCP、UDP、IP 等常见协议的底层机制
    
    
    
项目经验
    

        
        

            
留言墙
            
开发时间：2012.9-2013.1
            
功能介绍：
            

                
支持留言发布
                
支持匿名留言
            
        
        
        

            
学习小助手
            
开发时间：2013.9-2014.1
            
功能介绍：
            

                
支持错题检索
                
支持同学探讨
            
        
    
    
    
个人评价
    
本人学习成绩优异，多次获得学校奖学金
    


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

2、案例二：填写简历信息

iconfont-阿里巴巴矢量图标库

    
    
    
    


    
    
请填写简历信息

    

        
        

            

                姓名
            
            

                
            
        
        
        

            

                性别
            
            

                
                
                     男
                
                
                
                
                     女
                
            
        
        
        

            

                出生日期
            
            

                
                    --请选择年份--
                    1997
                    1998
                    1999
                    2000
                    2001
                    2002
                
                
                    --请选择月份--
                    1
                    2
                    3
                    4
                    5
                    6
                    7
                    8
                    9
                    10
                    11
                    12
                
                
                    --请选日期--
                    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
                
            
        
        
        

            

                就读学校
            
            

                
            
        
        
        

            
应聘岗位
            

                
                前端开发

                
                后端开发
                
                
                测试开发
                
                
                运维开发
            
        
        
        

            

                掌握的技能
            
            

                
            
        
        
        

            

                项目经历
            
            

                
            
        
        
        

            
            

            

                
                我已仔细阅读过公司招聘要求
            
        
        

            
            

            

                
请应聘者确认：
                

                    
以上信息真实有效
                    
能够尽快取公司实习
                    
能够接收公司的加班文化
                
            
        
    



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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦