day08 Html

<del>我被删除了</del> <!--delete-->

<b>我是粗体</b> <!-- bold -->

<i>我是斜体</i> <!-- italic -->

<font id="fot" size="7" color="#adff2f">王宝强</font>

 

C + O₂ = CO₂ <br/>

X²+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"/>