Java 之 HTML
1.HTML
a.定义:HTML指的是超文本标记语言
b.特点:HTML不是一种编程语言,而是一种标记语言
标记语言是一套标记标签
HTML使用标记标签来描述网页
c.HTML标签:①通常标签是成对出现的,有开始就有结束
<标签名> </标签名>
②有些标签有属性
<标签名 属性名="属性值"> </..>
d.网页的基本格式
<html> <head> <title> </title> </head> <body> </body> </html>
2.重要标签:
a.h1~h6标签(块级标签):
<h1>样式一</h1> <h3>样式三</h3> <h6>样式六</h6>
b.段落标签(不保留段落格式):
<p>段落</p>
c.预格式化标签(保留段落格式):
<pre>预格式化段落</pre>
e.图片标签(行级标签):
<img src="../image/fish.jpg" alt="图片无法显示" title="这是一条鱼" width="50%" height="500px" />
f.meta标签:
写在head中解决乱码问题:
<meta http-equiv="content-type" content="text/html;charset=utf-8">
设置关键词:
<meta name="keywords" content="女装">
设置描述:
<meta name="discription" content="公司名字">
设置自动跳转:
<meta http-equiv="refresh" content="5;url=http://www.baidu.com">
g.link标签:设置标签图案
<link rel="shortcut icon" href="../image/logo.ico">
h.超链接标签:
<a href="http://www.baidu.com" target="_blank">跳转</a>
注:target表示目标地址在哪里被打开。_self在自己窗口中打开:_blank在空白窗口中打开
i.锚点:
①锚点的申明:
<a name="first"> </a>
②锚点的使用:
<a href="#first"> </a>
3.其他标签与符号:
a.注释:<!--这就是注释-->
b.空格:
c.换行:<br>
d.加粗:<b></b>
e.小于:<
f.大于:>
g.斜体:<i></i>
h.©:©
4.列表标签(块级):
a.有序列表:(默认type为数字)
<ol type="A" start="27"> <li>吃饭</li> <li>睡觉</li> <li>打豆豆</li> </ol>
b.无序列表:(默认type为实心圆点)
<ul type="circle"> <li>吃</li> <li>吃</li> <li>吃</li> </ul>
c.定义列表:
<dl> <dt><img src="img/long.jpg"></dt> <dd>龙套装定价:<font size="32" color="red">888</font>元</dd> </dl>
5.表格标签:
a.格式:
<table align="center" border="1" width="50%" rules="row"> <tr> <th>姓名</th> <td align="center">张三</td> <th>性别</th> <td align="center">男</td> </tr> <tr> <th>姓名</th> <td align="center">李四</td> <th>性别</th> <td align="center">男</td> </tr> </table>
b.跨列合并:<td colspan="2">
c.跨行合并:<td rows="2">
d.隐藏标签:
①表头:<thead> </thead>
②表体:<tbody> </tbody>
③表尾:<tfoot> </tfoot>
6.框架标签:
a.<frameset>:(独立于<html>)
<frameset rows="20%,60%,*"> <frame src="top.html"/> <frame src="center.html"/> <frame src="footer.html"/> </frameset>
b.<iframe>:(嵌套于<body>)
<iframe src="http://www.baidu.com" width="80%" height="300"> <iframe>
7.表单:
a.<form>
<form action="success.html" method="post">
输入元素 </form>
注:action表示表单提交的位置,method表示提交方式,有"post"与"get"两种,"get"为默认提交方式,不安全
b.文本框:
<input type="text" value="请输入用户名" readonly="readonly" maxlength="5"/>
注:readonly表示只读
c.密码框:
<input type="password"/>
d.单选框:
<input type="radio" name="gender" checked="checked"/>男 <input type="radio" name="gender"/>女
注:名字相同,默认为一组
e.复选框:
<input type="checkbox"/>
f.下拉列表:
<select> <option>四川</option> <option>云南</option> </select>
g.文件上传:
<input type="file"/>
h.文本域:
<textarea rows="20" cols=40> </textarea>
i.普通按钮:
<input type="button" value="注册"/>
j.重置按钮:
<input type="reset" value="重置"/>
k.提交按钮:
<input type="submit" value="提交"/> <input type="image" src="image/8.jpg"/>
l.隐藏表单:
<input type="hidden" name="hello" value="hello"/>
m.标题框:
<fieldset> <legend>必填信息</legend> <input type="text"/> </fieldset>
n.控制标签:
<label for="username">用户名</label> <input id="username" type="text"/>
8.补充标签:
a.文字标签:<font> </font>
b.滚动条标签:<marquee> </marquee>
<marquee direction="left" onmouseout="this.start()" onmouseover="this.stop()"> <font size="5px" color="red">恭喜“你有一条虫”获得顶级装备</font> </marquee>