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>

效果:

级数越大字体越小。

-->

<h1>王宝强</h1>

<h2>王宝强</h2>

<h3>王宝强</h3>

<h4>王宝强</h4>

<h5>王宝强</h5>

<h6>王宝强</h6>

<h7>王宝强</h7>

</body>

</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使用中文提示

-->

<font color="green">王宝强</font>

<font color="#E76910">王宝强</font>

<font color="#E76910" size="7" face="黑体">王宝强</font>

<font color="#E76910" size="1">王宝强</font>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<!--i标签:告诉浏览器把文字倾斜

格式:

<i>我是倾斜</i>

b标签:告诉浏览器把文字加粗

格式:

<b>我是加粗</b>

strong标签:告诉浏览器把文字加粗

格式

<strong>我是加粗</strong>

-->

<strong>王宝强</strong><i>马蓉</i><b>宋jj</b>

<!--加粗带有倾斜-->

<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.&nbsp; 空格:告诉浏览器隔开内容

2.<br/>换行:告诉浏览器该标签右边的内容另起一行,没有留白

3.分段:将文字设置成段落,留白 <p>文字 内容</p>

4.<hr width="设置宽度 百分比/像素px" align="设置对齐方向"/>分割线:告诉浏览器展示一条线

*p标签有留白 br标签没有留白

-->

宋<hr width="50px" align="right"/>jj马蓉&nbsp;&nbsp;&nbsp;&nbsp;王<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标签

* 传智播客 使用b/strong

* 中关村软件园 使用i

* 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设置颜色 -->

<ul>

<li><a href="#"><font face="黑体" color="#39619C">习近平主持深改组第35次会议治国理政砥砺奋进</font></a></li>

<li><a href="#">习近平就曼彻斯特爆炸事件向英国女王致慰问电</a></li>

<li><a href="#"><font face="黑体" color="#39619C">总理力挺“互联网+”:中国数字经济已是全球先驱</font></a></li>

<li><a href="#">张高丽出席第40届南极条约协商会议开幕式并致辞</a></li>

<li><a href="#">张高丽出席第40届南极条约协商会议开幕式并致辞</a></li>

<li><a href="#">张高丽出席第40届南极条约协商会议开幕式并致辞</a></li>

</ul>

</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>&nbsp;&nbsp;&nbsp;<a href="#">注册</a>&nbsp;&nbsp;&nbsp;<a href="#">关于</a></td>

</tr>

</table>

</td>

</tr>

<tr bgcolor="black" height="40px">

<td>

<!--*第二行 背景bgColor为黑的 行 文字为白色-->

&nbsp;&nbsp;&nbsp;<font color="white" size="4">电脑</font>&nbsp;&nbsp;&nbsp;

<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>&nbsp;&nbsp;&nbsp;

<a href="#">友情连接</a>&nbsp;&nbsp;&nbsp;

<a href="#">友情连接</a>&nbsp;&nbsp;&nbsp;

<a href="#">友情连接</a>&nbsp;&nbsp;&nbsp;

<a href="#">友情连接</a>

</p>

<p align="center">Copyright © 2005-2016 传智商城 版权所有</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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券