<!-- 当前是最简的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.&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标签

* 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="">

我是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的更多相关文章

  1. android apk 防止反编译技术第一篇-加壳技术

    做android framework方面的工作将近三年的时间了,现在公司让做一下android apk安全方面的研究,于是最近就在网上找大量的资料来学习.现在将最近学习成果做一下整理总结.学习的这些成 ...

  2. javaWeb技术第二篇之CSS、事件和案例

    <!--内联式 CSS (层叠样式表) 编辑 层叠样式表(英文全称:Cascading Style Sheets) CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式 ...

  3. javaweb回顾第一篇servlet的学习和理解

    前言:关于servlet相信学过java的都不会陌生,我最近又把这些基础知识整理一遍,便于自已能更好的理解ssm或者ssh,下面开始 1:Servlet接口 servlet有5个方法下面分别简单的介绍 ...

  4. 开博客这么久以来,第一篇技术文章,python与c的接口对接

    在博客园开博客已经有了蛮长时间了,但是从来只是看别人的文章,自己却从未写过一篇技术文章,深表惭愧.内心还是希望能够给大家提供一些帮助的,希望这第一篇技术博客,能够给大家一些帮助.闲话少叙,开始正文. ...

  5. iOS开发——高级技术精选&底层开发之越狱开发第一篇

    底层开发之越狱开发第一篇 做越狱开发也有一些时间了,有很多东西想总结一下,希望给他人一些借鉴,也是自己对过去开发经历的一些总结.个人不推荐使用盗版,这里主要以技术介绍为主. 这个系列里面主要介绍怎样进 ...

  6. Java Nested Classes(内部类~第一篇英文技术文档翻译)

    鄙人最近尝试着翻译了自己的第一篇英文技术文档.Java Nested Classes Reference From Oracle Documentation 目录 嵌套类-Nested Classes ...

  7. Java图像处理最快技术:ImageJ 学习第一篇

    ImageJ是世界上最快的纯Java的图像处理程序. 它能够过滤一个2048x2048的图像在0.1秒内(*). 这是每秒40万像素!ImageJ的扩展通过使用内置的文本编辑器和Java编译器的Ima ...

  8. 深入理解JavaWeb技术内幕(一)

    最近在看许令波的<深入理解JavaWeb技术内幕>.整理了一些笔记.想做一个系列,这篇是系列的第一篇,讲Web请求. B/S架构 最常见的架构方式. 优点: 1.客户端使用统一(此处的统一 ...

  9. 走进JavaWeb技术世界1:JavaWeb的由来和基础知识

    本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutorial 喜欢的话麻烦点下 ...

随机推荐

  1. JVM系列二(垃圾收集算法).

    一.标记-清除算法(Mark-Sweep) 这种算法分为"标记"和"清除"两个阶段:首先标记出所有需要回收的对象,在标记完成后统一回收所有被标记的对象. Mar ...

  2. Java工作流引擎表单引擎之JS表单字段输入脚本验证

    关键字: 表单设计器, 字段验证. workflow,ccform, ccBPM. 工作流快速开发平台  工作流流设计  业务流程管理   asp.net 开源工作流bpm工作流系统  java工作流 ...

  3. BIM工程信息管理系统-详细设计

    详细设计说明书 1引言 1.1编写目的 编写详细设计说明书的目的就是为程序员写出实际的程序代码提供依据.它是软件详细设计阶段所有任务和所有相关人员所需的参考资料. 1.2背景 说明: a.  软件名称 ...

  4. Springboot整合redis步骤

    一.加入依赖 <dependency> <groupId>com.github.spt-oss</groupId> <artifactId>spring ...

  5. EVERSPIN非易失性存储器具吸引力嵌入式技术

    相关研究指出,如果以嵌入式MRAM取代微控制器中的eFlash和SRAM,可节省高达90%的功耗:如果采用单一晶体管MRAM取代六个晶体管SRAM,则可实现更高的位元密度和更小的芯片尺寸,这些功率与面 ...

  6. openwrt_在PPPOE上网的同时_访问光猫

    openwrt_在PPPOE上网的同时_访问光猫 转载注明来源: 本文链接 来自osnosn的博客,写于 2019-11-14. 参考文章: 光猫桥接模式下,通过路由器访问光猫.简单设置 设置Open ...

  7. Vue 04

    目录 创建Vue项目 Vue项目环境搭建 Vue项目创建 pycharm配置并启动vue项目 vue项目目录结构分析 项目生命周期 添加组件-路由映射关系 文件式组件结构 配置全局css样式 子组件的 ...

  8. 原创 Hive count 多个度量指标,带有 distinct

    Hive  count 多个度量指标,带有  distinct ,注意点!!! 比如  select  organid, ppi, count(id1) as num1, count(distinct ...

  9. Jenkins使用SSH构建Go项目并执行

    目录 下载插件 配置要部署的服务器 构建项目 Jenkinx可以帮助我们通过SSH插件,将项目直接部署到指定的服务器. 下载插件 (1)点击左侧的"系统管理"菜单 ,然后点击 (2 ...

  10. 团队项目之Scrum4

    小组:BLACK PANDA 时间:2019.11.24 每天举行站立式会议 提供当天站立式会议照片一张 2 昨天已完成的工作 2 基本实现web富文本编辑功能 后台的编辑接口已经基本完成,还有一些b ...