javaWeb技术第一篇之HTML
时间：2023-08-29 03:30:01 | 来源：网站运营
时间：2023-08-29 03:30:01 来源：网站运营
javaWeb技术第一篇之HTML：<!-- 当前是最简的html -->
<html>
<!-- 告诉浏览器当前是一个html文档
最外面的标签。 -->
<head>
<!--head头标签:用来设置网页的参数 -->
<!--title告诉浏览器展示网页标题-->
<title>百度百科</title>
<!--meta标签:用来设置网页编码
charset="utf-8":utf-8 防止中文乱码 -->
<meta charset="utf-8"/>
</head>
<body>
<!-- body主体标签:用来显示网页内容-->
Hello world! 我爱你中国
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
h1~6 是告诉浏览器展示标题。
格式
<h1>标题</h1>
效果:
级数越大字体越小。
-->
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--font字体标签:告诉浏览器按照指定的颜色 大小 字体效果展示文字
格式:
<font color="设置颜色" size="设置大小" face="设置字体">
文字
</font>
* color可以使用单词来设置颜色，也可以使用16进制来设置颜色，项目中一般使用取色器
* size取值 1~7
* face使用中文提示
-->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--i标签：告诉浏览器把文字倾斜
格式:
<i>我是倾斜</i>
b标签:告诉浏览器把文字加粗
格式:
<b>我是加粗</b>
strong标签:告诉浏览器把文字加粗
格式
<strong>我是加粗</strong>
-->
<!--加粗带有倾斜-->
<i><b>我是加粗加倾斜</b></i>
<i><strong>我是加粗加倾斜</strong></i>
<strong><i>我是加粗加倾斜</i></strong>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
排版:设置文字的排列顺序
意义：提高阅读体验
1. 空格:告诉浏览器隔开内容
2.<br/>换行:告诉浏览器该标签右边的内容另起一行，没有留白
3.分段:将文字设置成段落,留白 <p>文字 内容</p>
4.<hr width="设置宽度 百分比/像素px" align="设置对齐方向"/>分割线：告诉浏览器展示一条线
*p标签有留白 br标签没有留白
-->
宋<hr width="50px" align="right"/>jj马蓉 王<br/>宝强
<p>故事1</p>
<p>故事2</p>
<p>故事3</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1)联想
2)列点
*公司简介 使用h1标签
* 分割线使用hr标签
* “训练营” 使用font标签
* CSDN 使用i+b或者 i+strong
* 使用p标签 创建四个段落
3)编码-->
<!--*公司简介 使用h1标签-->
<h1>公司简介</h1>
<!--* 分割线使用hr标签-->
<hr/>
<!--* “训练营” 使用font标签-->
<!--* 使用b/strong-->
<!--* 使用i-->
<!--* CSDN 使用i+b或者 i+strong-->
<p>
<font color="red">“训练营”</font>是由<b></b>联合<i>中关村软件园</i>、<i><b>CSDN</b></i>
</p>
<!--* 使用p标签 创建四个段落-->
<p>
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--img标签：告诉浏览器展示一个图片文件
<img src="设置好路径" width="设置宽度" height="设置高度" alt="设置图片找不到的提示文字 "/>
*相对路径:项目内部使用相对路径。 ./当前目录
*绝对路径:
http://...
* D:/用户目录/我的文档/HBuilderProjects/dayHtmlCode/img/zhaoliyin.jpg
-->
<img src="./img/zhaoliyin.jpg" width="100px" height="200px"/><br/>
<img src="http://localhost:8080/tomcat.png" /></br/>
<img src="./img/zhaoliyin.jpg" width="100px" height="200px" alt="这是一张黄图"/><br/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--a标签：告诉浏览器当用户点击文字 时，打开隐藏的资源(图片 网页)
<a href="设置资源路径">文字</a>
-->
<a href="./img/huangtu.jpg">这是一张黄图</a><br/>
<a href="./index.html">这是一张黄页</a><br/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--一条记录一行地展示就叫列表
<ul type="设置符号 实习圆disc 空心圆circle 方块square"> 无序表:顺序对记录的价值没有影响 unorder list
<li>记录1</li> list item
<li>记录2</li> list item
</ul>
<ol type="设置符号 有顺序 ">有序表:顺序对记录的价值有极大影响 order list
<li>记录1</li> list item
<li>记录2</li> list item
</ol>
* 1代表自然数
* a小写字母
* A大写字母
* i 罗马字母
* I 大写逻辑字母
-->
你喜欢的四大名著有哪些？
<ul type="disc">
<li>金pin梅</li>
<li>哈利波特</li>
<li>指环王</li>
<li>诛仙</li>
</ul>
你喜欢的几个老师?
<ol type="I">
<li>泷老师</li>
<li>大桥老师</li>
<li>苍老师</li>
<li>波老师</li>
<li>泷老师</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--*使用ul表示一个列表
*使用li表示一条记录
*使用a表示一个超链接
*使用font设置颜色 -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
列表：一列多行
表格:多列多行
表格看成列表的扩展
table标签:告诉浏览器展示一个表格
<table order="1px 设置边框" width="50% 设置宽度"></table>
tr标签:告诉浏览器展示一个表格行
tr必须包含在table内
td标签:告诉浏览器展示一个单元素
td必须包含在tr内
th与td都是单元格,前者对内容进行居中加粗
数据必须被td包含
理解:table就是一个死脑筋。认为数据必须被td包含，其它情况显示在列表。
-->
<table border="1px" width="50%">
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
</table>
<table border="1px" width="100%">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
扩展:合并单元格
*span范围
rowspan
colspan
<table border="1px" width="100%">
<tr>
<!--*1.删除合并单元格
*2.创建新单元格
*3.设置colspan跨列合并1+n
bgcolor="设置背景颜色"
-->
<td colspan="2" bgcolor="gray" align="right"><b>1 2</b></td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
跨行合并:合并的单元格涉及多个行，相邻
<table border="1px" width="100%">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<!--
*删除需要合并的单元格
*新建新的单元格
*设置rowspan=1+n-->
<td rowspan="2" bgcolor="gray">1 1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
</tr>
</table>
<!--商城的热门商品结构-->
<table border="1px" width="100%">
<tr>
<td colspan="7" bgcolor="gray">热门商品</td>
</tr>
<tr>
<td rowspan="2" bgcolor="yellow">大图</td>
<td colspan="3" bgcolor="blue">大图</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1）联想
2）列点
*使用表格table展示6行
*第一行 两个img 三个 a标签
*第二行 背景bgColor为黑的 行 文字为白色
*第三个 大的img
*第四个 热门商品 跨行跨列
*第五个 img
*第六个 5个a标签 p完成分段居中
3) 编码
-->
<!--*使用表格table展示6行-->
<table border="1px" width="100%">
<tr>
<td>
<!--*第一行 两个img 三个 a标签-->
<table width="100%">
<tr>
<td><img src="img/logo2.png"/></td>
<td><img src="img/header.jpg"/></td>
<td><a href="#">登录</a> <a href="#">注册</a> <a href="#">关于</a></td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="black" height="40px">
<td>
<!--*第二行 背景bgColor为黑的 行 文字为白色-->
<font color="white" size="4">电脑</font>
<font color="white" size="4">手机</font>
</td>
</tr>
<tr>
<td>
<!--*第三个 大的img-->
<img src="img/1.jpg" width="100%"/>
</td>
</tr>
<tr>
<td>
<!--*第四个 热门商品 跨行跨列
td内部是可以再包含表格的。
但是写的时候要小心
-->
<table width="100%" border="0px">
<tr>
<td colspan="7">
<h3>热门商品 <img src="img/title2.jpg" /></h3>
</td>
</tr>
<tr height="240px">
<td rowspan="2">
<img src="img/big01.jpg" />
</td>
<td colspan="3">
<img src="img/middle01.jpg" width="100%" height="96%"/>
</td>
<td width="14.2%">
<p align="center"><img src="img/small08.jpg"/></p>
<p align="center">妹子</p>
<p align="center"><font color="red">$200</font></p>
</td>
<td width="14.2%">
<p align="center"><img src="img/small08.jpg"/></p>
<p align="center">妹子</p>
<p align="center"><font color="red">$200</font></p>
</td>
<td width="14.2%">
<p align="center"><img src="img/small08.jpg"/></p>
<p align="center">妹子</p>
<p align="center"><font color="red">$200</font></p>
</td>
</tr>
<tr height="240px">
<td width="14.2%">
<p align="center"><img src="img/small08.jpg"/></p>
<p align="center">妹子</p>
<p align="center"><font color="red">$200</font></p>
</td>
<td width="14.2%">
<p align="center"><img src="img/small08.jpg"/></p>
<p align="center">妹子</p>
<p align="center"><font color="red">$200</font></p>
</td>
<td width="14.2%">
<p align="center"><img src="img/small08.jpg"/></p>
<p align="center">妹子</p>
<p align="center"><font color="red">$200</font></p>
</td>
<td width="14.2%">
<p align="center"><img src="img/small08.jpg"/></p>
<p align="center">妹子</p>
<p align="center"><font color="red">$200</font></p>
</td>
<td width="14.2%">
<p align="center"><img src="img/small08.jpg"/></p>
<p align="center">妹子</p>
<p align="center"><font color="red">$200</font></p>
</td>
<td width="14.2%">
<p align="center"><img src="img/small08.jpg"/></p>
<p align="center">妹子</p>
<p align="center"><font color="red">$200</font></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!--*第五个 img-->
<img src="img/ad.jpg" width="100%"/>
</td>
</tr>
<tr>
<td>
<!--*第六个 5个a标签 p完成分段居中-->
<p align="center">
<a href="#">友情连接</a>
<a href="#">友情连接</a>
<a href="#">友情连接</a>
<a href="#">友情连接</a>
<a href="#">友情连接</a>
</p>
</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--frame是代表浏览器界面的一个小窗口
可以加载html页面
格式
<frame src="设置html页面路径"/>
frameset是小窗口的集合
*可以包含多个小窗口
*但是不能跟body一块使用，要不就失效
* 可以在frameset里面使用cols属性:依次设置小窗口的宽度。值使用,隔开 cols="30%,30%,40%"
* 最后一个值也可使用*代替
* 使用rows属性:依次设置小窗口的高度。值使用,隔开 rows="30%,30%,40%"
-->
<!--<frameset cols="30%,30%,*">
<frame src="001.最简html.html"/>
<frame src="002.文字元素-标题.html"/>
<frame src="003.文字元素-字体.html"/>
</frameset>-->
<frameset rows="20%,60%,*">
<frame src="001.最简html.html"/>
<frame src="002.文字元素-标题.html"/>
<frame src="003.文字元素-字体.html"/>
</frameset>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="20%,*,20%">
<frame src="html/head.html" />
<!--<frame src="html/rygl.html" />-->
<frameset cols="20%,*">
<frame src="html/left.html"/>
<!--这里不设置展示页面，页面内容由链接给定
name相当于给frame设置了一个id
-->
<frame name="detail"/>
</frameset>
<frame src="html/foot.html" />
</frameset>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
表单是什么？
一个网页的单子。
表单作用？
收集不同用户的输入数据
应用场景:注册/登录，银行-表单。
格式:
<form>
输入元素
</form>
告诉浏览器当前需要显示一个表单。
*表单是一个集合.
* 内部可以添加输入元素
输入元素:
*input 输入标签
* select 下拉列表标签
* textarea文本域
* button(了解)
-->
<form>
账号:<input />
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
输入元素:所有输入元素必须被包含在form标签内
*input 输入标签
*属性type：设置输入元素的外观
*属性value：提交给服务器的数据/设置按钮的显示文字
* text:设置文本框 默认
* password：提高安全性，密码显示
* radio:单选效果,一组选项选一个
* checkbox:复选效果,一组里面选多个
* submit提交数据到服务器
* 属性name:可以给单选/复选 分组。
* 属性checked:选中 标准 ：checked="checked" 变态:checked或者checked="" 加上这个表示直接选中一个选项,一进入页面性别男就被选中
* select 下拉列表标签
* textarea文本域
* button(了解)
-->
<form>
账号:<input type="text"/>
<br/>密码:<input type="password" />
<br/>确认密码:<input type="password" />
<br />性别<input type="radio" name="sex" checked="checked" value="0"/>男<input type="radio" name="sex" value="1"/>女
<br />追女孩不正确办法：<input type="checkbox" name="method" checked="checked" value="0"/>送礼物
<input type="checkbox" name="method" checked="checked" value="1"/>太关心
<input type="checkbox" name="method" checked="checked" value="2"/>call/sms
<br /> <input type="submit" value="注册" />
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
输入元素:所有输入元素必须被包含在form标签内
*input 输入标签
*属性type：设置输入元素的外观
*属性value：提交给服务器的数据/设置按钮的显示文字
* text:设置文本框 默认
* password：提高安全性，密码显示
* radio:单选效果,一组选项选一个
* checkbox:复选效果,一组里面选多个
* submit提交数据到服务器
* 了解:
* file:选择文件
* date:日期
* button:显示一个按钮
* image:显示一个图片按钮 可以使用src设置图片文件
* reset:重置.
* hidden:隐藏,一般是后续程序使用，隐藏是不想让用户去编辑
* 属性name:可以给单选/复选 分组/只要提交给服务端的数据都必须加上name作变量名
* 属性checked:选中 标准 ：checked="checked" 变态:checked或者checked=""
* 属性readonly="readonly" 取消编辑功能
* 属性disabled="disabled" 取消编码功能，显示灰色
*
* size="60":设置显示宽度
* maxlength:设置最大输入字符
* select 下拉列表标签
* textarea文本域
* button(了解)
-->
<form>
<input type="hidden" name="id" value="123" />
<br/>账号:<input type="text" name="username"size="60" maxlength="30"/>
<br/>密码:<input type="password" name="pwd"/>
<br/>确认密码:<input type="password" value="123" disabled="disabled" name="pwd2"/>
<br />性别<input type="radio" name="sex" checked="checked" value="0"/>男<input type="radio" name="sex" value="1"/>女
<br />追女孩不正确办法：<input type="checkbox" name="method" checked="checked" value="0"/>送礼物
<input type="checkbox" name="method" checked="checked" value="1"/>太关心
<input type="checkbox" name="method" checked="checked" value="2"/>call/sms
<br /> <input type="file" name="head" />
<br />生日:<input type="date" name="birthday" value="2014-01-02" readonly="readonly"/>
<br /><input type="button" value="我是按钮" /> <input type="image" src="img/015.jpg" width="60" height="30" />
<br /> <input type="submit" value="注册" /> <input type="reset" value="我是重置" />
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
输入元素:所有输入元素必须被包含在form标签内
*input 输入标签
*属性type：设置输入元素的外观
*属性value：提交给服务器的数据/设置按钮的显示文字
* text:设置文本框 默认
* password：提高安全性，密码显示
* radio:单选效果,一组选项选一个
* checkbox:复选效果,一组里面选多个
* submit提交数据到服务器
*
* 了解:
* file:选择文件
* date:日期
* button:显示一个按钮
* image:显示一个图片按钮 可以使用src设置图片文件
* reset:重置.
* hidden:隐藏,一般是后续程序使用，隐藏是不想让用户去编辑
* 属性name:可以给单选/复选 分组/只要提交给服务端的数据都必须加上name作变量名
* 属性checked:选中 标准 ：checked="checked" 变态:checked或者checked=""
* 属性readonly="readonly" 取消编辑功能
* 属性disabled="disabled" 取消编码功能，显示灰色
* size="60":设置显示宽度
* maxlength:设置最大输入字符
* select 下拉列表标签
* textarea文本域
* button(了解)
*
*
* 表单属性
* action:设置提交给服务端的地址。当前使用#
* method:设置提交方法
* 1)get，默认值.
* 特点:提交参数会显示在地址栏上面
* ?id=123&username=122&pwd=222&sex=0&method=0&method=1&method=2&head=&birthday=2014-01-02#
* 使用&连接多个参数
* 第一个参数前加?
* 每个参数都有k=v
* 有数据限制.
* 2)post
* 提交的数据不显示地址栏,安全性高
* 提交文件。
* 如果项目中提交文件,不允许显示参数在地址栏上，一般使用post
-->
<form action="#" method="post">
<input type="hidden" name="id" value="123" />
<br/>账号:<input type="text" name="username"size="60" maxlength="30"/>
<br/>密码:<input type="password" name="pwd"/>
<br/>确认密码:<input type="password" value="123" disabled="disabled" name="pwd2"/>
<br />性别<input type="radio" name="sex" checked="checked" value="0"/>男<input type="radio" name="sex" value="1"/>女
<br />追女孩不正确办法：
<input type="checkbox" name="method" checked="checked" value="0"/>送礼物
<input type="checkbox" name="method" checked="checked" value="1"/>太关心
<input type="checkbox" name="method" checked="checked" value="2"/>call/sms
<br /> <input type="file" name="head" />
<br />生日:<input type="date" name="birthday" value="2014-01-02" readonly="readonly"/>
<br /><input type="button" value="我是按钮" /> <input type="image" src="img/015.jpg" width="60" height="30" />
<br /> <input type="submit" value="注册" /> <input type="reset" value="我是重置" />
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
textarea标签：告诉浏览器显示一个多行的输入框
格式:
<textarea rows="设置高度" cols="设置宽度">
内容
</textarea>
下拉列表:select标签告诉浏览器显示一个下拉列表
作用:单选或者多选(类似ul/ol)
格式:
<select >
<option>记录1</option>
<option>记录2</option>
<option>记录3</option>
</select>
属性:multiple 设置多选multiple="multiple"
size:设置显示项数
应用场景:省 市 学历
-->
<form action="#" method="post">
今晚想翻谁?
<br />
<select name="onenight" multiple="multiple" size="9" >
<option value="0" >班长</option>
<option value="1">詹老师</option>
<option value="2">王老师</option>
<option value="3">波老师</option>
</select>
<br />
<textarea name="desc" rows="20" cols="60">我是小海贼</textarea>
<br />
<input type="submit" value="发表" />
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
联想
列点
*表单:集合
*表单元素
*使用table标签
*text
*password
*date
*radio
*image
*submit
* placeholder占位符
编码
-->
<!-- *表单:集合-->
<form action="#" method="post">
<!--*表单元素-->
<!--*使用table标签-->
<table width="50%" border="0px">
<tr>
<td align="right">
<font color="blue">会员注册</font>
</td>
<td align="left" colspan="2">USER REGISTER</td>
</tr>
<!--*text-->
<tr>
<td align="right"><b>用户名</b></font>
</td>
<td align="left" colspan="2"><input type="text" name="username" size="50" placeholder="用户名"/></td>
</tr>
<!--*password-->
<tr>
<td align="right"><b>密码</b></font>
</td>
<td align="left" colspan="2"><input type="password" name="password" size="50" /></td>
</tr>
<tr>
<td align="right"><b>确认密码</b></font>
</td>
<td align="left" colspan="2"><input type="password" name="password2" size="50" /></td>
</tr>
<tr>
<td align="right"><b>Email</b></font>
</td>
<td align="left" colspan="2"><input type="text" name="email" size="50" /></td>
</tr>
<tr>
<td align="right"><b>姓名</b></font>
</td>
<td align="left" colspan="2"><input type="text" name="uname" size="50" /></td>
</tr>
<!--*radio-->
<tr>
<td align="right"><b>性别</b></font>
</td>
<td align="left" colspan="2"><input type="radio" name="sex" checked="checked" />男<input type="radio" name="sex" />女</td>
</tr>
<!--*date-->
<tr>
<td align="right"><b>出生日期</b></font>
</td>
<td align="left" colspan="2"><input type="date" name="birthday" /></td>
</tr>
<!--*image-->
<tr>
<td align="right"><b>验证码</b></font>
</td>
<td align="left" width="33%"><input type="text" name="code" width="100" /></td>
<td align="left" width="33%"><input type="image" src="img/015.jpg" width="60" height="40" /></td>
</tr>
<!--*submit-->
<tr>
<td colspan="3" align="center">
<input type="submit" value="注册" width="200px" />
</td>
</tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
div:块级元素,设置区域
独占一行
格式
<div>
元素
</div>
span:内联元素/行内元素,设置区域
不独占一行
格式
<span>
元素
</span>
应用场景 ：特别多，几乎每个页面都要大量使用
-->
<div style="background-color: green;">
我是div
</div>
<div style="background-color: blue;">
我是div
</div>
<span style="background-color: green;">
我是span
</span>
<span style="background-color: blue;">
我是span
</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/out.css"/>
</head>
<body>
在线咨询
