一.开发者工具
VSCode的使用
安装插件：
- Chinese 工具中文支持
- open in browser 将html页面在浏览器中打开
- Atom 个人比较喜欢的一款主题
- Vscode-icons 文件图标的样式
工具配置：
- Auto Save 自动保存
- Font Size 修改代码字体大小
- Word Wrap 代码自动换行
- Render Whitespace 空格的渲染方式(个人推荐)
- Tab Size 代码缩进
- 基础阶段建议缩进4个空格,进阶阶段开始慢慢习惯2个空格
快捷键的总结
! :自动生成一套HTML代码
tab:增加选中行的缩进
tab+shift:减小选中行的缩进
alt + b:快速在浏览器中浏览网页
ctrl + c:复制
ctrl + x:剪切
ctrl + v:粘贴
ctrl + .:让输入法在中英文标点符号之间来回进行切换
ctrl + /:在代码当中快速打出注释
ctrl+enter:换到下一行同样位置
alt + shift + 向下:复制
ctrl + F :搜索
alt + 鼠标点击:一次选中多个内容
alt + shift + 鼠标拖动:一次选中多个内容
二.HTML基础
常见元素
区块：div
区分：span
文本：p、h1~h6、em、dt、dd
表格：table、tbody、thead、tr、td、th、tfoot、caption
表单：form、input、label、textarea、select
链接：a
图片：img
文档：html、head、title、body、meta
列表：ul、ol、li、dlside、footer、nav
其他：br、hr、iframe
结构：header、section、a、strong、pre、address、q、blockquote、cite、code
元素的书写格式
html、head、title、body、div、ul、li包含了具体内容，书写格式是标签对
meta、img、br、input没有包含具体内容，书写格式是单标签
- 单标签:<元素名> （或者<元素名/>、<元素名 />）
元素嵌套元素
一个元素可以嵌套(包含)其他元素
元素 之间是存在嵌套关系
父元素/子元素/后代元素
上图所示嵌套关系，通常的描述如下
ul是li的父元素，li是ul的子元素
li是3个div的父元素，3个div都是li是子元素
第1个div是3个span的父元素，3个span是第1个div的子元素
3个div之间互为兄弟元素
3个span之间互为兄弟元素
li、div、span可以认为是ul的后代元素
div、li、ul可以认为是span的祖先元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <body>
<div>
<h2>标题1</h2>
<p>哈哈哈哈</p>
<ul>
<li>面饭</li>
<li>面包</li>
<li>馒头</li>
<li>
<strong>面条</strong>
</li>
</ul>
</div>
<div>
<h2>标题2</h2>
<p>呵呵呵呵</p>
</div>
</body>
|
元素的属性
每一个元素都可以拥有自己的属性，属性可以增强元素的功能
书写形式是：<起始标签 属性名=”属性值”>
属性名都是小写，而且是无序的，谁先谁后不影响实际效果
属性值可以使用双引号、单引号括住，也可以省略引号。建议统一使用双引号
有些属性是公共的，每一个元素都可以设置
比如class、id、title属性
有些属性是元素特有的，不是每一个元素都可以设置
比如meta元素的charset属性、img元素的alt属性等
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>
<head>
<title>Document</title>
</head>
<body bgcolor="orange">
<img src="http://pic.2345.cc/2345pic/impg" alt="哈哈哈" width="300">
<div class="box1">
<h2>Hello World</h2>
<p>哈哈哈哈哈</p>
</div>
<div class="box2">
<h2>Hello HTML</h2>
<p title="呵呵呵">呵呵呵呵呵</p>
</div>
<h1 title="嘻嘻嘻">我是标题</h1>
</body>
</html>
|
完整的HTML结构
文档声明 <!DOCTYPE html>
必须放在HTML文档的最前面，不能省略
html元素<html lang=”en”> </html>
根元素 - > 只存在一个
lang=”en”表示这个HTML文档的语言是英文
lang=”zh”表示这个HTML文档的语言是中文
1
2
3
4
5
6
7
8
9
| <!DOCTYPE html>
<html lang="en">
<head>
<title>内容</title>
</head>
<body>
<h1>哈哈哈</h1>
</body>
</html>
|
head元素 <head> </head>
元数据 -> metadata
用来描述数据的数据
对网页来进行一些基本设置
title网页标题
meta charset=’utf-8’
link -> 网站的图标
style
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>京东(JD)</title>
<link rel="icon" href="https://www.jd.com/favicon.ico">
<style>
h1 {
color: red;
font-size: 50px;
}
</style>
</head>
<body>
<h1>哈哈哈哈哈</h1>
</body>
</html>
|
body元素
网页的具体内容和结构
三.HTML基本元素
h元素
表示网页的标题
h1~h6共规定了6个等级的标题
h元素有助于网站的SEO优化，可以促进关键词排名
1
2
3
4
5
6
7
8
9
10
11
12
| <body>
<h1>我是h1标题</h1>
<h2>我是h2标题</h2>
<h3>我是h3标题</h3>
<h4>我是h4标题</h4>
<h5>我是h5标题</h5>
<h6>我是h6标题</h6>
</body>
|
p元素
表示文章中的一个段落 （paragraph）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <body>
<p>
那OPPO是如何解决这一系列问题的呢？今天下午一位网友在网上公布了似乎是OPPO Reno3 Pro的内部结构图，通过这个结构图我们可以看出OPPO Reno3 Pro的内部设计十分的紧致，也看的出来OPPO对这款手机下了很大的功夫，因此才能给我们带来既轻便又不失性能的完美平衡。
</p>
<p>
并且根据沈义人之前的爆料，OPPO Reno3 Pro版将会采用4025mAh电池，机身厚度也将控制在7.7mm，重量也仅为171g，同时还采用了360度环绕天线设计。在塞进这么大一块电池的状态下还能保持纤薄的机身，同时还要保证快充安全，这对散热的要求就非常的高。
</p>
<p>
OPPO Reno3 Pro这样一款兼具手感、性能、续航的手机大家是不是都等不及想要体验了呢？大家还是耐心等待本月26日OPPO Reno3系列的发布会，届时可能还有更加意想不到的惊喜等着你哦！
</p>
</body>
|
strong元素
用于强调某些文本，粗体的显示效果
1
2
3
4
5
6
7
8
9
| <body>
<p>
那<strong>OPPO</strong>是如何解决这一系列问题的呢？今天下午一位网友在网上公布了似乎是<strong>OPPO Reno3 Pro</strong>的内部结构图，通过这个结构图我们可以看出OPPO Reno3 Pro的内部设计十分的紧致，也看的出来OPPO对这款手机下了很大的功夫，因此才能给我们带来既轻便又不失性能的完美平衡。
</p>
</body>
|
code/hr/code元素
code元素:用于显示程序代码
br元素:单标签，表示强制换行
hr元素:分割线
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
|
<style>
span {
font-family: monospace;
}
div {
height: 40px;
background-color: red;
}
</style>
</head>
<body>
<p>这是一段代码 <code>function test() {}</code> 代码结束</p>
<p>这是一段代码 <span>function test() {}</span> 代码结束</p>
<p>
最早的蛋糕是用几样简单的材料做出来的。<br>
这些蛋糕是古老宗教神话与奇迹式迷信的象征。<br>
早期的经贸路线使异国香料由远东向北输入，坚果、花露水、柑橘类水果、枣子与无花果从中东引进，甘蔗则从东方国家与南方国家进口。<br>
在欧洲黑暗时代，这些珍奇的原料只有僧侣与贵族才能拥有，而他们的糕点创作则是蜂蜜姜饼以及扁平硬饼干之类的东西。慢慢地，随着贸易往来的频繁，西方国家的饮食习惯也跟着彻底地改变。<br>
从十字军东征返家的士兵和阿拉伯商人，把香料的运用和中东的食谱散播。在中欧几个主要的商业重镇，烘焙师傅同业公会也组织了起来。而在中世纪末，香料已被欧洲各地的富有人家广为使用，更增进了想象力丰富的糕点烘焙技术。等到坚果和糖大肆流行时，杏仁糖泥也跟着大众化起来，这种杏仁糖泥是用木雕的凸版模子烤出来的，而模子上的图案则与宗教训诫多有关联。<br>
蛋糕最早起源于西方，后来才慢慢的传入中国。
</p>
<p>
<div>
最早的蛋糕是用几样简单的材料做出来的。
</div>
<div>
这些蛋糕是古老宗教神话与奇迹式迷信的象征。
</div>
早期的经贸路线使异国香料由远东向北输入，坚果、花露水、柑橘类水果、枣子与无花果从中东引进，甘蔗则从东方国家与南方国家进口。
在欧洲黑暗时代，这些珍奇的原料只有僧侣与贵族才能拥有，而他们的糕点创作则是蜂蜜姜饼以及扁平硬饼干之类的东西。慢慢地，随着贸易往来的频繁，西方国家的饮食习惯也跟着彻底地改变。
从十字军东征返家的士兵和阿拉伯商人，把香料的运用和中东的食谱散播。在中欧几个主要的商业重镇，烘焙师傅同业公会也组织了起来。而在中世纪末，香料已被欧洲各地的富有人家广为使用，更增进了想象力丰富的糕点烘焙技术。等到坚果和糖大肆流行时，杏仁糖泥也跟着大众化起来，这种杏仁糖泥是用木雕的凸版模子烤出来的，而模子上的图案则与宗教训诫多有关联。<br>
蛋糕最早起源于西方，后来才慢慢的传入中国。
</p>
<hr color="red">
<div>哈哈哈哈</div>
<div class="box"></div>
</body>
|
字符实体
比较常用的有
空格：
大于号：>
小于号：<
&：&
span元素
默认情况下，跟普通文本几乎没差别
用于区分特殊文本和普通文本，比如用来显示一些关键字
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
| <style>
.text {
color: red;
font-size: 30px;
}
.new-price {
color: red;
font-size: 30px;
}
.old-price {
color: grey;
text-decoration: line-through;
}
</style>
</head>
<body>
我是一段文本
<span class="text">我也是一段文本</span>
<p>
<span class="new-price">¥69</span>
<span class="old-price">¥99</span>
</p>
</body>
|
div元素
一般作为其他元素的父容器，把其他元素包住，代表一个整体
可用以下代码把网页分割为多个独立的部分
1
2
3
| div{
outline:2px solid red !important;
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <style>
.box1 {
float: left;
}
.box2 {
float: right;
}
</style>
</head>
<body>
<div class="box1">
<h2>哈哈哈哈</h2>
<p>hahahahahahaahhahahah</p>
</div>
<div class="box2">
<h2>呵呵呵呵</h2>
<p>heheheheheheheheheheh</p>
</div>
</body>
|
img元素
专门用来显示图片（img是image的缩写）
img元素是单标签
src属性（ src是source的缩写）用来设置图片的路径（URL）
绝对路径：完整的描述文件位置的路径
相对路径：由这个文件所在的文件夹引起的跟其它文件的路径关系
. 代表当前文件夹（1个.），可以省略
.. 代表上级文件夹（2个.）
对于网页来说，路径分隔符都是 /
alt是img元素的必要属性
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
| <body>
<p>网络图片地址</p>
<img src="https://img.alicdn.com/bao/uploaded/i3/TB17fLDFVXXXXbAXXXXXXXXXXXX_!!0-item_pic.jpg_180x180q90.jpg_.webp" alt="">
<p>本地图片地址(绝对路径)</p>
<img src="C:\Users\UI\Desktop\资料共享\01-HTML-CSS\Day 01\上课代码\LearnHTML_CSS\img\test_01.webp" alt="">
<p>本地图片地址(相对路径)</p>
<img src="../img/test_01.webp" alt="">
<img src="./test_01.webp" alt="">
<img src="test_01.webp" alt="">
</body>
|
a元素
定义超链接，用于打开新的URL
常用属性
href(Hypertext Reference的简称)：指定要打开的URL
target：在哪里打开URL
有以下几种取值
_self：默认值，在当前窗口打开URL
_blank：在一个新的窗口中打开URL
_parent：在父窗口中打开URL
_top：在顶层窗口中打开URL
某个frame的name值：在某个frame中打开URL
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
| <body>
<p>打开是外部网站</p>
<a href="http://www.baidu.com">百度一下</a>
<a href="http://www.taobao.com">淘宝一下</a>
<a href="http://www.jd.com">京东一下</a>
<p>打开自己的网页</p>
<a href="./12_img元素的属性演练.html">打开图片网站</a>
<br>
<p>target属性演练(target=_blank)</p>
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<p>target属性演练(target=_parent)</p>
<a href="http://www.baidu.com" target="_parent">百度一下</a>
<p>target属性演练(target=_top)</p>
<a href="http://www.baidu.com" target="b">百度一下</a>
</body>
|
iframe元素
在一个HTML文档中嵌入其他HTML文档
frameborder属性:用于规定是否显示边框
1：显示
0：不显示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <body>
<iframe src="http://www.baidu.com"
width="1000"
height="600"
frameborder="1">
</iframe>
<iframe src="http://www.taobao.com"
width="1000"
height="600"
frameborder="1">
</iframe>
<iframe src="./12_img元素的属性演练.html"
width="1000"
height="600"
frameborder="1">
</iframe>
</body>
|
base元素
设置当前页面所有a元素的默认行为
base元素写在head元素中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<base href="https://www.baidu.com" target="_blank">
</head>
<body>
<a href="">百度一下</a>
<a href="/img/bd_logo1.png">百度logo</a>
<a href="/s?wd=vue">搜索abc</a>
<a href="https://www.taobao.com">淘宝一下</a>
</body>
|
锚点链接
可以实现跳转到网页中的具体位置
<a href=”#one”>go</a>
点击go会定位到
id值为one的元素
name值为one的a元素
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
| <style>
:target {
color: red;
}
</style>
</head>
<body>
<a href="#title1">标题1</a>
<a href="#title2">标题2</a>
<a href="#title3">标题3</a>
<h2 id="title1">标题1</h2>
<p>我是内容1</p>
<p>我是内容1</p>
<p>我是内容1</p>
<p>我是内容1</p>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<h2 id="title2">标题2</h2>
<p>我是内容2</p>
<p>我是内容2</p>
<p>我是内容2</p>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><b><br><br><br><br>
<br><br><br><br><br><br>
<h2 id="title3">标题3</h2>
<p>我是内容3</p>
<p>我是内容3</p>
<p>我是内容3</p>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
</body>
|
伪链接
没有指明具体链接地址的链接
点击链接后具体要做什么事情，需要编写对应的JavaScript代码
所以有时候可以把链接当作按钮来使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| </head>
<body>
<a href="http://www.baidu.com">百度一下</a>
<a>aaaaaa</a>
<a href="">aaaaaa</a>
<a href="#">aaaaaa</a>
<a href="javascript: alert('Hello World')">弹出弹窗</a>
<a href="" onclick="alert('Hello HTML')">弹出弹窗</a>
</body>
|
图片链接
img元素跟a元素一起使用，可以实现图片链接
1
2
3
4
5
6
7
8
9
10
11
12
| <body>
<a href="http://www.baidu.com">
<img src="../img/bd_logo1.png" alt="">
</a>
<a href="https://github.com/coderwhy/HYMiniMall/archive/master.zip
">下载GitHub项目</a>
<a href="mailto:12345@qq.com
">发送邮件</a>
</body>
|
URL的全称是Uniform Resource Locator（统一资源定位符）
URL就是资源的地址、位置，互联网上的每个资源都有一个唯一的URL
通过1个URL，能找到互联网上唯一的1个资源
URL常见的协议
http
超文本传输协议，访问的是远程的网络资源，格式是http://
http协议是在网络开发中最常用的协议
https协议相当于是http协议的安全版
file 访问的是本地计算机上的资源，格式是file://（不用加主机地址）
mailto 访问的是电子邮件地址，格式是mailto:
ftp 访问的是共享主机的文件资源，格式是ftp://
ed2k 通过支持ed2k(专用下载链接)协议的P2P软件访问该资源(代表软件:电驴)，格式是ed2k://
thunder 通过支持thunder(专用下载链接)协议的P2P软件访问该资源(代表软件:迅雷)，格式是thunder://
URL更具体更完整的语法格式为：
协议头://主机ip:端口号/路径/parameters?query#fragment
protocol://hostname[:port]/path/[;parameters][?query]#fragment
http://www.baidu.com:80/s?wd=ios#page
- port（端口号）
一台拥有IP地址的主机可以提供许多服务，比如Web服务、FTP服务、SMTP服务等
主机通过“IP地址 + 端口号”来区分不同的服务，端口号类似于营业厅的窗口
端口号的范围从0到65535，HTTP默认端口号是80，FTP默认端口号是21
- query
请求参数，提交给服务器的数据
- fragment
锚点位置
标签语义化
选择标签的时候要尽量让每一个标签都有正确的语义
使用最合适的标签去做最合适的事情
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <style>
p {
font-size: 32px;
font-weight: 700;
}
strong::after {
content: url(../img/bd_logo1.png);
}
</style>
</head>
<body>
<h1>网站的标题</h1>
<p>网站的标题</p>
<img src="../img/bd_logo1.png" alt="">
<strong>fdasf</strong>
<span>dfaf</span>
</body>
|
四. HTML元素
列表元素
有序列表：ol、li
ol有序列表,直接子元素只能是li
li列表中的每一项
1
2
3
4
5
6
7
| <ol>
<li>海王</li>
<li>海贼王</li>
<li>药王</li>
<li>上海堡垒</li>
<li>诛仙</li>
</ol>
|
无序列表：ul、li
ul有序列表,直接子元素只能是li
li列表中的每一项
1
2
3
4
5
6
7
| <ul>
<li>海王</li>
<li>海贼王</li>
<li>药王</li>
<li>上海堡垒</li>
<li>诛仙</li>
</ul>
|
定义列表 ：dl、dt、dd
dl定义列表，直接子元素只能是dt、dd
dt列表中每一项的项目名
dd列表中
每一项的具体描述，是对 dt 的描述、解释、补充
一个dt后面一般紧跟着1个或者多个dd
1
2
3
4
5
6
7
8
9
10
| <dl>
<dt>西瓜汁</dt>
<dd>红色的饮料</dd>
<dt>咖啡</dt>
<dd>黑色的饮料</dd>
<dt>牛奶</dt>
<dd>白色的饮料</dd>
</dl>
|
元素CSS属性
list-style-type
设置li元素前面标记的样式
disc（实心圆）、circle（空心圆）、square（实心方块）
decimal（阿拉伯数字）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）
lower-alpha（小写英文字母）、upper-alpha（大写英文字母）
none（什么也没有）
1
2
|
list-style-type: circle;
|
list-style-image
设置某张图片为li元素前面的标记，会覆盖list-style-type的设置
1
2
3
|
margin-left: 200px;
list-style-image: url(../img/test_01.webp);
|
list-style-position
设置li元素前面标记的位置，可以取outside、inside 2个值
1
2
|
list-style-position: inside;
|
list-style
是list-style-type、list-style-image、list-style-position的缩写属性
- 一般最常用的还是设置为none，去掉li元素前面的默认标记 list-style: none;
1
2
3
4
5
6
|
list-style: type image position;
list-style: none;
padding: 0;
margin: 0;
}
|
表格元素
常见的元素
table:表格
| border |
边框的宽度 |
| cellpadding |
单元格内部的间距 |
| cellspacing |
单元格之间的间距 |
| width |
表格的宽度 |
| align |
表格的水平对齐方式 left、center、right |
1
2
3
4
5
6
7
8
| <table border="1"
cellpadding="10"
cellspacing="5"
width="800"
height="400"
align="center">
</table>
|
tr:表格中的行
| valign |
单元格的垂直对齐方式 top、middle、bottom、baseline |
| align |
单元格的水平对齐方式 left、center、right |
1
2
3
4
5
6
7
8
9
| <tr valign="center" align="center">
<td valign="bottom" align="right" width="200">内容1</td>
<td>内容1</td>
<td>内容1</td>
<td>内容1</td>
<td>内容1</td>
</tr>
|
td:行中的单元格
| valign |
单元格的垂直对齐方式 top、middle、bottom、baseline |
| align |
单元格的水平对齐方式 left、center、right |
| width |
单元格的宽度 |
| height |
单元格的高度 |
| rowspan |
单元格可横跨的行数 |
| colspan |
单元格可横跨的列数 |
1
2
3
4
5
6
| <td valign="bottom" align="right" width="200">内容1</td>
<td>内容1</td>
<td>内容1</td>
<td>内容1</td>
<td>内容1</td>
|
细线表格
合并单元格的边框
border-collapse: collapse
1
2
3
4
5
6
7
8
9
10
| table {
border: 1px solid #666;
border-collapse: collapse;
margin: 20px auto;
}
|
其他元素
tbody:表格的主体
caption:表格的标题
1
2
3
4
5
6
7
| caption {
font-weight: 700;
font-size: 25px;
margin-bottom: 20px;
}
|
thead:表格的表头
tfoot:表格的页脚
th:表格的表头单元格
单元格的合并
合并方向是向后向下
删掉被覆盖掉的td元素
colspan:跨列合并
rowspan:跨行合并
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
| <body>
<table>
<tr>
<td colspan="2">单元格1</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td rowspan="2">单元格3</td>
<td rowspan="2" colspan="2">单元格4</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
</body>
|
单元格合并练习
border-spacing
用于设置单元格之间的水平、垂直间距
1
2
3
4
5
6
7
8
| table {
border-spacing: 10px 15px;
}
table, td {
border: 1px solid skyblue;
}
|
表单元素
一般情况下，其他表单相关元素都是它的后代元素
单行文本输入框、单选框、复选框、按钮等元素
type : input的类型
text：文本输入框（明文输入）
password：文本输入框（密文输入）
radio：单选框
name值相同的radio才具备单选功能
button:按钮
普通按钮（type=button）：使用value属性设置按钮文字
重置按钮（type=reset）：重置它所属form的所有表单元素（包括input、textarea、select）
1
2
3
4
5
6
7
|
<input type="reset">
|
提交按钮（type=submit）：提交它所属form的表单数据给服务器（包括input、textarea、select）
使用button元素也能实现按钮，功能效果跟input一样
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<div>
<input type="button" value="按钮">
<input type="reset">
<input type="submit">
</div>
<div>
<button type="button">按钮</button>
<button type="reset">重置</button>
<button type="submit">提交</button>
</div>
|
checkbox：复选框
属于同一种类型的checkbox，name值要保持一致
reset：重置
submit：提交表单数据给服务器
file：文件上传
maxlength:允许输入最大字数
placeholder:占位符
read only：只读
disabled：禁用
checked：默认被选中
只有当type为radio或checkbox时可用
auto focus：当页面加载时，自动聚焦
name：名字
在提交数据给服务器时，可用于区分数据类型
value：取值
form：设置所属的form元素（填写form元素的id）
一旦使用了此属性，input元素即使不写在form元素内部，它的数据也能够提交给服务器
label表单元素的标题
label元素一般跟input配合使用，用来表示input的标题
label可以跟某个input绑定，点击label就可以激活对应的input
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
| <div>
<label for="phone">手机：</label>
<input type="text" id="phone">
</div>
<div>
<label for="password">密码：</label>
<input type="password" id="password">
</div>
<div>
<span>性别：</span>
<label for="male">男</label>
<input type="radio" name="sex" id="male">
<label for="female">女</label>
<input type="radio" name="sex" id="female">
</div>
<div>
<span>爱好：</span>
<label for="basketball">篮球</label>
<input type="checkbox" name="sex" id="basketball">
<label for="rap">rap</label>
<input type="checkbox" name="sex" id="rap">
</div>
|
outline: none
tab index = -1
1
2
3
4
5
6
7
8
9
10
|
input {
outline: none;
}
input:focus {
border-color: #4791ff;
border-style: solid;
}
|
textarea多行文本框
cols:列数
rows:行数
缩放CSS设置
禁止缩放：resize: none;
水平缩放：resize: horizontal;
垂直缩放：resize: vertical;
水平垂直缩放：resize: both;
1
2
3
4
5
6
7
8
9
| <style>
textarea {
resize: none;
}
</style>
<body>
<textarea cols="30" rows="10"></textarea>
</body>
|
select和option
option是select的子元素，一个option代表一个选项
select常用属性
multiple：可以多选
size：显示多少项
option常用属性
selected：默认被选中
fieldset和legend
fieldset是表单元素组
legend是fieldset的标题
1
2
3
4
| <fieldset>
<legend>必填信息</legend>
</fieldset>
|
action:用于提交表单数据的请求URL
method:请求方法(get和post),默认是get
提交表单数据时，浏览器发送的是http请求，有2种请求方法可以选择
get在请求URL后面以?的形式跟上发给服务器的参数，多个参数之间用&隔开
比如http://ww.test.com/login?phone=123&password=234&sex=1
由于浏览器和服务器对URL长度有限制，因此在URL后面附带的参数是有限制的，通常不能超过1KB
post发给服务器的参数全部放在请求体中
理论上，post传递的数据量没有限制（具体还得看服务器的处理能力）
target:在什么地方打开URL(参考a元素的target)
enctype:规定了在向服务器发送表单数据之前如何对数据进行编码
application/x-www-form-url encoded：默认的编码方式
multi part/form-data：文件上传时必须为这个值，并且method必须是post
text/plain：普通文本传输
accept-charset字符编码：规定表单提交时使用的字符编码（默认值UNKNOWN，和文档相同的编码）
五.Emmet语法
!和html:5
生成html5代码
1
2
3
4
5
6
7
8
9
10
11
12
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
|
> 和+
>:生成子代元素
+:生成兄弟元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <!-- 结构: div > p > span > strong -->\
<!-- div>p>span>strong -->
<div>
<p>
<span>
<strong></strong>
</span>
</p>
</div>
<!-- 兄弟结构: h2+div+p -->
<!-- <h2></h2>
<div></div>
<p></p>
|
* 和^ 和()
*生成多个元素
^生成上一级的元素
()对元素进行分组
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
| <!-- 生成多个元素: div>p*5 -->
<!-- <div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div> -->
<!-- Emmet: div>p>span^h2+a -->
<div>
<p>
<span></span>
</p>
<h2></h2>
<a href=""></a>
</div>
<!-- (div>(p>span)+h2+a)+h1+strong -->
<div>
<p><span></span></p>
<h2></h2>
<a href=""></a>
</div>
<h1></h1>
<strong></strong>
|
属性id/class/普通
生成元素属性
1
2
3
4
5
6
7
8
9
10
11
12
13
| <!-- 1.演练 -->
<!-- div#main -->
<div id="main"></div>
<!-- div.box -->
<div class="box"></div>
<!-- div[title] -->
<div title=""></div>
<!-- div[title="哈哈哈"] -->
<div title="哈哈哈"></div>
<!-- 添加多个属性 -->
<!--div#hearder.box1.box2[title]="呵呵呵"-->
<div id="header" class="box1 box2" title="呵呵呵"></div>
|
{}内容
生成元素内容
1
2
3
4
| <!-- 1.生成内容: {} -->
<div>我是div元素</div>
<!-- div#main.box{我是div元素} -->
<div id="main" class="box">我是div元素</div>
|
$数字
生成数字
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <!-- 1.属性中有数字 -->
<!-- div.box$*4 -->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<!-- 2.内容中有数字 -->
<!-- div>p{文字内容$}*5 -->
<div>
<p>文字内容1</p>
<p>文字内容2</p>
<p>文字内容3</p>
<p>文字内容4</p>
<p>文字内容5</p>
</div>
|
隐式标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!-- .box -->
<div class="box"></div>
<!-- #main -->
<div id="main"></div>
<!-- .container>.box -->
<div class="container">
<div class="box"></div>
</div>
<!-- ul>.item${列表元素$}*5 -->
<ul>
<li class="item1">列表元素1</li>
<li class="item2">列表元素2</li>
<li class="item3">列表元素3</li>
<li class="item4">列表元素4</li>
<li class="item5">列表元素5</li>
</ul>
|
CSS的emmet语法
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
| .box {
width: 200px;
height: 200px;
margin: 20px;
padding: 30px;
font-size: 20px;
font-weight: 700;
line-height: 50px;
background-color: #31fab3;
display: inline-block;
}
|