day08 Html

<del>我被删除了</del> <!--delete-->
<b>我是粗体</b> <!-- bold -->
<i>我是斜体</i> <!-- italic -->
<font id="fot" size="7" color="#adff2f">王宝强</font>
 
C + O<sub>2</sub> = CO<sub>2</sub> <br/>
X<sup>2</sup>+y = 2XY
 
<pre>
public static void <font color="red">main</font>(String [] args){
System.out.println("&lt;br/&gt; hello");
}
</pre>
 
<!--使用字符实体表示显示在html中的字-->
我爱&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;北京&nbsp;&nbsp;&nbsp;&nbsp;*!
 
 
 
img标签
作用:在页面中显示一张图片
属性:
src 图片的路径
width 图片宽
height 图片高
alt 图片在某些情况下没有显示时,提示文字
titile 鼠标悬停文字
-->
<img src="webp.jpg" width="200px" height="200px" alt="我是隐藏起来的,你看不见我!" title="我是图片的标题"/>
 
音频
<!--<embed src="321.mp3" width="500px" height="400px"></embed>-->
<!--<embed src='http://player.youku.com/player.php/sid/XNDE1MDEzMDQ4OA==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>-->
 
<!--html5之后新引入了两个新的标签 video / audio -->
<video src="123.mp4" controls="controls" autoplay="autoplay" loop="loop"></video>
 
 
 
a 超链接标签
作用:跳转,访问其他资源
属性:
href 资源路径
target 超链接打开的方式
"_self" 表示在当前标签中打开
"_blank" 打开一个新开标签页
"_parent" 在父窗口中打开
"_top" 在最顶层窗口打开
自定义 在指定name出打开该超链接
 
锚点
属性:name 锚点名称,访问时通过“#锚点名”访问
 
发送邮件
<a href="mailto:test@163.com?subject=AboutHTML">发邮件给我</a>
 
-->
<a href="1text.html">1text页面</a>
<a href="http://www.baidu.com" target="_parent">百度</a>
<a href="http://www.baidu.com"> <img src="baidu_jgylogo3.gif"/> </a>
 
 
<h3>红楼梦目录</h3>
<p><a href="hongloumeng.html#one">第一回</a></p>
<p><a href="hongloumeng.html#two">第二回</a></p>
<p><a href="hongloumeng.html#three">第三回</a></p>
<p><a href="hongloumeng.html#four">第四回</a></p>
 
 
<a href="mailto:test@163.com?subject=AboutHTML">发邮件给我</a>
 
 
<!-- 有序列表(ol):order list 无序列表(ul):unorder list 每一项(list item) --> 最喜欢的运动排名 <ol> <li>乒乓球</li> <li>足球</li> <li>篮球</li> </ol> 喜欢的水果 <ul> <li>香蕉</li> <li>苹果</li> <li>椰子</li> </ul>
 
 
 
 
 
<!--
table标签
作用:1.格式化显示数据
2.做页面布局(已过时)
-->
 
<table border="1" style="border-collapse: collapse">
<tr>
<td>1*1</td><td colspan="2">1*2</td>
</tr>
<tr>
<td rowspan="2">2*1</td><td>2*2</td><td>2*3</td>
</tr>
<tr>
<td>3*1</td><td>3*2</td>
</tr>
</table>
 
 
 
 
 
 
 
 
<!-- form 标签
作用:收集并提交用户的信息
属性:
id 表单的id,用于js获取表单
name 表单的名字,用于js获取表单
action 表单提交的地址
method 表单提交的方式,常用值为get和post
get (默认)
post
enctype 表单中数据的编码方式,
application/x-www-form-urlencoded (默认)
multipart/form-data
text/plain
form标签下的子标签(表单域)
注意:1.对于所有的子标签来讲,只有添加name属性,才可以提交!!!
2.一般来讲,value属性就是提交的值
3.对于radio和checkbox而言,如果没有设定value属性,则提交时值为on
4.对于select而言,select提交的值就是option标签的value属性值,如果option标签没有设定value属性值时,默认提交option标签中间的文本值
5.对于textarea而言,textarea提交的值不是value属性,而是标签中间的文本数据
6.对于三个按钮来讲,input和button从本质来讲并无区别,而且一般情况不需要设置name属性(即不用提交)
input
属性
type="text" 文本框
type="password" 密码框
type="hidden" 隐藏框
type="file" 文件框
type="radio" 单选按钮
name属性相同即为一组
type="checkbox" 复选框
name属性相同即为一组
对于input type="radio"和input type="checkbox"来讲,添加checked="checked"属性表示默认选中该选项
 
type="submit" 提交按钮,提交表单
type="reset" 重置按钮,重置表单
type="button" 普通按钮,用于被js调用
 
对于input type="submit"、input type="reset"和input type="button"来讲,value属性表示按钮上的文字
 
select 下拉列表框
给select添加multiple="multiple"的属性后,就变成多选
需要和option标签一起使用
 
textarea 多行文本域
button 按钮
-->
<form action="http://www.baidu.com" method="get" enctype="application/x-www-form-urlencoded">
用户名:<input type="text" name="uname" placeholder="请填写用户名"/><br/>
密码:<input type="password" name="pwd"/><br/>
<input type="hidden" name="hiddentext"/><br/>
<input type="file" name="file"/><br/>
性别:<label for="women">女</label><input id="women" type="radio" name="gender" value="1"/>
<label for="man">男</label><input id="man" type="radio" name="gender" checked="checked" value="2"/><br/>
篮球<input type="checkbox" name="sports" checked="checked" value="1"/>
足球<input type="checkbox" name="sports" checked="checked" value="2"/>
乒乓球<input type="checkbox" name="sports" value="3"/><br/>
<br/>
 
<select name="city" >
<option value="1">广州</option>
<option value="2">东莞</option>
<option >深圳</option>
<option >佛山</option>
</select>
 
<textarea name="inc" cols="30" rows="10">这家伙很懒,什么都没有留下...</textarea>
 
 
<input type="submit" value="aaa"/>
<input type="reset" value="bbb">
<input type="button" value="ccc"/>
 
 
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通</button>
 
 
 
 
 
 
<head lang="en">
<!--<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="5000000;URL=http://www.163.com">
<meta http-equiv="expires" content="0">
<meta name="author" content="zhangsan">
<meta name="description" content="java">
<meta name="keywords" content="JAVA,音乐,生活">
<link rel="stylesheet" type="text/css" href="css/pagination.css" />
<script type="text/javascript" src="js/search.js"></script>
-->
<meta charset="UTF-8">
<title>显示为标题aaa</title>
</head>
<body>
<p>我是一段话</p>
 
<h1>一级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
bbb<h7>7级标题</h7>aaa
 
bbb
<br/> <!-- break row -->
aaa
 
<hr size="9" width="500px" color="red"/>
 
 
上一篇:array_map,array_filter,array_walk区别


下一篇:MongoDB学习之路(三)