HTML基础练习
2016-04-05 21:40
567 查看
<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中的内容。
4000
<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中的内容。
4000
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery1——基础（$对象，选择器，对象转换）
- Android学习笔记（二九）：嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 5个常见可用性错误和解决方案
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 最后一次说说闭包
- Ajax
- js数组实现图片轮播
- HTML5调用摄像头实例
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制：7 行代码学会 co 模块
- ES6 走马观花（ECMAScript2015 新特性）