HTML基础练习
来源：互联网 发布：eve知乎 编辑：程序博客网 时间：2024/06/06 20:52
<html>
<head>
<title>gxy</title>
</head>
<body>
<br/>1、html文件放在本地没有用，我们都是远程访问的。使用tomcat实现
<br/>2、安装tomcat，配置JDK环境变量的路径，用户变量下添加JAVA_HOME:D:\Program Files\Java\jdk1.7.0_71
<br/>3、将Hello.html放在D:\SoftWare\apache-tomcat-6.0.45\webapps下面
<br/>4、启动tomcat,在bin下打开startup.bat
<br/>5、在浏览器中打开http://localhost:8080/ 看看tomcat启动成功没有
<br/>6、浏览器中打开http://localhost:8080/Hello.html，这时发现找不到文件
<br/>7、将Hello.html放在D:\SoftWare\apache-tomcat-6.0.45\webapps\gxy路径下，再打开浏览器就可以看到Hello.html中的信息了
<br/>
<br/>可以通过屏幕取色，得到浏览器上颜色是多少，下载工具FastStone Capture，最右面拾色
<!--
html的基本结构：元素就是标记
<元素 属性='属性值' ...>内容</元素>
如果没有内容，可以这样写：
<元素 属性='属性值' .../>
-->
<br/>******字体*******<br/>
<b>加粗</b>
<p>段落标记</br>
<font size="1">字体标记，字体取值1-7</br></font>
<font size=7>标题</font><br/>
<h1>标题字体,1-7</br></h1>
<h7>标题字体,1-7</br></h7>
face设置客户端字体<br/>
<font face='华文新魏' style="font-size=150px">设置更大字体使用css的style</font><br/>
<b><u><i>标题</i></u></b>
</p>
******字符实体案例******</br>
<!-- 就是空格-->
<h1>© £ ® < > "= 空格 </h1>
******超链接******</br>
<br/>target = "_black" 新页面，"_self" 本页面打开，替换当前页面<br/>
<a href='a.html' target = "_black">老鼠爱大米</a></br>
<a href='http://sohu.com' target="_self">搜狐网</a></br>
<a href="mailto:xiangyun.guo@pactera.com">给管理员写信</a>
<br/>******图片元素******<br/>
设置了宽就不需要设置高了，HTML不会更改图片本身的比例。border表示边框,alt当找不到图片的时候，显示文字描述，当鼠标指向图片的时候也显示名称
<img src='E:\photo\宝贝儿\psb3.jpg' width=500px height=700px border=5 alt="宝贝儿"></img><br/>
<br/>还可以引用别的网站上的图片：<br/>
<img src='https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png' alt="百度地图"></img><br/>
<br/>******表格******<br/>
表格的格子变宽可以用border，但是里面的线也变宽就要结合CSS来实现了。
cellspacing 空隙大写(将两个列和两个行距离15px)，cellpading 填充大小(各行各列的内容被填充，比如在数字周围撑大15个PX)
colspan 列合并，rowspan 行合并
<th>...</th> 定义表头单元格。表格中的文字将以粗体显示（<TH>与<TD>同样是标示一个储存格,唯一不同的是<TH>所标示的储存格中的文字是以粗体出现.
<table border=5 width ="500px" height="500px" align=center bgcolor=yellow cellspacing=15 cellpadding=15 bordercolor=red background="E:\JS\tuoxie2.png">
<tr ><th valign="bottom">1</th><th valign="top">2</th><th>3</th></tr>
<tr align=center><td rowspan=3>1</td><td colspan=2>23</td></tr>
<tr align=center><td>2</td><td>3</td></tr>
<tr align=center><td>2</td><td><img src='E:\photo\宝贝儿\psb3.jpg' width=50></td></tr>
</table>
<br/>******无序列表******<br/>
无序列表 ul-li square空心正方形、disc实心圆点、circle空心圆
<ul type="square">
<li>爸爸</li>
<li>妈妈</li>
</ul>
<br/>******有序列表*****<br/>
type 默认是1,2,3，可以是A，B,C，start表示从第几个开始,当我type不是数字类型的话，那么start并不生效。
<ol type="A" start="D">
<li>1</li>
<li>2</li>
<li>1</li>
<li>2</li>
</ol>
<br/>*****框架标记*****<br/>
noresize表示边框不让动
一个网页被分割成好几个页面。cols各窗格百分比逗号隔开，rows各窗格百分百，这个frameset要单独写一个页面，并且页面中不能有body，这个框架里就只是嵌入页面而已
<frameset frameborder=5 cols="50%,50%" rows="20%,80%" >
<frame name="HelloWorld" src='E:\JS\HelloWorld.html' noresize/>
<frame name="class" src='E:\JS\class.html' noresize/>
</frameset>
<br/>*****框架实例*****<br/>
<br/>*****top.html*****<br/>
<body>
<img src='E:\photo\宝贝儿\psb3.jpg' width=50/>
</body>
<br/>******left.html****** 点击相应的链接，右面的框跳转到相应的歌词
<br/>这里target对应的是框架中右面frame的name，两个链接的目标都对应上frame的name，那么久可以替换了，
<br/>因为我们target中一般写的内容为_black即打开一个新页面，_self表示替换当前的窗口，如果写frame的name，那么就是替换frame中的内容。
<a href="right1.html" target="right">甜蜜蜜</a></br>
<a href="right2.html" target="right">鲁冰花</a></br>
<br/>*****right1.html*****<br/>
<body>
甜蜜蜜，你笑的甜蜜蜜
</body>
<br/>*****right2.html*****<br/>
<body>
天上的星星不说话，地上的娃娃想妈妈。
</body>
<br/>*****Frameset.html****<br/>
<frameset rows="50%,*">
<frame src='top.html'/>
<frameset cols="20%,80%">
<frame src="left.html"/>
<frame name="right" src="right1.html"/>
</frameset>
</frameset>
<br/>*****html的表单元素******<br/>
<br/>主要让用户输入数据，并提交给服务器
<!--
<form action="url" method="提交的方法{get/post}，默认是get">
各种元素【输入框，下拉列表，文本框，密码框...】
</form>
密 码 可以用全角空格来代替
使用get方式登录后，展示的页面路径为：file:///E:/JS/top.html?username=user&pwd=passs
使用post方式登录后，展示的页面路径为：file:///E:/JS/top.html
即post方法可以隐藏传入的参数
-->
<h1>登录系统</h1>
<form action="E:\JS\top.html" method="post">
用户名：<input type="text" name="username"/><br/>
密 码：<input type="password" name="pwd"/><br/>
<input type="submit" value="登录"/><input type="reset" value="重置">
</form>
<br/>*****喜欢的水果，这里的name要一样，要不然怎么定位到我喜欢的水果<br/>
<input type="checkbox" name="V1" checked >西瓜<br/>
<input type="checkbox" name="V1">苹果<br/>
***选择性别***<br/>
<input type="radio" name="sex">男<br/>
<input type="radio" name="sex">女<br/>
****隐藏****<br/>
<input type="hidden" value="123" name="sal"><br/>
****下拉选择***单选<br/>
<select name="biradd">
<option value="">---请选择---</option>
<option value="place">北京</option>
<option value="place">太原</option>
</select>
****下拉选择***多选<br/>
<select size=1 multiple>
<option value="s">aaa</option>
<option value="s" selected>bbb</option>
<option value="s">ccc</option>
</select>
</br>****文本域*请留言****<br/>
<textarea cols="30" rows="5">请这里输入...</textarea>
<br/>****请选择要上传的文件*****<br/>
<input type="file" name="myfile"/>请选择文件
<br/>****html加强*****新建html文件meta.html<br/>
西欧：iso-8859-1；中文：GBK，什么都不指定，那么html对本地操作系统判断是什么编码<br/>
在body中可以设置链接的格式<br/>
在不同的浏览器上可能看到的格式完全不一样，这个时候我们最好都设置topmargin=0px<br/>
<!--
<html>
<head>
<title>Hello</title>
<meta http-equiv="Content-Type" content="text/html"; charset=GBK>
</head>
<body link=red text=blue topmargin=0px>
你好！
<a href='#'>sohu</a>
</body>
</html>
-->
******划一根线<br/>
<hr color="red"/>
*****文字的分区<div>******
<div style="border:1px solid red; absolute; left:100px; top:100px;">
你好，宝贝儿，鼠标移动到图片上，显示内容为“宝贝儿”，图片可以做超链接
<img src="E:\photo\宝贝儿\psb3.jpg" width=200 alt="宝贝儿"/>
</div>
<br/>******移动*****<br/>
<marquee>我会移动</marquee>
<hr color="red" border=2/>
<br/>****多媒体文件****<br/>
<!-- <embed src='E:\photo\20110224026.mp4'> -->
</body>
</html>
<head>
<title>gxy</title>
</head>
<body>
<br/>1、html文件放在本地没有用，我们都是远程访问的。使用tomcat实现
<br/>2、安装tomcat，配置JDK环境变量的路径，用户变量下添加JAVA_HOME:D:\Program Files\Java\jdk1.7.0_71
<br/>3、将Hello.html放在D:\SoftWare\apache-tomcat-6.0.45\webapps下面
<br/>4、启动tomcat,在bin下打开startup.bat
<br/>5、在浏览器中打开http://localhost:8080/ 看看tomcat启动成功没有
<br/>6、浏览器中打开http://localhost:8080/Hello.html，这时发现找不到文件
<br/>7、将Hello.html放在D:\SoftWare\apache-tomcat-6.0.45\webapps\gxy路径下，再打开浏览器就可以看到Hello.html中的信息了
<br/>
<br/>可以通过屏幕取色，得到浏览器上颜色是多少，下载工具FastStone Capture，最右面拾色
<!--
html的基本结构：元素就是标记
<元素 属性='属性值' ...>内容</元素>
如果没有内容，可以这样写：
<元素 属性='属性值' .../>
-->
<br/>******字体*******<br/>
<b>加粗</b>
<p>段落标记</br>
<font size="1">字体标记，字体取值1-7</br></font>
<font size=7>标题</font><br/>
<h1>标题字体,1-7</br></h1>
<h7>标题字体,1-7</br></h7>
face设置客户端字体<br/>
<font face='华文新魏' style="font-size=150px">设置更大字体使用css的style</font><br/>
<b><u><i>标题</i></u></b>
</p>
******字符实体案例******</br>
<!-- 就是空格-->
<h1>© £ ® < > "= 空格 </h1>
******超链接******</br>
<br/>target = "_black" 新页面，"_self" 本页面打开，替换当前页面<br/>
<a href='a.html' target = "_black">老鼠爱大米</a></br>
<a href='http://sohu.com' target="_self">搜狐网</a></br>
<a href="mailto:xiangyun.guo@pactera.com">给管理员写信</a>
<br/>******图片元素******<br/>
设置了宽就不需要设置高了，HTML不会更改图片本身的比例。border表示边框,alt当找不到图片的时候，显示文字描述，当鼠标指向图片的时候也显示名称
<img src='E:\photo\宝贝儿\psb3.jpg' width=500px height=700px border=5 alt="宝贝儿"></img><br/>
<br/>还可以引用别的网站上的图片：<br/>
<img src='https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png' alt="百度地图"></img><br/>
<br/>******表格******<br/>
表格的格子变宽可以用border，但是里面的线也变宽就要结合CSS来实现了。
cellspacing 空隙大写(将两个列和两个行距离15px)，cellpading 填充大小(各行各列的内容被填充，比如在数字周围撑大15个PX)
colspan 列合并，rowspan 行合并
<th>...</th> 定义表头单元格。表格中的文字将以粗体显示（<TH>与<TD>同样是标示一个储存格,唯一不同的是<TH>所标示的储存格中的文字是以粗体出现.
<table border=5 width ="500px" height="500px" align=center bgcolor=yellow cellspacing=15 cellpadding=15 bordercolor=red background="E:\JS\tuoxie2.png">
<tr ><th valign="bottom">1</th><th valign="top">2</th><th>3</th></tr>
<tr align=center><td rowspan=3>1</td><td colspan=2>23</td></tr>
<tr align=center><td>2</td><td>3</td></tr>
<tr align=center><td>2</td><td><img src='E:\photo\宝贝儿\psb3.jpg' width=50></td></tr>
</table>
<br/>******无序列表******<br/>
无序列表 ul-li square空心正方形、disc实心圆点、circle空心圆
<ul type="square">
<li>爸爸</li>
<li>妈妈</li>
</ul>
<br/>******有序列表*****<br/>
type 默认是1,2,3，可以是A，B,C，start表示从第几个开始,当我type不是数字类型的话，那么start并不生效。
<ol type="A" start="D">
<li>1</li>
<li>2</li>
<li>1</li>
<li>2</li>
</ol>
<br/>*****框架标记*****<br/>
noresize表示边框不让动
一个网页被分割成好几个页面。cols各窗格百分比逗号隔开，rows各窗格百分百，这个frameset要单独写一个页面，并且页面中不能有body，这个框架里就只是嵌入页面而已
<frameset frameborder=5 cols="50%,50%" rows="20%,80%" >
<frame name="HelloWorld" src='E:\JS\HelloWorld.html' noresize/>
<frame name="class" src='E:\JS\class.html' noresize/>
</frameset>
<br/>*****框架实例*****<br/>
<br/>*****top.html*****<br/>
<body>
<img src='E:\photo\宝贝儿\psb3.jpg' width=50/>
</body>
<br/>******left.html****** 点击相应的链接，右面的框跳转到相应的歌词
<br/>这里target对应的是框架中右面frame的name，两个链接的目标都对应上frame的name，那么久可以替换了，
<br/>因为我们target中一般写的内容为_black即打开一个新页面，_self表示替换当前的窗口，如果写frame的name，那么就是替换frame中的内容。
<a href="right1.html" target="right">甜蜜蜜</a></br>
<a href="right2.html" target="right">鲁冰花</a></br>
<br/>*****right1.html*****<br/>
<body>
甜蜜蜜，你笑的甜蜜蜜
</body>
<br/>*****right2.html*****<br/>
<body>
天上的星星不说话，地上的娃娃想妈妈。
</body>
<br/>*****Frameset.html****<br/>
<frameset rows="50%,*">
<frame src='top.html'/>
<frameset cols="20%,80%">
<frame src="left.html"/>
<frame name="right" src="right1.html"/>
</frameset>
</frameset>
<br/>*****html的表单元素******<br/>
<br/>主要让用户输入数据，并提交给服务器
<!--
<form action="url" method="提交的方法{get/post}，默认是get">
各种元素【输入框，下拉列表，文本框，密码框...】
</form>
密 码 可以用全角空格来代替
使用get方式登录后，展示的页面路径为：file:///E:/JS/top.html?username=user&pwd=passs
使用post方式登录后，展示的页面路径为：file:///E:/JS/top.html
即post方法可以隐藏传入的参数
-->
<h1>登录系统</h1>
<form action="E:\JS\top.html" method="post">
用户名：<input type="text" name="username"/><br/>
密 码：<input type="password" name="pwd"/><br/>
<input type="submit" value="登录"/><input type="reset" value="重置">
</form>
<br/>*****喜欢的水果，这里的name要一样，要不然怎么定位到我喜欢的水果<br/>
<input type="checkbox" name="V1" checked >西瓜<br/>
<input type="checkbox" name="V1">苹果<br/>
***选择性别***<br/>
<input type="radio" name="sex">男<br/>
<input type="radio" name="sex">女<br/>
****隐藏****<br/>
<input type="hidden" value="123" name="sal"><br/>
****下拉选择***单选<br/>
<select name="biradd">
<option value="">---请选择---</option>
<option value="place">北京</option>
<option value="place">太原</option>
</select>
****下拉选择***多选<br/>
<select size=1 multiple>
<option value="s">aaa</option>
<option value="s" selected>bbb</option>
<option value="s">ccc</option>
</select>
</br>****文本域*请留言****<br/>
<textarea cols="30" rows="5">请这里输入...</textarea>
<br/>****请选择要上传的文件*****<br/>
<input type="file" name="myfile"/>请选择文件
<br/>****html加强*****新建html文件meta.html<br/>
西欧：iso-8859-1；中文：GBK，什么都不指定，那么html对本地操作系统判断是什么编码<br/>
在body中可以设置链接的格式<br/>
在不同的浏览器上可能看到的格式完全不一样，这个时候我们最好都设置topmargin=0px<br/>
<!--
<html>
<head>
<title>Hello</title>
<meta http-equiv="Content-Type" content="text/html"; charset=GBK>
</head>
<body link=red text=blue topmargin=0px>
你好！
<a href='#'>sohu</a>
</body>
</html>
-->
******划一根线<br/>
<hr color="red"/>
*****文字的分区<div>******
<div style="border:1px solid red; absolute; left:100px; top:100px;">
你好，宝贝儿，鼠标移动到图片上，显示内容为“宝贝儿”，图片可以做超链接
<img src="E:\photo\宝贝儿\psb3.jpg" width=200 alt="宝贝儿"/>
</div>
<br/>******移动*****<br/>
<marquee>我会移动</marquee>
<hr color="red" border=2/>
<br/>****多媒体文件****<br/>
<!-- <embed src='E:\photo\20110224026.mp4'> -->
</body>
</html>
0 0
- HTML基础练习1
- 基础HTML练习
- HTML基础练习
- HTML-CSS基础练习
- 【HTML 基础练习】
- HTML-1-基础练习
- HTML基础5--浮动练习
- HTML练习---第三章表单基础
- HTML巩固练习之CSS基础
- HTML巩固练习之CSS选择器基础
- 零基础HTML及CSS编码练习（一）
- Html练习
- HTML练习
- html练习
- Html 练习
- HTML练习
- html练习
- html练习
- SpringMVC
- 利用爬虫获取豆瓣上可能喜欢的书籍
- TCP协议详解
- 2016年3月23日日本本州岛之旅
- #1039 : 字符消除
- HTML基础练习
- JDK7浅解
- java swing 之 JScrollPane（滚动面板）的使用
- hdu5294（最短路+最大流）
- java实现数据压缩的哈夫曼（Huffman）算法
- android日常 游戏：跳舞男孩
- POJ 1930 Dead Fraction（循环小数转换成分数）
- HDU 4349(Lucas 变形)
- 折半查找的实现
