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.空格:&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="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>

 

posted @ 2017-01-15 18:53  晨M风  阅读(217)  评论(0编辑  收藏  举报