html常用标签
字体标签
我是字体标签
1 | |
我是红色
1 | |
我是楷体
1 | |
我是4号字体
1 | |
font标签时字体标签，它可以用来修改文本的字体、颜色、大小
color属性修改颜色
face属性修改字体
size属性修改文本大小
1 | |
这段代码表示“这时愷龍的博客”这几个字时红色、楷体、大小为4的字
特殊字符
在一般的编程语言中我们都是用转义字符来实现换行，最典型的就是\n
但是在HTML语言中\n是不能实现换行的
我们来看一下如果用\n
1 | |
结果：
很明显这不能实现换行
在HTML中<br>是换行的语法
所以我们要想实现换行就可以使用<br>来实现
我们来尝试一下
1 | |
结果：
很明显我们实现了换行
这就是特殊字符
还有我们要是想显示<br>以文本方式显示该怎么做呢
直接写
1 | |
结果：
直接就被浏览器解析为换行了
这时候就可以查阅一下字符实体（实体名称对大小写敏感！）来看一下<和>对应的实体
所以我们就可以用下面的代码来显示<br>
1 | |
结果：
完整的字符实体可以参考链接：http://caibaojian.com/w3c/html/html_entities.html
标题标签
标题标签是h1到h6
例：显示标题1到标题6
1 | |
结果：
很明显标题七没有比标题6更大，标题的最小为6，如果超过标题6，浏览器就会解析为默认的样式，如图中所示。
h1-h6都是标题，h1最大，h6最小
我们还可以对标题的位置进行更改：
1 | |
结果：
这个在网页中点击之后是可以跳转到百度的网页的（但是在本地编辑的是不可以跳转的）。
我们还可以添加target属性来实现是跳转当前页面还是打开新页面
1 | |
结果：
接着我们用有序列表来显示：
1 | |
结果：
但是这个图片好像没一下显示全部，我们需要调整一下
1 | |
结果：
添加边框效果：
1 | |
结果：
跟刚才相比每个图片都加了1像素（可以自己调）的边框
现在我们引用的都是已经准备好的文件，那要是我们引用的文件不存在怎么办呢？
这时候就要用alt属性了
1 | |
结果：
我们可以自己利用alt属性来定义当引用了一个不存在的文件的时候来显示提示
img标签可以在html页面上显示图片
- src属性可以设置图片的路径
- width属性设置图片的宽度
- height属性设置图片的高度
- border属性设置图片的边框大小
- alt属性设置当指定路径找不到文件时，用来代替显示的文本内容
在Java中路径可以分为相对路径和绝对路径
- 相对路径：从工程名开始算
- 绝对路径：盘符:/目录/文件名
在web中路径也分为相对路径和绝对路径两种相对路径: . 表示当前文件所在的目录
.. 表示当前文件所在的上一级目录
绝对路径:
正确格式是： http://ip:port/工程名、资源路径
错误格式是： 盘符:/目录/文件名
table（表格）标签
看下面的代码：
1 | |
结果：
似乎不像印象中的表格（是因为没有边框）
再看下面的代码
1 | |
结果：
这回就像我们日常中的表格了
但是看起来不是很好看，我们再改一下
1 | |
结果：
但是好像还缺点什么？
再看：
1 | |
结果：
每个单元格的数据都居中且加粗了
我们再看这个：
1 | |
结果：
看！这跟刚才效果一样
th的效果就是单元格数据居中且加粗
一个样例：
1 | |
table标签是表格标签
border设置表格标签
width设置表格宽度
height设置表格高度
align设置表格相对于页面的对齐方式
cellspacing设置单元格间距
tr是行标签
th是表头标签
td是单元格标签align设置单元格文本对齐方式
b是加粗标签
跨行跨列表格
有时候我们的数据可能要占两个单元格这样该怎么设置呢？
看下面的代码
1 | |
结果：
通过使用colspan实现了一个数据占用两个单元格
但是多出来的空白怎么搞呢
1 | |
结果：
把第二个数据删掉后就可以把多出来的空白去掉
现在的效果是跨列，那要是跨行该怎么搞呢？
看：
1 | |
结果：
那要是同时跨行跨列呢？
1 | |
结果：
- colspan属性设置跨列
- roespan属性设置跨行
iframe框架标签（内嵌窗口）
iframe标签可以在html页面上打开一个小窗口去加载一个单独的页面。
例：这里放一下”赵今麦.html”的源码1
2我是一个单独的完整的页面<br></br>
<iframe src="赵今麦.html"/>结果：1
2
3
4<img src="../imgs/赵今麦.png" width="200" height="300" border="1">
<img src="../imgs/赵今麦1.png" width="200" height="300" border="1">
<img src="../imgs/赵今麦2.png" width="200" height="300" border="1">
<img src="../imgs/赵今麦3.png" width="200" height="300" border="1">
我们在一个完整的页面中又加入了一个新的页面，这就是iframe标签的简单用法
我们再调整一下
结果：1
2我是一个单独的完整的页面<br></br>
<iframe src="赵今麦.html" width="500" height="400"/>
我们调整了一下新加入的页面的大小
再看下面的结合着超链接的代码
结果(我是保存了一个我的博客的页面(kohler19.gitee.io))：1
2
3
4
5
6
7我是一个单独的完整的页面<br></br>
<iframe src="赵今麦.html" width="500" height="400" name="abc"></iframe>
<br/>
<br/>
<ul>
<li> <a href="愷龍的网络日志.htm" target="abc" >愷龍的网络日志</a></li>
</ul>
先是给这个原来的iframe起了个名字我们叫"abc",然后我们再使用href的时候调用target属性使得点击超链接之后在iframe中显示
>iframe标签可以再页面上开辟一个小区域显示一个单独的页面
>iframe标签和a标签组合使用的步骤：
>>1.在iframe标签中使用name属性定义一个名称
>.2.在a标签的target属性上设置iframe的name属性值
## 表单标签
什么是表单？
表单就是html页面中用来收集用户的信息的所有元素的结合，然后把这些信息发到服务器
最简单的表单举例：
例：
结果：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18<form>
用户名称：<input type="text" value="默认值"/> <br/>
用户密码：<input type="password" value="abc"/> <br/>
确认密码：<input type="password" value="abc"/> <br/>
性别：<input type="radio" name="sex" checked="checked"/>男<input type="radio" name="sex"/>女<br/>
兴趣：<input type="checkbox" checked="checked"/>Java<input type="checkbox"/>C++<input type="checkbox"/>python<br/>
国籍：<select>
<option>---请选择国籍---</option>
<option selected="selected">中国</option>
<option>美国</option>
</select><br/>
自我评价：<br/><textarea rows="10" cols="20">默认值</textarea><br/>
<input type="reset" value="重置"/>
<input type="submit"/>
<input type="button" value="按钮"/>
<input type="file"/>
<input type="hidden">
</form>
>form标签就是表单
>>input type="text"是文本输入框， value设置默认显示内容
>>input type="password"是密码输入框 value设置默认显示内容
>>input type="radio" 是单选框
>>>name属性可以对其进行分组 一组内的值不可以同时选中
>>>checked="checked"表示默认选中
>>input type="checkbox"是复选框
>>>checked="checked"表示默认选中
>>select标签是下拉列表框
>>>option标签是下拉列表中的选项，selected="selected"设置默认选中
>>textarea表示多行文本输入框(起始标签和结束标签中的内容是默认值)
>>>rows属性设置可以显示几行的高度
>>>cols属性设置每行可以显示几个字符宽度
>>input type="reset"是重置按钮 value属性修改按钮上的文本
>>input type="submit"是提交按钮 value属性修改按钮上的文本
>>input type="button"是按钮 value属性修改按钮上的文本
>>input type="file"是文件上传域
>>input type="hidden"是隐藏域 当我们要发送一些信息。而这些信息不需要用户参与，就可以使用隐藏域(提交的同时发给服务器)
## 表单格式化
刚才我们制作了简单的表格，但是它的各部分的排列不是很美观，接下来我们就整理一下
结果：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<form>
<h1 align="center">用户注册</h1>
<table align="center">
<tr>
<td>
用户名称:
</td>
<td>
<input type="text" value="默认值"/> <br/>
</td>
</tr>
<tr>
<td>
用户密码：
</td>
<td>
<input type="password" value="abc"/> <br/>
</td>
</tr>
<tr>
<td>
确认密码：
</td>
<td>
<input type="password" value="abc"/> <br/>
</td>
</tr>
<tr>
<td>
性别：
</td>
<td>
<input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex"/>女<br/>
</td>
</tr>
<tr>
<td>
兴趣：
</td>
<td>
<input type="checkbox" checked="checked"/>Java
<input type="checkbox"/>C++
<input type="checkbox"/>python<br/>
</td>
</tr>
<tr>
<td>
国籍：
</td>
<td>
<select>
<option>---请选择国籍---</option>
<option selected="selected">中国</option>
<option>美国</option>
</select><br/>
</td>
</tr>
<tr>
<td>
自我评价：
</td>
<td>
<br/><textarea rows="10" cols="20">默认值</textarea><br/>
</td>
</tr>
<tr>
<td><input type="reset"/></td>
<td align="center"><input type="submit"></td>
</tr>
</table>
</form>
我们就是再利用tr和td使得各部分排列更整齐，主要使用了之前说过的一些东西，就算是一些温习吧。
## 表单提交的细节
例：
结果：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<form action="http://www.baidu.com" method="GET">
<input type="hidden" name="action" value="login"/>
<h1 align="center">用户注册</h1>
<table align="center">
<tr>
<td>
用户名称:
</td>
<td>
<input type="text" value="默认值"/> <br/>
</td>
</tr>
<tr>
<td>
用户密码：
</td>
<td>
<input type="password" value="abc"/> <br/>
</td>
</tr>
<tr>
<td>
确认密码：
</td>
<td>
<input type="password" value="abc"/> <br/>
</td>
</tr>
<tr>
<td>
性别：
</td>
<td>
<input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex"/>女<br/>
</td>
</tr>
<tr>
<td>
兴趣：
</td>
<td>
<input type="checkbox" checked="checked"/>Java
<input type="checkbox"/>C++
<input type="checkbox"/>python<br/>
</td>
</tr>
<tr>
<td>
国籍：
</td>
<td>
<select>
<option>---请选择国籍---</option>
<option selected="selected">中国</option>
<option>美国</option>
</select><br/>
</td>
</tr>
<tr>
<td>
自我评价：
</td>
<td>
<br/><textarea rows="10" cols="20">默认值</textarea><br/>
</td>
</tr>
<tr>
<td><input type="reset"/></td>
<td align="center"><input type="submit"></td>
</tr>
</table>
</form>
我们把数据提交的地址设置为了百度，方式为GET
>form标签是表单标签
>>action属性设置提交的服务器地址
>>method属性设置提交的方式 GET或POST
分析一下跳转后的这个地址：https://www.baidu.com/?action=login&sex=on
https://www.baidu.com/ 服务器地址
？ 分隔符
action=login&sex=on 请求参数（表单的信息）
我们发现跳转后的链接里没有我们填写的数据，sex=on而不是男
这是因为表单项没有name属性
我们添加一个东西
1 | |
用户名称输入赵今麦，性别输入女 看一下结果：
https://www.baidu.com/?action=login&username=赵今麦&userpassword=123456&sex=on&country=中国
但是性别没有显示
我们再改一下：
1 | |
结果：
https://www.baidu.com/?action=login&username=赵今麦&userpassword=123&sex=女&country=中国
这次就显示了，也就是说你网页里的单选、复选、（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
>表单提交的时候，数据没有发送给服务器的三种情况：
>> 1.表单项没有name属性值
2.单选、复选、（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
3.表单项不在提交的form标签中（在form标签外的不会发给服务器）
GET请求的特点是：
1.浏览器地址栏中的地址是action属性[+?+请求参数]请求参数的格式是：name=value&name=value
例：username=赵今麦&userpassword=123456
2.不安全 所有数据都显示出来，容易泄露
3.它有数据长度的限制 method=”get”：此方法可传送 URL 中的表单内容：URL?name=value&name=value。
注释：如果表单值包含非 ASCII 字符或者超过 100 个字符，您则必须使用 method=”post”。
POST请求的特点是：
1.浏览器地址栏中只有action属性值
2.相对于GET请求更安全
3.理论上没有数据长度的限制
其他标签
例：
1 | |
结果：
div标签 默认独占一行
span标签 它的长度是封装数据的长度
p段落标签 默认会在段落的上方或下方各空出一行来（如果已有就不再空）
如果您有什么问题或建议可以在下方的评论区评论，我会及时回复的。
