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设置颜色 -->
<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> <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>
<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="">
我是div
</div>
<div style="">
我是div
</div>
<span style="">
我是span
</span>
<span style="">
我是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>
javaWeb技术第一篇之HTML的更多相关文章
- android apk 防止反编译技术第一篇-加壳技术
做android framework方面的工作将近三年的时间了,现在公司让做一下android apk安全方面的研究,于是最近就在网上找大量的资料来学习.现在将最近学习成果做一下整理总结.学习的这些成 ...
- javaWeb技术第二篇之CSS、事件和案例
<!--内联式 CSS (层叠样式表) 编辑 层叠样式表(英文全称:Cascading Style Sheets) CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式 ...
- javaweb回顾第一篇servlet的学习和理解
前言:关于servlet相信学过java的都不会陌生,我最近又把这些基础知识整理一遍,便于自已能更好的理解ssm或者ssh,下面开始 1:Servlet接口 servlet有5个方法下面分别简单的介绍 ...
- 开博客这么久以来,第一篇技术文章,python与c的接口对接
在博客园开博客已经有了蛮长时间了,但是从来只是看别人的文章,自己却从未写过一篇技术文章,深表惭愧.内心还是希望能够给大家提供一些帮助的,希望这第一篇技术博客,能够给大家一些帮助.闲话少叙,开始正文. ...
- iOS开发——高级技术精选&底层开发之越狱开发第一篇
底层开发之越狱开发第一篇 做越狱开发也有一些时间了,有很多东西想总结一下,希望给他人一些借鉴,也是自己对过去开发经历的一些总结.个人不推荐使用盗版,这里主要以技术介绍为主. 这个系列里面主要介绍怎样进 ...
- Java Nested Classes(内部类~第一篇英文技术文档翻译)
鄙人最近尝试着翻译了自己的第一篇英文技术文档.Java Nested Classes Reference From Oracle Documentation 目录 嵌套类-Nested Classes ...
- Java图像处理最快技术:ImageJ 学习第一篇
ImageJ是世界上最快的纯Java的图像处理程序. 它能够过滤一个2048x2048的图像在0.1秒内(*). 这是每秒40万像素!ImageJ的扩展通过使用内置的文本编辑器和Java编译器的Ima ...
- 深入理解JavaWeb技术内幕(一)
最近在看许令波的<深入理解JavaWeb技术内幕>.整理了一些笔记.想做一个系列,这篇是系列的第一篇,讲Web请求. B/S架构 最常见的架构方式. 优点: 1.客户端使用统一(此处的统一 ...
- 走进JavaWeb技术世界1:JavaWeb的由来和基础知识
本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutorial 喜欢的话麻烦点下 ...
随机推荐
- c++之基础数据类型
c++规定了在创建一个变量或者常量时,必须先要指定相应的数据类型,否发无法将变量分配给内存. 1.整型 数据类型 占用空间 取值范围 short 2字节 -2^15-2^15-1 int 4字节 -2 ...
- 3种骚操作,教你查看 Java 字节码!
在我们工作.学习.以及研究 JVM 过程当中,不可避免的要查看 Java 字节码,通过查看字节码可以了解一个类的编译结果,也能通过编译器层面来分析一个类的性能. 字节码文件是不能直接打开的,下面栈长教 ...
- C# get md5 from bytes
static byte[] GetBytesFromDic(Dictionary<string,string> dic) { if(dic==null || !dic.Any()) { r ...
- Winform中实现仿XP系统的任务栏菜单效果(附代码下载)
场景 效果 注: 博客主页: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 新建一个Fo ...
- Python—脚本程序生成exe可执行程序(pyinstaller)
一.pyinstaller的简介 Python是一个脚本语言,被解释器解释执行.它的发布方式: .py文件:对于开源项目或者源码没那么重要的,直接提供源码,需要使用者自行安装Python并且安装依赖的 ...
- AbstractMethodError: abstract method "androidx.databinding.ViewDataBinding androidx.databinding.DataBinderMapper.getDataBinder(androidx.databinding.DataBindingComponent, android.view.View, int)"
混淆导致的数据绑定库错误 问题摘要 AbstractMethodError: abstract method "androidx.databinding.ViewDataBinding an ...
- Gitlab + Jenkins 的 CI 实践
0x00 事件 为了开发人员更高效的更新应用而采取的 CI 方式实践. 0x01 过程记录 1.Jenkins 设置 安装插件 Gitlab Hook Plugin Build Authorizati ...
- Linux.centos安装mysql5.7.18
一:删除已有的mysql步骤 1 卸载旧的mysql 1.1 查询有哪些mysql文件 [root@zookeeper init.d]# find / -name mysql /var/lock/su ...
- linux的常用命令(一)
目录切换命令: cd切换目录 cd /usr 切换到usr目录 cd .. 切换到上一层目录 cd ../.. 调到当前目录的上上两层 cd / 切换到系统根目录 cd ~ ...
- Python中的测试工具
当我们在写程序的时候,我们需要通过测试来验证程序是否出错或者存在问题,但是,编写大量的测试来确保程序的每个细节都没问题会显得很繁琐.在Python中,我们可以借助一些标准模块来帮助我们自动完成测试 ...