Java 之 HTML

时间:2023-03-08 17:06:03

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.空格:&nbsp;

  c.换行:<br>

  d.加粗:<b></b>

  e.小于:&lt;

  f.大于:&gt;

  g.斜体:<i></i>

  h.©:&copy;

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="data: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>