JavaWeb-- HTML &&css
一：简介：
1.HTML：
HTML:超文本标记语言；
#超文本:超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
#标记语言：由标签构成的语言
-- HTML标签都是（预定义）好的，使用时直接使用即可。 eg：使用<a>:展示超链接， 使用<img>展示图片，使用<video>展示 视频。
-- HTML代码直接在浏览器中运行，HTML标签之间由浏览器解析。（即浏览器自己分析）；
主要研究HTML的标签
2.css：
层叠样式表；----》用于控制页面的样式（表现）
主要学习css定义的常用样式！！！
二：HTTL快速入门
1.需求：开发一个HTML的网页程序，在网页当作展示出 HTML文本且文本为加大加粗，以及一张图片；
2.分析：
1.新建文本文件，后缀名为 " .html "; -----》（.html的文件默认是被浏览器识别的）
2 .编写HTML结构标签
3.在<body>中编写内容（需求）
<html>
<head> -- 子标签1：head头：放标题
<title>HTML快速入门</title> -->:通过title可以指定html文件的标题
</head>
<body> --子标签2：body体：放内容
<h1>Hello HTML</h1> -->:h1:一级标题
<img src="hmbb.jpg"> </img> -- >:img:图片
</body>
</html>
注意：a：HTML标签不区分大小写，一般使用小写
b：HTML的属性值可以使用双引号也可以使用单引号
c：HTML语法结构松散，但最好严谨写完整；
三：案例：
练习新浪新闻也页面实现：焦点访谈：中国底气 新思想夯实大国粮仓_新浪新闻 (sina.com.cn)
分析：
逐步完成
1.新浪新闻--标题
#标题排版
#标题样式
#超链接
2.新浪新闻-正文
1.新浪新闻---标题排版
<!DOCTYPE html> <!-- 文档的类型为HTML -->
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- 字符集为 UTF-8-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>焦点访谈：中国底气 新思想夯实大国粮仓</title> <!-- title：标题排版部分1.当前页面的标题部分，最终会在浏览器最上面展示出来-->
</head>
<img>
<img src="./img/news_logo.png" > 新浪政务>正文 </img>
<!-- 标题排版部分2：图片img属性: src路径 --> <!-- width和height：一般只设置其中一个，另一个会自动等比例缩放 -->
<!-- width="80%":代表占父元素：body！！的80% --> <!-- width="300px"代表像素是300px -->
<!-- 因为第一行除了图片还有文字，所以直接在后面加上即可！！！ -->
<h1> <!-- 3.使用h1：代表一级标题（最大的加大加粗） -->
焦点访谈：中国底气 新思想夯实大国粮仓
</h1>
<hr> <!-- 4.标题下面有两条空白分割线：2个标签hr -->
2023年03月02日 21:50 央视网 <!-- 5.两条分割线中间有文字 -->
<hr>
</body>
</html>
2.新浪新闻---标题样式01
<!DOCTYPE html> <!-- 标题样式设置 1：将标题字体颜色改为灰黑色 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
<!-- 方式二：内嵌样式：写在head中 ；声明一个标签style，在style标签中指定css样式； 针对整个页面都有效，只要是当前页面的h1标签都会显示为red-->
<style>
h1{ /* 选择器：h1 */
/*color: rgb(255, 50, 50);*/
color:#4D4F53;
}
</style>
<!-- 方式3外联样式：将css代码定义在外部的css文件中； 通过标签link来引入css文件； 哪个页面需要css文件中的样式直接使用link引入即可-->
<!-- <link rel="stylesheet" href="./css/news.css"> --> <!-- herf:指定路径（我们使用相对路径） -->
</head>
<img>
<img src="./img/news_logo.png" > 新浪政务>正文 </img>
<!-- 方式1 ：行内样式(不推荐：因为仅仅针对这一个h1标签有效果)-->
<!-- <h1 style="color: red;"> 焦点访谈：中国底气 新思想夯实大国粮仓</h1> -->
<h1 > 焦点访谈：中国底气 新思想夯实大国粮仓</h1>
<hr>
2023年03月02日 21:50 央视网
<hr>
</body>
</html>
<!--
颜色表示形式：
表示方式 表示含义 取值
关键字 预定义的颜色名 red、green、blue...
rgb表示法 红绿蓝三原色，每项取值范围：0-255 rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)
十六进制表示法 #开头，将数字转换成十六进制表示 #000000、#ff0000、#cccccc，简写：#000、#ccc
-->
2.新浪新闻---标题样式01
<!DOCTYPE html> <!-- 标题样式设置2：将发表日期颜色改为灰黑色 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
<style>
h1{
color:#4D4F53; /* 将标题颜色换成灰黑色 */
}
/* 2.使用内嵌样式:元素选择器 设置时间颜色*/
/* span{
color: #4D4F53; /* 现在：这一行所有都变成灰黑色了，但我们只想让时间变为灰黑色--->:使用css选择器：用于选取需要设置样式的元素（标签）
} */
/* 3类选择器 */
/* .cls{
color: dimgrey; /* 发现只有时间变成了灰色，成功
}
*/
/* 演示：id选择器 */
#time{
color: dimgray;
font-size: 13px;
}
</style>
</head>
<img>
<img src="./img/news_logo.png" > 新浪政务>正文 </img>
<h1 > 焦点访谈：中国底气 新思想夯实大国粮仓</h1>
<hr>
<span class="cls" id="time">2023年03月02日 21:50 </span> <span>央视网</span>
<!-- 1.<span>标签：没有语义 -->
<!-- 如果·使用类选择器 -->
<hr>
</body>
</html>
<!--
小结
1. span标签：是没有任何语义布局标签！！！
特点：一行可以有多个span标签
2.css选择器：用于选取需要设置样式的元素（标签） */
#1。元素（标签）选择器 ：
h1{
color： red；
}
#2。id选择器
需要为标签指定属性：id（不可重复），并指定id值
#id值（eg：time）{
color：red；
}
#3.类选择器
在标签中指定属性：类，并指定属性（类）值；
.class属性值（eg:.cls）{
color :red;
}
！！！ 注意：如果三个css选择器并存：优先级：id选择器>类选择器>元素（标签）选择器
3. 用到的css中的属性：color颜色
fount-size：字体大小（px）
-->
3.新浪新闻---标题--超链接
<!DOCTYPE html> <!-- 标题样式：超链接：为新浪政务和央视网加上超链接 ---》》：使用HTML -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
<style>
h1{
color:#4D4F53; /* 将标题颜色换成灰黑色 */
}
#time{
color: dimgray;
font-size: 12px;
}
a{
color: black; /* css修改超链接样式1：改为黑色字体 */
text-decoration: none;/* css修改超链接样式2：去除下划线（使用text-decoration样式） */
}
</style>
</head>
<img>
<img src="./img/news_logo.png" > <a href="https://news.sina.com.cn/gov/xlxw/2023-03-03/doc-imyipzuy7321600.shtml" target="_self" >新浪政务</a> >正文 </img>
<!-- 超链接1：新浪政务; a:使用<a>标签将新浪政务包裹起来； b：href：是跳转的网站； c：target：选择是在当前网页打开，还是新建网页打开 -->
<h1 > 焦点访谈：中国底气 新思想夯实大国粮仓</h1>
<hr>
<span class="cls" id="time">2023年03月02日 21:50 </span> <span><a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a></span>
<!-- 超链接2：央视网； ..........-->
<hr>
</body>
</html>
<!--
1.超链接--》HTML： 使用a标签：1.谁需要超链接就把它放入a标签之间;
2属性.href:是跳转的网站
3.属性target：是选择是在当前窗口打开（_self）（默认是_self），还是新建窗口打开（_blank）
2.改变两个超链接的字体 + 消除他们的下划线；---》使用css设置超链接的样式：通过选择器！！！！
在body中的style中：要修改哪个就写上他所在的标签
eg：
标签{
css属性
}
3.使用到的css属性：
text-decoration：规定添加到文本的修饰，none表示定义标准的文本
color：定义文本的颜色
4.：（个人理解）！！！！！！！！！t
HTML：负责添加内容，元素
css：负责修改样式等
-->
4.新浪新闻--正文--排版
<!DOCTYPE html> <!-- 标题样式：超链接：为新浪政务和央视网加上超链接 ---》》：使用HTML -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
<style>
h1{
color:#4D4F53; /* 将标题颜色换成灰黑色 */
}
#time{
color: dimgray;
font-size: 12px;
}
a{
color: black; /* css修改超链接样式1：改为黑色字体 */
text-decoration: none;/* css修改超链接样式2：去除下划线（使用text-decoration样式） */
}
p{
text-indent: 35px ; /* c：使用css样式：使用选择器：给段落加上首行缩进 */
line-height: 40px; /* css:设置行高 */
}
#plast{
text-align: right;/* 最后一段右对齐！！！ */
}
</style>
</head>
<img>
<img src="./img/news_logo.png" > <a href="https://news.sina.com.cn/gov/xlxw/2023-03-03/doc-imyipzuy7321600.shtml" target="_self">新浪政务</a> >正文 </img>
<!-- 超链接1：新浪政务; a:使用<a>标签将新浪政务包裹起来； b：href：是跳转的网站； c：target：选择是在当前网页打开，还是新建网页打开 -->
<h1 > 焦点访谈：中国底气 新思想夯实大国粮仓</h1>
<hr>
<span class="cls" id="time">2023年03月02日 21:50 </span> <span><a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a></span>
<!-- 超链接2：央视网； ..........-->
<hr>
<!-- 正文部分 -->
<video src="./video/QQ视频20240203195419.mp4" controls="controls" width="550px" height="550px"> </video> <!-- 正文部分1：视频 -->
<!-- HTML定义视频--》将 ：视频放入<video>标签内部 b：属性src：写入视频相对路径 属性controls：指定播放器； 属性width，height指定视频长度宽度！！！ -->
<audio src="./audio/20240203_202408.m4a" controls="controls"> </audio> <!-- 正文部分2：音频 -->
<!-- HTML定义音频 --》将 a：音频放入<audio>标签内部 b：属性;src:写入音频相对路径 属性controls指定播放器 -->
<!-- 正文部分3：文字（两段） a：文字之间是分段落的：使用HTML标签包裹文字：<p>； b：两段之间有换行：使用HTML标签<br>；：-->
<!-- c：所有段落首行缩进：----》css样式， 即使用（！！选择器）给所有的段落标签加上首行缩进样式：text-indent属性！！！！ -->
<!-- d：加粗展示：使用<b>标签包裹要加粗的部分 -->
<p><b>央视网消息</b>（焦点访谈）：党的十八大以来，以习近平同志为核心的党中央始终把解决粮食安全问题作为治国理政的头等大事，重农抓粮一系列政策举措有力有效，
我国粮食产量站稳1.3万亿斤台阶，实现谷物基本自给、口粮绝对安全。我们把饭碗牢牢端在自己手中，
为保障经济社会发展提供了坚实支撑，为应对各种风险挑战赢得了主动。连续八年1.3万亿斤，这个沉甸甸的数据是如何取得的呢？
</p> <!-- p：分段 -->
<br> <!-- br:分行 -->
<p>人勤春来早，春耕农事忙。立春之后，由南到北，我国春耕春管工作陆续展开，春天的田野处处生机盎然。</p>
<!-- 正文部分4：图片--HTML -->
<img src="./img/QQ图片20240203205457.jpg" width="500px">
<!-- 正文部分5：文字： 1段；+首行缩进； -->
<p>今年，我国启动了新一轮千亿斤粮食产能提升行动，这是一个新的起点。2015年以来，
我国粮食产量连续8年稳定在1.3万亿斤以上，人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。
从十年前的约12200亿斤到2022年的约13700亿斤，粮食产量提高了1500亿斤。
</p>
<!-- 正文部分6：图片：HTML -->
<img src="./img/29ec-6593cb9d9763862c6fe7948ec8f16c5e.jpg">
<!-- 正文部分7：文字：两段+首行缩进+中间空一行 -->
<p>
国务院发展研究中心农村经济研究部部长叶兴庆：“我们研究粮食安全的人有一个概念，1000亿斤是一个台阶，
这就是说我们用十年时间使粮食产量上了一个半台阶。这是在化肥和农药开始减量的情况下取得的，
是在极端天气事件多发、频发的情况下取得的，是在从事农业生产的人口减少的条件下取得的，这在中国粮食生产发展历史中是一个了不起的成就。”
</p>
<p>
国家仓廪充实，为经济社会行稳致远夯实了根基。14亿人口要吃饭，这是中国最大的国情。党的十八大以来，
习近平总书记四次出席中央农村工作会议并发表重要讲话，对“三农”工作和粮食生产、粮食安全作出一系列重要指示。
2013年12月召开的中央农村工作会议上，习近平总书记把“确保我国粮食安全”放在首位。
</p>
<!-- 之后都是一张图片，一段文字：所以这里我们省略。。。。。。。。。。。。。。。。。 -->
<!-- 正文最后： "责任编辑"--》且为靠右对齐！！！！！------》使用css样式 -->
<!-- a:因为只有最后一个段落是靠右对齐：所以我们不能再使用元素选择器。可以使用id选择器！！！ b:右对齐： text-align: right; -->
<p id="plast">
责任编辑：坤坤 2.50
</p>
</body>
</html>
<!--
总结：完结撒花：
1.HTML：标签
a：音频：<video>(src,controls,width,height); 视频:<audio>(src,controls)
b:换行:<br>; 定义段落：<p>(包裹分段的文字)
c：文本加粗标签：<b>/<strong>
d:span:没有语义
2.css样式：------》：写在选择器中（元素选择器，id选择器，css选择器）！！！！！！！，修改哪些内容：就在head中style中使用： 标签{}；！！！！
line-height：设置行高
text-indent：定义第一个行内容缩进
text-align：规定元素中的文本的水平对齐方式（eg：right）
color
text-decoration: none;/* css修改超链接样式2：去除下划线（使用text-decoration样式）
font-size：字体大小（px）
3.注意：在HTML中无论使用多少个空格，只会显示1个。 如果生成多个则可以使用  ，生成几个空格就写几个  
在HTML中无论空几行，都会显示1行。--》因此使用<br>标签；
4.如同所示在原文章中：视频、图片、文字是在页面最中心部分展示的，且左右两侧还有边距-----》” 版心居中“
而我们的不符合
|
盒子模型：
盒子：页面中所有的元素（标签），都可以看做是一个 盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）
5.使用布局标签：实际开发网页中会大量频繁使用div和span这两个没有语义的布局标签；
布局标签：<div> <span>
特点：
（1）div:
一行只显示一个（独占一行）
宽度默认是父元素的宽度，高度默认由内容撑开
可以设置宽高（width、height）
(2) span标签：
一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高（width、height）
-->
5.新浪新闻--正文--布局（完结）
<!DOCTYPE html> <!-- 标题样式：超链接：为新浪政务和央视网加上超链接 ---》》：使用HTML -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
<style>
h1{
color:#4D4F53; /* 将标题颜色换成灰黑色 */
}
#time{
color: dimgray;
font-size: 12px;
}
a{
color: black; /* css修改超链接样式1：改为黑色字体 */
text-decoration: none;/* css修改超链接样式2：去除下划线（使用text-decoration样式） */
}
p{
text-indent: 35px ; /* c：使用css样式：使用选择器：给段落加上首行缩进 */
line-height: 40px; /* css:设置行高 */
}
#plast{
text-align: right;/* 最后一段右对齐！！！ */
}
/* div:B使用css指定div */
#center{
width: 65%; /* 因为内容包裹在div中，而我们指定了div为65%占body，所以右侧部分就变成空白了； */
margin: 0 auto; /*指定外边距方法1：0：代表上下都是0，auto：代表让浏览器自己计算 */
/* 指定外边距方法2（繁琐）：margin: 0% 17.5% 0% 17.5%; /* 外边距可以指定4个值：上 右 下 左 */
/* div：C：页面居中展示：--》给盒子设置外边距margin ； 分析：因为原文中上下没有边距是紧贴的所以上下边距为0%，剩下35%，左右各是17.5%*/
}
</style>
</head>
<img>
<div id="center"> <!-- div:A.div:默认是父元素宽度：即默认是整个body的宽度，此时我们只需要占用body的一部分（eg:60%）,所以需要指定！！ -->
<!-- 标题部分 -->
<img src="./img/news_logo.png" > <a href="https://news.sina.com.cn/gov/xlxw/2023-03-03/doc-imyipzuy7321600.shtml" target="_self">新浪政务</a> >正文 </img>
<!-- 超链接1：新浪政务; a:使用<a>标签将新浪政务包裹起来； b：href：是跳转的网站； c：target：选择是在当前网页打开，还是新建网页打开 -->
<h1 > 焦点访谈：中国底气 新思想夯实大国粮仓</h1>
<hr>
<span class="cls" id="time">2023年03月02日 21:50 </span> <span><a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a></span>
<!-- 超链接2：央视网； ..........-->
<hr>
<!-- 正文部分 -->
<video src="./video/QQ视频20240203195419.mp4" controls="controls" width="550px" height="550px"> </video> <!-- 正文部分1：视频 -->
<!-- HTML定义视频--》将 ：视频放入<video>标签内部 b：属性src：写入视频相对路径 属性controls：指定播放器； 属性width，height指定视频长度宽度！！！ -->
<audio src="./audio/20240203_202408.m4a" controls="controls"> </audio> <!-- 正文部分2：音频 -->
<!-- HTML定义音频 --》将 a：音频放入<audio>标签内部 b：属性;src:写入音频相对路径 属性controls指定播放器 -->
<!-- 正文部分3：文字（两段） a：文字之间是分段落的：使用HTML标签包裹文字：<p>； b：两段之间有换行：使用HTML标签<br>；：-->
<!-- c：所有段落首行缩进：----》css样式， 即使用（！！选择器）给所有的段落标签加上首行缩进样式：text-indent属性！！！！ -->
<!-- d：加粗展示：使用<b>标签包裹要加粗的部分 -->
<p><b>央视网消息</b>（焦点访谈）：党的十八大以来，以习近平同志为核心的党中央始终把解决粮食安全问题作为治国理政的头等大事，重农抓粮一系列政策举措有力有效，
我国粮食产量站稳1.3万亿斤台阶，实现谷物基本自给、口粮绝对安全。我们把饭碗牢牢端在自己手中，
为保障经济社会发展提供了坚实支撑，为应对各种风险挑战赢得了主动。连续八年1.3万亿斤，这个沉甸甸的数据是如何取得的呢？
</p> <!-- p：分段 -->
<br> <!-- br:分行 -->
<p>人勤春来早，春耕农事忙。立春之后，由南到北，我国春耕春管工作陆续展开，春天的田野处处生机盎然。</p>
<!-- 正文部分4：图片--HTML -->
<img src="./img/QQ图片20240203205457.jpg" width="500px">
<!-- 正文部分5：文字： 1段；+首行缩进； -->
<p>今年，我国启动了新一轮千亿斤粮食产能提升行动，这是一个新的起点。2015年以来，
我国粮食产量连续8年稳定在1.3万亿斤以上，人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。
从十年前的约12200亿斤到2022年的约13700亿斤，粮食产量提高了1500亿斤。
</p>
<!-- 正文部分6：图片：HTML -->
<img src="./img/29ec-6593cb9d9763862c6fe7948ec8f16c5e.jpg">
<!-- 正文部分7：文字：两段+首行缩进+中间空一行 -->
<p>
国务院发展研究中心农村经济研究部部长叶兴庆：“我们研究粮食安全的人有一个概念，1000亿斤是一个台阶，
这就是说我们用十年时间使粮食产量上了一个半台阶。这是在化肥和农药开始减量的情况下取得的，
是在极端天气事件多发、频发的情况下取得的，是在从事农业生产的人口减少的条件下取得的，这在中国粮食生产发展历史中是一个了不起的成就。”
</p>
<p>
国家仓廪充实，为经济社会行稳致远夯实了根基。14亿人口要吃饭，这是中国最大的国情。党的十八大以来，
习近平总书记四次出席中央农村工作会议并发表重要讲话，对“三农”工作和粮食生产、粮食安全作出一系列重要指示。
2013年12月召开的中央农村工作会议上，习近平总书记把“确保我国粮食安全”放在首位。
</p>
<!-- 之后都是一张图片，一段文字：所以这里我们省略。。。。。。。。。。。。。。。。。 -->
<!-- 正文最后： "责任编辑"--》且为靠右对齐！！！！！------》使用css样式 -->
<!-- a:因为只有最后一个段落是靠右对齐：所以我们不能再使用元素选择器。可以使用id选择器！！！ b:右对齐： text-align: right; -->
<p id="plast">
责任编辑：坤坤 2.50
</p>
</div>
</body>
</html>
css盒子模型：
组成： 内容（content），内边距，边框，外边距；
css属性：
width：设置高度
height：设置宽度
border：设置边框的属性，如：1px sold #000；
padding：内边距；
margin：外边距
注意：如果只需要某一个方位的边框、内边距、外边距，可以 在属性后加上 ‘-位置’ ；如：padding-left、padding-right
四：HTML表格标签
1.HTML表格标签简介
一：HTML表格标签:
1.场景：在网页中以表格（行，列）形式整齐展示数据，如：班级表。
2.标签：
标签 描述 属性/备注
<table> 定义表格整体，可以包裹多个<tr> border:规定表格边框的宽度（默认没有); width:规定表格宽度； cellspacing：规定单元之间的空间；
<tr> 表格的行，可以包裹多个<td>
<td> 表格单元格（普通），可以包裹内容 如果是表头单元格，可替换为<th>
<table>:用来定义标签
<tr>：定义表格中的行，一个<tr>代表一行
<th>：表示表头单元格，具有加粗居中效果
<td>：表示普通单元格（
2.案例演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>HTML-表格</title>
<style>
td {
text-align: center; /* 单元格内容居中展示 */
}
</style>
</head>
<body>
<table border="1px" cellspacing="0" width="600px"> <!-- 表格整体部分 width：设置表格宽度； border：指定边框：1表示1个像素；cellspacing：0表示单元格之间空白为0-->
<tr> <!-- 1行 -->
<th>序号</th>
<th>品牌Logo</th> <!-- 表头单元格：使用th（具有加粗并居中展示效果：h即head） -->
<th>品牌名称</th>
<th>企业名称</th>
</tr>
<tr> <!-- 2行 -->
<td>1</td>
<td> <img src="img/huawei.jpg" width="100px"> </td> <!-- 通过img标签引入图片 -->
<td>华为</td>
<td>华为技术有限公司</td>
</tr>
<tr> <!-- 3行 -->
<td>2</td>
<td> <img src="img/alibaba.jpg" width="100px"> </td>
<td>阿里</td>
<td>阿里巴巴集团控股有限公司</td>
</tr>
</table>
</body>
</html>
五：HTML表单标签
1.HTML表单标签简介：
标签： <form>（定义整个表单）
属性：
action:表单提交的url，即往何处提交数据，url(默认是提交到当前页面)
method：规定发送表单数据的方式。 GET,POST
get（默认）：在url后面拼接表单数据，比如：?username=sjh&age=18，参数大小有限制（因为url长度有限；）
post：表单数据在消息体或请求体中传递的，参数大小无限制；
注意：表单项必须有name属性才可以提交
-->
<!--
表单项：
表单项：不同类型的input元素、下拉列表、文本域等
1.<input>:定义表单项，通过type属性控制输入形式；
2.<select>:定义下拉列表，使用属性option定义列表项
3.<textarea>:定义文本域
-->
2.案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML-表单</title>
</head>
<body>
<form action="" method="post"> <!-- 定义表单 -->
用户名:<input type="text" name="username">
年龄:<input type="text" name="age">
<input type="submit" value="提交">
</form>
</body>
</html>
