这篇博客详细介绍了HTML的基本概念、语法、常用标签和表单，包括HTML5的新特性，如背景图片、内联框架等。通过实例解析，帮助读者掌握HTML的结构和功能，为网页开发打下坚实基础。
HTML笔记一：（与笔记二类似）
HTML概述：
超文本标记语言（Hyper Text Markup Lauguage）
功能：搭建网页整体结构
- 超文本：它区别于其它普通文本。它具备了普通文本不具备的功能，比如图片，音视频，链接等等
- 标记：通过标签的方式呈现出来。
- 语言：它是一门独立语言
HTML5，由W3C组织（万维网联盟）制定统一标准。
它不能做一些逻辑判断的功能。它只具有展示的和布局的功能。
它是W3C组织提出并制定的规范。它的标记（标签）是有限的。
W3C：万维网联盟
www：world wide web 万维网
HTML早期是从SGML中分离出来的(94年)。SGML现在已经消失了（在2020年，也许会慢慢的回来，但是不确定，不过肯定不会再叫SGML）
SGML: Standard General Markup Language 标准通用标记语言（它是支持逻辑判断，变量声明等等的编码的。消失的原因是因为太难了）
HTML基础：
基本组成：
通常情况下，html的页面最少由以下三个标签构成。（特殊情况就是frameset标签的使用）
<html>---------------------表示html页面的开始
<head>--------------------------------表示头部信息的开始
</head>-------------------------------表示头部信息的结束
<body>----------------------------------------------------表示html的主体信息开始
</body>---------------------------------------------------表示html的主体信息结束
</html>--------------------表示html页面的结束
html标签内部，通常就是定义head和body(frameset)
head标签内部，通常是一些声明的部分，
比如引入css样式文件，引入js文件，定义meta信息（页面展示源信息）
body标签内部，通常就是页面展示的主体部分。
基本语法：
HTML它全是标签。
标签的写法是：
<标签的名称>
例如：html标签
head标签
语法要求：
标签要有开始，有结束。
标签的开始：
标签的结束：
由开始标签和结束标签组成一个完整的标签部分（标签基本是成对出现的）
在开始和结束标签内部出现的内容，称之为标签体（标签的文本）。但是，不是所有标签都可以写文本的
此处出现的内容就是标签体内容，但是不是所有标签都支持写标签体
标签可以有属性：
在中通过空格和标签名称分隔开 属性通常都是由属性名称和值组成。
极少数属性只有名称而没有值。
属性的名称和值用等号分隔，值通常都用双引号扩起来（不是绝对的，主要看浏览器是否支持）
特殊说明：
自闭和标签。标签支持自关闭。
例如：
水平线标签：标准写法<hr>
自闭和写法：<hr/>(此时可以不用写关闭）
html中的注释：
<!–注释的写法–>
HTML常用标签：
标签语义：
根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更加清晰。
标题标签：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>01-标题</title>
</head>
<body>
<!--
它是由一组标签组成的。可以分别展示不同的标题大小。
写法是：<h1>-<h6>
大小顺序是
1最大，6最小
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
水平线标签：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>02-水平线</title>
</head>
<body>
<!--
水平线标签，就是在浏览器上显示一条水平线
标签名称：
<hr><hr/>
此标签不支持有标签体。所以建议自闭和。
通常写法就是：<hr/>
水平线标签通常情况下都是自己独立一行的。
标签属性：
size属性：用于指定水平线的宽度。取值是正整数。含义是像素数。例如：10表示的就是10像素。
color属性：用于指定水平线的颜色。
英文单词
用于专门表示颜色的RGB写法
用于在html中描述颜色的#xxxxxx 6个16进制的数值
注意事项：
代码中的书写格式和最终展示结果没有必然的关联。
例如：下面我们的水平线标签和文本写在一行了，但是展示时，不会在一行。
-->
这是一条水平线：<hr size="100" color="#98F5FF"/>
</body>
</html>
段落和换行标签
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>03-段落和换行</title>
</head>
<body>
<!--
段落标签： <p></p>
在标签体内部的就是一段。
换行标签：<br/>
它不支持标签体内容。是把标签后面的内容另起一行来展示。
-->
<p>
是一所为互联网、人工智能、工业4.0培养高精尖科技人才的应用型大学。
<br/>学校经教育局批准，由江苏教育科技股份有限公司投资创办。
</p>
<p>
当今世界已进入人工智能、机器人时代，人工智能、机器人已成为未来30年、甚至50年科技革命最重要的发展方向。
<br/>世界各国越来越重视，我国政府也高度关注人工智能的发展，无论是党的十八大、十九大，
还是2017、2018、2019的政府工作报告，均提出要重点发展人工智能、机器人，并提升到国家战
超链接标签：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>04-超链接</title>
</head>
<body>
<!--
超链接标签：
写法：<a>展示在页面中的名称</a>
要想让他成为链接，需要提供href属性。
href属性：
它指定的是链接的地址。
取值可以是：
相对路径：相对于当前文件的路径
同级目录：直接写文件名称
上级目录：../返回到上一级（如果是多级，有几级就写几个../），然后再写文件名称
下级目录：先写目录名称，然后在写文件名称 或者用./表示当前目录，然后写下级目录名和文件名
绝对路径
磁盘绝对（本地文件）
I:/javaweb_ee36/ee36_first/day01_html/firstdir/01-标题.html
它的访问方式不能通过网络访问（因为如果网络能够访问本地文件是很危险的）
网络绝对（网络文件）
http://localhost:63342/ee36_first/day01_html/firstdir/04-超链接标签.html?_ijt=l79pgr6kntjm1kd1u0oi5vuafi
项目绝对（web工程中的写法）
类路径：classpath目录下的，它在java工程中可以看出是绝对路径了，因为用类加载器是可以直接读取类路径下的文件的。
应用路径(需要讲完web工程之后才能讲解，也是放到tomcat那天课程给大家讲解）
target属性：
指定在何处打开此链接。
取值可以是：
_self,表示在当前选项卡（浏览器中）
不配置时，它是打开一个新的选项卡
指定一个名称，该名称可以是框架或者内联框架的一个名称的声明
出现404之后，就是资源没有找到（首先检查文件名是否写错了，接下来再查是否路径写错了）
-->
<!--相对路径-->
<!--同级-->
<a href="01-标题.html" target="main">前往标题标签</a>
<!--上级-->
<a href="../03-段落和换行.html">前往段落和换行标签</a>
<!--下级-->
<a href="./seconddir/02-水平线.html">前往水平线标签</a>
<hr/>
<!--磁盘绝对，不能通过网络访问-->
<a href="I:/javaweb_ee36/ee36_first/day01_html/firstdir/01-标题.html">前往标题标签-绝对路径</a>
<!--网络绝对-->
<a href="http://localhost:63342/ee36_first/day01_html/03-%E6%AE%B5%E8%90%BD%E5%92%8C%E6%8D%A2%E8%A1%8C.html?_ijt=j0mdlekmsmso29h8i6tj24f127">前往段落和换行标签-绝对路径</a>
</body>
</html>
图像标签：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>05-图像</title>
</head>
<body>
<!--
图像标签：<img/>
该标签是在html中引入图片的，它不支持标签体，所以通常自闭和。
属性：
src：这是图像标签必须的属性。它是用于指定图像的路径的。
路径又分为了：相对路径和绝对路径。
width:调整图像的宽度 支持像素（px），也支持百分比
height:调整图像的高度
在调整图像的宽高时，通常我们只需要设置一个属性即可，另一个属性会随着比例变动。
alt：当鼠标放在上面时，会提示说明(它是在src不存在时，会提示信息），它对浏览器要求较高（不是所有浏览器都支持）
title：当鼠标放在上面时，会提示说明（只是说明信息）
-->
<img src="./images/cj.jpg" width="640px" alt="图片说明" title="图片说明" border="10"/>
</body>
</html>
列表标签：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>06-列表</title>
</head>
<body>
<!--
有序列表：
<ol></ol> 它的含义是： order list
标签中包含子标签。
每一个列表项是<li></li> 含义是 list item
属性：
type：指定序号的类型
无序列表
<ul></ul> 它的含义是： unorder list
它也可以使用子标签
每一个列表项是<li></li>
属性：
type：指定显示的无序图标
-->
<ol type="A">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
<hr/>
<ul type="square">
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</body>
</html>
div标签和span标签
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>07-容器标签</title>
</head>
<body>
<!--
层标签：<div></div>
它是有开始有结束，在标签内部可以写文本（标签体内容）
它的特点是，每一对div独占一行。
块标签：<span></span>
它和层标签<div>很类似，也是用于独立区域内容的。
和div的区别是，它的宽度是由内容的宽度决定的。
它们在当下的开发中使用的较多，但是都是配合css使用，来进行页面布局的。
<div> 和 <span> 是没有语义的，它们就是一个盒子，用来装内容的
补充：
语义化标签：<fieldset></fieldset>
在语义化标签内部使用<legend></legend>描述语义。
-->
<div>ee36</div>
<div>ee37</div>
<hr/>
<span>ee36aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
<span>ee37</span>
<hr/>
<fieldset>
<legend>用户必填信息</legend>
用户名：<br/>
密码：<br/>
年龄：<br/>
生日：<br/>
....
</fieldset>
<fieldset>
<legend>用户选填信息</legend>
住址：<br/>
联系方式：<br/>
邮箱：<br/>
....
</fieldset>
</body>
</html>
实体字符
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>08-实体字符</title>
</head>
<body>
<!--
字体标签:<font></font>
它可以控制字体的大小，字体颜色，字体类型（宋体，微软雅黑等等）
属性：
size: 取值1-7.
color：取值方式和水平线的颜色取值方式是一样的。
英文单字，rgb,#xxxxxx
face:用于指定字体的类型（但是到了样式里面就从family）
加粗标签：<b></b>
它是让我们的字体加粗
<strong></strong>
在html中有两种特殊的转义符号
1.与html语法有冲突 例如 a<b>c 小于号 <
2.输入法不方便输入 例如 ♥ ♥
常用的实体字符(了解)
-->
<font color="lightblue" face="宋体" size="7">
字体标签<br/>
<b>字体标签</b><br/>
<strong>字体标签</strong>
</font>
<hr/>
半个英语字母英文空格
一个汉字中文空格   
小于号 <
大于号 >
&符号 &
￥符号 ¥
</body>
</html>
基本表格
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>09-基本表格</title>
</head>
<body>
<!--
表格标签：
<table></table>
属性：
border:表格的边框
align:表格相对于当前html显示的位置，居左，居中，居右
width:宽度 取值支持像素数和百分比
height：高度 取值支持像素数和百分比
行标签
<tr></tr>
单元格标签
<td></td>
属性：
align：指定文本内容的位置，居中，居左，居右。默认是居左的
标题行的单元格可以使用<th></th>，它的文本默认是加粗且居中的。
-->
<table border="1" align="center" width="500px" height="350px">
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>生日</th>
</tr>
<tr>
<td>1</td>
<td align="center">泰斯特</td>
<td>18</td>
<td>男</td>
<td>1990-01-01</td>
</tr>
<tr>
<td>2</td>
<td>老王</td>
<td>45</td>
<td>男</td>
<td>1975-01-01</td>
</tr>
<tr>
<td>3</td>
<td>小孙</td>
<td>23</td>
<td>女</td>
<td>1997-02-05</td>
</tr>
</table>
</body>
</html>
合并表格
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>10-表格合并</title>
</head>
<body>
<!--
表格的合并
使用的属性是td标签的：
colspan：跨列
rowspan：跨行
-->
<table width="300px" height="200px" align="center" border="1" cellpadding="0" cellspacing="0" >
<tr>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
HTML表单
表单简介：
HTML表单：用于采集用户数据，并发送给后端服务器
表单控件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>11-表单控件</title>
</head>
<body>
<!--
它的意义是，让用户（使用者）把信息提交到服务器端，由服务器去处理。
表单它是用于采集数据的。
表单标签：
<form></form>
它不支持标签体，但是也不能自闭和。它里面要添加表单的元素（表单控件）
表单标签的属性：
name：它是给表单提供一个名称，不写也行。但是写了的话，必须唯一。
最重要的三个属性，必须能够清晰的描述出来。
action：请求的地址（当学习了服务端之后，就是写请求服务端的地址）
method：请求的方式。post和get两种方式。(除此之外还有请求方式，需要等到讲解HTTP协议时给同学们介绍）
post:表单的控件名称和值不显示在地址栏中。相较于get方式更加安全，且由于是post方式，没有大小限制（相对的）。
通常我们的表单请求都采用post方式。
post方式提交时，它的体现形式也是
key=value的形式。
例如：username=test&password=1111
get:表单的控件名称和值是在地址栏中显示的。
显示的方式是：
key=value的方式。
例如：username=test.
它的弊端：
第一个就是数据不安全，因为在地址栏中显示
第二个就是大小有限制。地址的长度通常不能超过256的字符。
要想让表单提交的数据体现形式发生变化，请看下面的的这个表单属性，它的取值变了，表单提交数据的体现形式就会发生变化。
enctype：编码表单数据的类型。（什么类型呢？MIME类型，这个类型，需要等到讲解tomcat课程时给同学们介绍）
取值也是两个
application/x-www-form-urlencoded 默认值，不指定该属性时，取值为它
multipart/form-data 文件上传时必要的取值。
表单元素：（表单控件）
控件标签：<input>
它不支持标签体。通常自闭和。
它的核心属性有两个
type属性：用于指定控件的类型
text：普通文本框
password：密码框（它不会显示内容，只显示.或者*）
radio：单选按钮，要求name的取值相同时，才会认为是一组内容（才能单选）
hidden：隐藏域，需要存在于表单之中，但是不希望使用者关心。此时使用隐藏域。
file：文件.它是一个特殊的控件，只有文件上传时，才会用得到
checkbox:复选框 它和单选按钮是一样的，都是name取值相同时认为是一组内容。
submit：提交按钮。提交表单的按钮。提交含义就是把表单中控件（具有name属性的）提交到action属性指定的地址。
reset：重置按钮。把已经填写好的内容都重置回初次显示的内容。
name属性：用于指定控件的名称（它是能否提交到服务器端的标识。没有name属性的input是不会提交到服务器端的。）
其他属性：
value属性：它是指定控件的值的。
下拉列表：<select></select>
它不支持标签体文本，但是也不能自闭和。因为他有列表元素标签。
列表元素标签：
<option></option> 每一个option表示一个列表项
它的特征是：
name属性是写在select标签上。而每个选项取值的含义有option的value属性指定。
默认选中的是第一项。我们可以通过在option标签上添加selected属性来指定默认选中
文本域标签：<textarea></textarea>
它的标签体内容直接写在开始标签和结束标签中间即可。它不支持value属性
属性：
cols：表示显示几列
rows：表示显示几行
-->
<form name="demoForm" action="01-标题.html" method="get" enctype="application/x-www-form-urlencoded">
我是隐藏域：<input type="hidden" name="hidden" value="我不想让你看见">
用户名：<input type="text" name="username"/><br/>
密码：<input type="password" name="password"/><br/>
性别：<input type="radio" name="gender" value="male" >男
<input type="radio" name="gender" value="female">女<br/>
爱好：<input type="checkbox" name="hobby" value="篮球" >篮球
<input type="checkbox" name="hobby" value="足球" >足球
<input type="checkbox" name="hobby" value="游泳" >游泳
<input type="checkbox" name="hobby" value="唱歌" >唱歌<br/>
文件：<input type="file" name="file"><br/>
城市：<select name="city">
<option>---请选择---</option>
<option value="bj">北京</option>
<option value="sh" selected>上海</option>
<option value="sz">苏州</option>
</select><br/>
简介：<textarea cols="25" rows="5">今天我们学习的是html的课程</textarea><br/>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</body>
</html>
HTML特殊标签：框架和内联框架
框架标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>框架标签</title>
</head>
<!--
它的体验度不是很好，所以现在已经不太建议使用了
框架标签：
<frameset></frameset>
标签体不能写文本，但是也不能自闭和。它里面写的是<frame>标签
它是支持嵌套的
框架项标签：
<frame>
它没有标签体，通常就是自闭和
-->
<frameset rows="50px,100%">
<frame src="01-标题.html"/>
<frameset cols="120px,100%">
<frame src="./firstdir/04-超链接.html"/>
<frameset rows="100%,100px">
<frame src="03-段落和换行.html" name="main"/>
<frame src="02-水平线.html"/>
</frameset>
</frameset>
</frameset>
</html>
内联框架标签：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架标签</title>
</head>
<body>
<!--
内联框架标签：
<iframe/> 它没有标签体，可以自闭和。
它是在一个html中嵌入另一个html页面
-->
我是内联框架标签的页面，现在要嵌入基本表格标签的页面
<iframe src="09-基本表格.html" width="800px" height="500px" frameborder="1"></iframe>
</body>
</html>
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架构的系统：
QQ
微信
支付宝
....
2、什么是HTML？怎么开发HTML？怎么运行HTML？
* HTML: Hyper Text Markup Language （超文本标记语言）
由大量的标签组成，每一个标签都有开始标签和结束标签。
<标签>
<标签>
<标签 属性名="属性值" 属性名="属性值">
</标签>
</标签>
</标签>
超文本: 流媒体、图片、声音、视频....
* HTML开发的时候使用普通的文本编辑器就行，创建的文件扩展名是.html或者.htm
HTML也有专业的开发工具，例如：DreamWeaver、HBuilder.....
* 直接采用浏览器打开HTML文件就是运行。
3、HTML是谁制定的？
W3C：世界万维网联盟
W3C制定了HTML的规范，每个浏览器生产厂家都会遵守规范。HTML程序员也会按照这个规范去写代码。
HTML规范目前最高的版本是：HTML5.0，简称H5.
我们这里学习HTML4.0（主要是学习一下HTML的基础用法。）
W3C制定了很多规范：
HTML/XML/http协议/https协议......
为了方便中国web前端程序员的开发，提供大量的帮助文档。为开发提供方便。
w3school:先出现的，和W3C没有关系
w3cschool：后出现的，和W3C没有关系
HTML基础语法
<!--
1、这是HTML的注释
2、加上以下代码的第一行就表示HTML5语法。去掉就表示HTML4.0
3、HTML不区分大小写，语法松散不严格。
-->
<!doctype html>
<!--根-->
<html>
<!--头-->
<head>
<!--网页标题，显示在网页左上角-->
<title>网页的标题</title>
</head>
<!--体-->
<body>
网页的主体内容，欢迎学习HTML！
<!--段落标记-->
<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%>
<!--预留格式-->
<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>
<!-- 实体符号特点是：以&开始，以;结束。< 是小于号 > 是大于号 -->
b<a>c
abc def<br>
a bc
</body>
<!--
</HTML>
-->
<!--
</Html>
-->
表格
<!doctype html>
<html>
<head>
<title>表格单元格合并，以及th标签</title>
</head>
<body>
<!--注意事项：
1、row合并的时候，删除“下面的”单元格
2、col合并的时候，对删除哪个没有要求。
3,thead tbody tfoot 在table中不是必须的，只是这样做便于后期的JS代码的编写。
-->
<table border="1px" width="50%">
<thead>
<tr>
<!--
<td>员工编号</td>
<td>员工薪资</td>
<td>部门名称</td>
-->
<!-- th 标签也是单元格标签，比td多的是居中、加粗。-->
<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>
</tbody>
<tfoot>
<tr>
<td colspan="2">d</td>
<!--
<td>f</td>
-->
</tr>
</tfoot>
</table>
</body>
</html>
背景图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景颜色和背景图片</title>
</head>
<!--
bgcolor : 设置背景色
background : 设置背景图片
以上的设置都是对背景进行设置。
-->
<body bgcolor="red" background="img/bd_logo1.png">
</body>
</html>
插入图片
<!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>
超链接，热链接
超链接的作用：
通过超链接可以从浏览器向服务器发送请求。
浏览器向服务器发送数据（请求：request）
服务器向浏览器发送数据（响应：response）
B/S结构的系统：每一个请求都会对应一个响应。
用户点击超链接和用户在浏览器地址栏上直接输入URL，有什么区别？
本质上没有区别，都是向服务器发送请求。
从操作上来讲，超链接使用更方便。
超链接的特点：
有下划线
鼠标停留在超链接上面显示小手形状。
点击超链接之后还能跳转页面。
<!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>
有序列表
<!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>
表单
1、表单有什么用？
收集用户信息。表单展现之后，用户填写表单，点击提交按钮提交数据给服务器。
2、怎么画一个表单？
使用form标签画表单。
3、一个网页当中可以有多个表单form。
4、表单最终是需要提交数据给服务器的，form标签有一个action属性，这个属性用来指定服务器地址：
action属性用来指定数据提交给哪个服务器。
action属性和超链接中的href属性一样。都可以向服务器发送请求（request）
5、http://192.168.111.3:8080/oa/save 这是请求路径，表单提交数据最终提交给：
192.168.111.3机器上的8080端口对应的软件。
表单是以什么格式提交数据给服务器的？
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 = "";
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单form</title>
</head>
<body>
<!-- multiple="multiple" 支持多选的 size设置显示条目数量。-->
<!--下拉列表-->
<select multiple="multiple" size="2">
<option>河北省</option>
<option>河南省</option>
<option>山东省</option>
<option>山西省</option>
</select>
<!--表单-->
<form action="http://192.168.111.3:8080/oa/save">
<!-- 画一个提交按钮，这个按钮可以提交表单-->
<!-- 画按钮可以使用input输入域，type="submit"的时候表示该按钮是一个提交按钮，具有提交表单的能力。-->
<!-- 对于按钮来说，按钮的value属性用来指定按钮上显示的文本信息。-->
<input type="submit" value="登录"/>
<!--这是一个普通按钮，不具备提交表单的能力。-->
<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>
<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="清空" />
<form></form>
</body>
</html>
用户注册表单（例题）：
<!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
-->
file控件（文件上传专用）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>file控件</title>
</head>
<body>
<!--file控件：文件上传专用。-->
<input type="file" />
<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>
<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>
HTML中元素的id属性
1、在HTML文档当中，任何元素（节点）都有id属性，id属性是该节点的唯一标识。所以在同一个HTML文档当中id值不能重复。
2、注意：表单提交数据的时候，只和name有关系，和id无关。
3、id有什么用？
javascript语言：可以对HTML文档当中的任意节点进行增删改操作。
javascript可以对HTML文档当中的任意节点进行增删改，那么增删改之前需要先拿到这个节点，通常我们通过id来拿节点对象。
id的存在让我们获取元素（节点）更方便。
4、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>
HTML中的div和span
1、div和span是什么？有什么用？
* div和span都可以称为“图层”
* 图层的作用是为了保证页面可以灵活的布局。
* 图层就是一个一个的盒子，div嵌套div就是盒子套盒子。
* div和span是可以定位的，只要定下div的左上角的x轴和y轴坐标即可。
2、其实最早的网页是采用table进行布局的，但是table不灵活，太死板。
现代的网页开发中div布局使用最多，几乎很少使用table进行布局了。
3、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>
扫一扫
817
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
