文章目录
HTML全套基础教程【学习笔记】
1.系统结构
-
B/S架构：
Browser / Server （浏览器/服务器的交互形式。）Browser支持哪些语言：HTML CSS JavaScript
-
写HTML CSS JavaScript代码的这波人职位叫做：WEB前端开发工程师。 （Java程序员目前来看也需要会一些前端的东西。）
-
前端页面上的图片需要UI设计师完成。（PS对java程序员来说没有太高的要求。）
-
S是服务器端Server，Server端的语言很多：C C++ Java python…（我们主要是使用Java语言完成服务器端的开发）
-
B/S架构的系统有什么优点和缺点？
- 优点：升级方便，只升级服务器端代码即可。维护成本低。
- 缺点：速度慢、体验不好、界面不炫酷
企业内部的解决方案都是采用B/S架构的系统，因为企业内部办公需要的一些系统不需要炫酷，不需要特别好的用户体验，只要能做数据的增删改查即可。并且企业内部更注重维护的成本。
- B/S架构的系统有哪些代表？
京东
百度
天猫
…
-
-
C/S架构
-
Client / Server （客户端/服务器端的交互形式。）
-
缺点：升级麻烦，维护成本较高。
-
优点：速度快，体验好，界面炫酷。（娱乐型的系统多数是C/S架构的。）
-
常见的C/S架构的系统：
- 微信
- 支付宝
- …
-
2.软件环境准备
- 世界五大主流浏览器
-
Internet Explorer 简称ie，微软公司旗下浏览器
-
google chrome浏览器，google旗下浏览器，追求简洁、快速、安全，个人认为是最好用、速度最快的浏览器。
-
firefox浏览器，简称FF浏览器，mozilla公司旗下浏览器（第一次安装打开快）
-
safari浏览器，苹果公司旗下浏览器，在苹果系统下是很优秀的浏览器（不需要安装）
-
opera浏览器，挪威厂商opera旗下浏览器（不需要安装）
3.HTML概述
- 什么是HTML？怎么开发HTML？怎么运行HTML？
- HTML: Hyper Text Markup Language （超文本标记语言）
由大量的标签组成，每一个标签都有开始标签和结束标签。
<标签>
<标签>
<标签 属性名="属性值" 属性名="属性值">
</标签>
</标签>
</标签>
-
超文本: 流媒体、图片、声音、视频…
-
HTML开发的时候使用普通的文本编辑器就行，创建的文件扩展名是.html或者.htm
HTML也有专业的开发工具，例如：DreamWeaver、HBuilder… -
直接采用浏览器打开HTML文件就是运行。
- HTML是谁制定的？
- W3C：世界万维网联盟(World Wide Web)
- W3C制定了HTML的规范，每个浏览器生产厂家都会遵守规范。HTML程序员也会按照这个规范去写代码。
- HTML规范目前最高的版本是：HTML5.0，简称H5.
- 我们这里学习HTML4.0(主要是学习一下HTML的基础用法)
- W3C制定了很多规范：
HTML/XML/http协议/https协议…
- 为了方便中国web前端程序员的开发，提供大量的帮助文档。为开发提供方便。
- w3school:先出现的，和W3C没有关系
- w3cschool：后出现的，和W3C没有关系
4. 我的第一个HTML
-
HTML开发的时候使用普通的文本编辑器就行，创建的文件扩展名是.html或者.htm
HTML也有专业的开发工具，例如：DreamWeaver、HBuilder… -
直接采用浏览器打开HTML文件就是运行。
-
不加注释的代码
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页的主体内容，欢迎学习HTML！
</body>
</Html>
- 加注释的代码
<!--
1、这是HTML的注释
2、加上以下代码的第一行就表示HTML5语法。去掉就表示HTML4.0
3、HTML不区分大小写，语法松散不严格。
-->
<!doctype html>
<!--根-->
<html>
<!--头-->
<head>
<!--网页标题，显示在网页左上角-->
<title>网页的标题</title>
</head>
<!--体-->
<body>
网页的主体内容，欢迎学习HTML！
</body>
</html>
<!--</HTML>-->
<!--</Html>-->
<!--以上两种结尾写法也可以，也可以不写-->
5. HTML的基本标签
<!--注释内容-->
上面是注释格式
- 段落标记
<p>段落内容</p>
- 标题字：：是HTML预留的格式，和word中的标题字相同
<h1>标题字</h1>
<h2>标题字</h2>
<h3>标题字</h3>
<h4>标题字</h4>
<h5>标题字</h5>
<h6>标题字</h6>
- 换行标记
<br> (换行标记，br标签是一个独目标记)
- 横线，是独目标记，
<hr>
* <hr color="red" width="50%">
* color和width都是hr标签的属性
* 这里属性值引号可以是双引号 ，单引号，也可以没有
- 预留格式
<pre>内容</pre>
<pre>
for(int i = 0; i < 10; i++){
System.out.println("i = " + i);
}
</pre>
若没有<pre>内容</pre>，原内容不会换行，需要使用相关标签
- 其他标签
<del>删除字</del>
<ins>插入字</ins>
<b>粗体字</b>
<i>斜体字</i>
右上角加字（10的平方）：10<sup>2</sup>
右下角加字（10m）： 10<sub>m</sub>
字体标签：
<font color="red" size="50">字体标签</font>
居中标签：<center>内容</center>
- 上述标签使用代码
<!doctype html>
<html>
<head>
<title>HTML的基本标签</title>
</head>
<body>
<!--段落标记-->
<p>《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。</p><p>《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。</p>《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。
<!--标题字：是HTML预留的格式，和word中的标题字相同-->
<h1>标题字</h1>
<h2>标题字</h2>
<h3>标题字</h3>
<h4>标题字</h4>
<h5>标题字</h5>
<h6>标题字</h6>
<!--换行标记，br标签是一个独目标记-->
hello
world!
hello <br>world!
<!--横线，独目标记-->
<hr>
<!--color和width都是hr标签的属性-->
<hr color="red" width="50%">
<!--语法太松散了。-->
<hr color='green' width=30%>
<!--预留格式:html的 空格需要实体符号 ,换行需要标签<br>
但是这个标签会保留和HTML文档一样的格式-->
<pre>
for(int i = 0; i < 10; i++){
System.out.println("i = " + i);
}
</pre>
<del>删除字</del>
<ins>插入字</ins>
<b>粗体字</b>
<i>斜体字</i>
10<sup>2</sup>
10<sub>m</sub>
<!--字体标签-->
<font color="red" size="50">字体标签</font>
</body>
</html>
6.HTML的实体符号
<html>
<head>
<title>实体符号</title>
</head>
<body>
b<a>c
<!-- 上面这样写显示只会显示 bc-->
<!-- 实体符号特点是：以&开始，以;结束。< 是小于号 > 是大于号 -->
b<a>c
<!-- 手打再多空格也只有一个空格 -->
<!-- 空格实体符号 -->
abc def<br>
a bc
</body>
</html>
7. 表格*
* 一个表：<table></table>
* 一行：<tr></tr>
* 一个格：<td></td>
* th 标签也是单元格标签，比td多的是居中、加粗。
例：三行三列表：
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
* table的属性
border="1px" 设置表格的边框为1像素宽度。
width 表格的宽度
width="300px" 宽度为三百像素
width="60%" 占网页的60% ，同网页变化
height 表格的高度 使用和宽度类似
align 对齐方式 ，也可以是tr td 的属性
align="center" 居中对齐
<!doctype html>
<html>
<head>
<title>表格</title>
</head>
<body>
<br><br><br><br><br><br><br><br>
<center><h1>员工信息列表</h1></center>
<hr>
<!--
border="1px" 设置表格的边框为1像素宽度。
width 宽度
height 高度
-->
<!--
<table border="1px" width="300px">
-->
<table align="center" border="1px" width="60%" height="150px">
<!--align对齐方式-->
<tr align="center">
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>x</td>
<td>y</td>
<td align="center">z</td>
</tr>
</table>
</body>
</html>
8.单元格的合并
注意：
“rowspan删除下面的格子”
“colspan删除哪一个无所谓，反正在一行里面在一起”
例：三行三列表的合并：
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
行合并方法：删格(删掉的是下面的格子)（就是不写），另一个位置加上rowspan = "数字"
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td rowspan = "2"></td>
</tr>
<tr>
<td></td>
<td></td>
<!--这行删掉-->
</tr>
</table>
列合并方法
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td rowspan = "2"></td>
</tr>
<tr>
<td colspan="2">d</td>
<!--少一行-->
<td></td>
</tr>
</table>
- 示例代码
<!doctype html>
<html>
<head>
<title>表格单元格合并，以及th标签</title>
</head>
<body>
<!--注意事项：
1、row合并的时候，删除“下面的”单元格
2、col合并的时候，对删除哪个没有要求。
-->
<table border="1px" width="50%">
<tr>
<!--
<td>员工编号</td>
<td>员工薪资</td>
<td>部门名称</td>
-->
<!-- th 标签也是单元格标签，比td多的是居中、加粗。-->
<th>员工编号</th>
<th>员工薪资</th>
<th>部门名称</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td rowspan="2">f</td>
</tr>
<tr>
<td colspan="2">d</td>
<!--
<td>f</td>
-->
</tr>
</table>
</body>
</html>
9. 表格的其他标签thead tbody tfoot
在table中不是必须的，只是这样做便于后期的JS代码的编写。
三个不同分类的表格不能相互合并
- 示例代码
<!doctype html>
<html>
<head>
<!--这行代码的作用是告诉浏览器采用哪一种字符集打开当前页面。
注意：并不是设置当前页面的字符编码方式。-->
<meta charset="gbk">
<title>thead tbody tfoot 在table中不是必须的，只是这样做便于后期的JS代码的编写。</title>
</head>
<body>
<table border="1px" width="50%">
<!--头-->
<thead>
<tr>
<th>员工编号</th>
<th>员工薪资</th>
<th>部门名称</th>
</tr>
</thead>
<!--体-->
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td rowspan="2">f</td>
</tr>
<tr>
<td colspan="2">d</td>
</tr>
</tbody>
<!--脚-->
<tfoot>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tfoot>
</table>
</body>
</html>
10. 背景色和背景图片
这里开始使用HBuilder编辑
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景颜色和背景图片</title>
</head>
<!--
bgcolor : 设置背景色
background : 设置背景图片
以上的设置都是对背景进行设置。
-->
<body bgcolor="red" background="C:\Users\Administrator\Desktop\20211224_163037.png">
</body>
</html>
11. HTML图片img标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片img</title>
</head>
<body>
<!--
1、设置图片宽度和高度的时候，只设置宽度，高度会进行等比例缩放。
2、img标签就是图片标签
3、src属性是图片的路径
4、width设置宽度,height设置高度
5、title设置鼠标悬停时显示的信息。
6、alt设置图片加载失败时显示的提示信息。
-->
<img src="img/bd_logo1.png" width="100px" title="我是百度图片哦" alt="图片找不到哦!"/>
<!--
结束标签可以在开始个标签前加/，如果没有中间内容
这里路径是相对路径
-->
<img src="img/bd_logo1.png" width="100px" title="我是百度图片哦" alt="图片找不到哦!"></img>
<br><br><br>
<img src="img/bd_logo1.png" />
</body>
</html>
12. HTML超链接及其作用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接 热链接</title>
</head>
<body>
<!--
超链接的特点：
有下划线
鼠标停留在超链接上面显示小手形状。
点击超链接之后还能跳转页面。
-->
<a href="http://www.baidu.com">百度</a>
<a href="http://news.baidu.com/">百度新闻</a>
<a href="http://www.jd.com/">京东商城</a>
<a href="http://www.tmall.com/">天猫</a>
<a href="http://www.126.com/">126邮箱</a>
<br><br>
<!--
href：hot references 热引用
href属性后面一定是一个资源的地址。
href后面的路径可以是绝对路径也可以是相对路径，可以是网络中某个资源的路径，也可以是本地资源的路径。
-->
<a href="007-背景颜色和背景图片.html">007</a>
<!--图片超链接-->
<a href="https://www.hao123.com/">
<img src="img/hao123.png" width="120px"/>
</a>
<!--
超链接有一个target属性：
可取值：
_blank : 新窗口
_self ： 当前窗口（默认就是这种方式。）
_top ： 顶级窗口
_parent ： 父窗口
-->
<a href="https://www.hao123.com/" target="_self">
<img src="img/hao123.png" width="120px"/>
</a>
</body>
</html>
<!--
超链接的作用：
通过超链接可以从浏览器向服务器发送请求。
浏览器向服务器发送数据（请求：request）
服务器向浏览器发送数据（响应：response）
B/S结构的系统：每一个请求都会对应一个响应。
用户点击超链接和用户在浏览器地址栏上直接输入URL，有什么区别？
本质上没有区别，都是向服务器发送请求。
从操作上来讲，超链接使用更方便。
-->
12. HTML列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>
<body>
<!--有序列表-->
<ol type="I">
<li>水果
<ol type="a">
<li>苹果</li>
<li>西瓜</li>
<li>桃子</li>
</ol>
</li>
<li>蔬菜
<ol>
<li>西红柿</li>
</ol>
</li>
<li>甜点</li>
</ol>
<!--无序列表-->
<ul type="circle">
<li>中国
<ul type="square">
<li>北京
<ul type="disc">
<li>东城区</li>
<li>西城区</li>
<li>海淀区</li>
<li>朝阳区</li>
</ul>
</li>
<li>天津</li>
<li>上海</li>
</ul>
</li>
<li>美国</li>
<li>日本</li>
</ul>
</body>
</html>
13. HTML-form表单*****
表单示例：用来收集用户信息：
1. 表单form
- 表单有什么用？
收集用户信息。表单展现之后，用户填写表单，点击提交按钮提交数据给服务器。 - 怎么画一个表单？
使用form标签画表单。 - 一个网页当中可以有多个表单form。
- 表单最终是需要提交数据给服务器的
- form标签有一个action属性，这个属性用来指定服务器地址：
- action属性用来指定数据提交给哪个服务器。
- action属性和超链接中的href属性一样。都可以向服务器发送请求（request）
- 表单内部使用的标签 input
- type有多种形式，看下面示例感受作用
- submit button text password reset
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单form</title>
</head>
<body>
<!--
http://192.168.111.3:8080/oa/save 这是请求路径，表单提交数据最终提交给：
192.168.111.3机器上的8080端口对应的软件。
-->
<form action="http://192.168.111.3:8080/oa/save">
<!-- type="submit" 画一个提交按钮，这个按钮可以提交表单-->
<!-- 画按钮可以使用input输入域，type="submit"的时候表示该按钮是一个提交按钮，具有提交表单的能力。-->
<!-- 对于按钮来说，按钮的value属性用来指定按钮上显示的文本信息。-->
<input type="submit" value="登录"/>
<!-- type="button" 这是一个普通按钮，不具备提交表单的能力。-->
<input type="button" value="设置按钮上显示的文本"/>
</form>
<a href="http://www.baidu.com">百度</a>
<!--这个按钮和普通的超链接没什么太大的区别。（超链接和表单都可以向服务器发送请求，只不过表单发送请求的同时可以携带数据。）-->
<form action="http://www.baidu.com">
<input type="submit" value="百度" />
</form>
<br>
<br>
<form action="http://localhost:8080/jd/login">
用户名<input type="text" /><br>
密码<input type="password" /><br>
<input type="submit" value="登录" />
</form>
<!--
表单是以什么格式提交数据给服务器的？
http://localhost:8080/jd/login?username=abc&userpwd=111
格式：action?name=value&name=value&name=value&name=value&name=value...
W3C的HTTP协议规定的，必须以这种格式提交给服务器。
重点强调：表单项写了name属性的，一律会提交给服务器。不想提交这一项，就不要写name属性。
文本框和密码框的value不需要程序员指定，用户输入什么value就是什么。
当name没有写的时候，该项不会提交给服务器。这个注释上方的表单就没有提交任何信息
但是当value没有写的时候，value的默认值是空字符串""，会将空字符串提交给服务器。java代码得到的是：String username = "";
-->
<form action="http://localhost:8080/jd/login">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="userpwd" /></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="登录" />
<input type="reset" value="清空" />
</td>
</tr>
</table>
</form>
<!--submit必须放到form标签内部-->
<input type="submit" value="登录" />
<!--必须放到form标签内部-->
<input type="reset" value="清空" />
</body>
</html>
2.表单实例：用户注册的表单
- 注意：确认密码没有提交，减轻服务器压力，若是两次密码不同，可在浏览器以其他方式拦截
- input的type的其他选项 radio(单选按钮) checkbox(多选按钮)
- radio(单选按钮)的value必须指定来进行提交，而且若是两个单选按钮只可以选一个，这两个的name必须相同，多个也是如此 加checked默认选中
- checkbox(多选按钮)除了可以多选，使用方法都与单选按钮radio相同
- 表单除了有input标签，还有select标签，select标签需要name ，在其内部需要option标签，这个标签需要value，默认选择需要添加selected
- 表单内部标签文本域
- 属性有 rows cols name 没有value属性
- rows行高 cols列宽 这两个属性设置大小
- form表单method属性：
- get:采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏上。
- post：采用post方式提交的时候，用户提交的信息不会显示在浏览器地址栏上。
- 当用户提交的信息中含有敏感信息，例如：密码，建议采用post方式提交。
- method属性不指定，或者指定get，这种情况下都是get。 只有当method属性指定为post的时候才是post请求。剩下所有的请求都是get请求。
- post提交的时候提交的数据格式和get还是一样的，只不过不再地址栏上显示出来。
- 超链接也可以提交数据给服务器，但是提交的数据都是固定不变的
超链接是get请求。不是post请求，即提交的网址中提交的信息不能隐藏，
格式：action?name=value&name=value&name=value&name=value&name=value…
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册的表单</title>
</head>
<body>
<!--
用户注册：
用户名
密码
确认密码
性别
兴趣爱好
学历
简介
form表单method属性：
get:采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏上。
post：采用post方式提交的时候，用户提交的信息不会显示在浏览器地址栏上。
当用户提交的信息中含有敏感信息，例如：密码，建议采用post方式提交。
method属性不指定，或者指定get，这种情况下都是get。
只有当method属性指定为post的时候才是post请求。
剩下所有的请求都是get请求。
post提交的时候提交的数据格式和get还是一样的，只不过不再地址栏上显示出来。
POST提交的数据还是：name=value&name=value&name=value.....
-->
<form action="http://localhost:8080/jd/register">
用户名
<input type="text" name="username"/>
<br>
密码
<input type="password" name="userpwd" />
<br>
确认密码
<input type="password"/>
<br>
性别
<input type="radio" name="gender" value="1" />男
<input type="radio" name="gender" value="0" checked/>女 <!--单选按钮的value必须手动指定-->
<br>
兴趣爱好
<input type="checkbox" name="interest" value="smoke"/>抽烟
<input type="checkbox" name="interest" value="drink" checked/>喝酒
<input type="checkbox" name="interest" value="fireHair" checked/>烫头
<br>
学历
<select name="grade">
<option value="gz">高中</option>
<option value="dz">大专</option>
<option value="bk" selected>本科</option> <!--默认选中-->
<option value="ss">硕士</option>
</select>
<br>
简介 <!--文本域，文本域没有value属性，用户填写的内容就是value-->
<textarea rows="10" cols="60" name="introduce"></textarea>
<br>
<input type="submit" value="注册" />
<input type="reset" value="清空" />
</form>
<!--超链接也可以提交数据给服务器，但是提交的数据都是固定不变的。-->
<!--超链接是get请求。不是post请求。-->
<a href="http://localhost:8080/oa/save?username=zhangsan&password=111">提交</a>
</body>
</html>
<!--
http://localhost:8080/jd/register?username=jack&userpwd=111&gender=1&interest=smoke&interest=drink&grade=ss&introduce=jackgoodman
-->
3.其他form 控件
- 下拉列表支持多选 multiple=“multiple”
选择或取消选中时需要按着ctrl键进行鼠标点击
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉列表支持多选</title>
</head>
<body>
<!-- multiple="multiple" 支持多选的 size设置显示条目数量。-->
<select multiple="multiple" size="2">
<option>河北省</option>
<option>河南省</option>
<option>山东省</option>
<option>山西省</option>
</select>
</body>
</html>
- file控件 上传文件使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>file控件</title>
</head>
<body>
<!--file控件：文件上传专用。-->
<input type="file" />
</body>
</html>
- 隐藏域hidden控件
- 网页上看不到，但是表单提交的时候数据会自动提交给服务器
- 运行下面代码，地址栏会发现提交了userid=111，但是网页上没有显示
- 并不是为了安全，提交的信息没必要让用户看到，为了美观
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>file控件</title>
</head>
<body>
<form action="http://localhost:8080/oa/save">
<!--隐藏域：网页上看不到，但是表单提交的时候数据会自动提交给服务器。-->
<input type="hidden" name="userid" value="111" />
用户代码<input type="text" name="usercode" />
<input type="submit" value="提交" />
</form>
</body>
</html>
- 只读 readonly disabled
readonly和disabled相同点：都是只读不能修改。
但是readonly可以提交给服务器，
disabled数据不会提交（即使有name属性也不会提交。）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>readonly disabled</title>
</head>
<body>
<!--
readonly和disabled相同点：都是只读不能修改。
但是readonly可以提交给服务器，disabled数据不会提交（即使有name属性也不会提交。）
-->
<form action="http://localhost:8080/taobao/save">
用户代码<input type="text" name="usercode" value="110" readonly />
<br>
用户姓名<input type="text" name="username" value="zhangsan" disabled />
<br>
<input type="submit" value="提交数据" />
</form>
</body>
</html>
- maxlength 设置文本框中可输入的字符数量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>maxlength</title>
</head>
<body>
<!--
maxlength 设置文本框中可输入的字符数量。
-->
<input type="text" maxlength="3" />
</body>
</html>
14. HTML中元素的id属性
- 在HTML文档当中，任何元素（节点）都有id属性，id属性是该节点的唯一标识。所以在同一个HTML文档当中id值不能重复。
- 注意：表单提交数据的时候，只和name有关系，和id无关。
- id有什么用？
javascript语言：可以对HTML文档当中的任意节点进行增删改操作。
javascript可以对HTML文档当中的任意节点进行增删改，那么增删改之前需要先拿到这个节点，通常我们通过id来拿节点对象。
id的存在让我们获取元素（节点）更方便。 - HTML文档是一棵树，树上有很多节点，每一个节点都有唯一的id。
javascript主要就是对这棵DOM树上的节点进行增删改的。 - DOM(Document)树。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML中元素的id属性</title>
</head>
<body id="mybody">
<form id="myform">
<input type="text" id="username" name="username"/>
<input type="password" id="userpwd" name="userpwd"/>
<!--id就是节点的身份证号码，不能重复。-->
<!--
<input type="text" id="username" />
-->
</form>
</body>
</html>
15.TML中的div和span
-
div和span是什么？有什么用？
- div和span都可以称为“图层”
- 图层的作用是为了保证页面可以灵活的布局。
- 图层就是一个一个的盒子，div嵌套div就是盒子套盒子。
- div和span是可以定位的，只要定下div的左上角的x轴和y轴坐标即可。
-
其实最早的网页是采用table进行布局的，但是table不灵活，太死板。
现代的网页开发中div布局使用最多，几乎很少使用table进行布局了。 -
div和span的区别？
- div独自占用一行（默认情况下）
- span不会独自占用一行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML中的div和span</title>
</head>
<body>
<div id="div1">我是一个DIV</div>
<div id="div2">我是一个DIV</div>
<span id="span1">我是一个SPAN标签</span>
<span id="span2">我是一个SPAN标签</span>
<div id="div3">
<div>
<div>test</div>
</div>
</div>
</body>
</html>
扫一扫
537
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
