java--html(7)头标签及其他标签

本文介绍了HTML的基本结构,包括头部标签的使用方法及其属性详解。同时,还展示了如何运用不同类型的表单元素来实现用户交互,如文本输入、密码框、单选按钮等。

头标签

头标签都放在头部分之间。
包括:title base meta link
< base>
      href 属性:指定网页中所有的超链接的目录。target 属性:指定打开超链接的方式,如_blank 表示所有的超链接都用新窗口打开显示。
< meta>
      name 属性:网页的描述信息。当取keywords时,content属性的内容就作为搜索引擎的关键字进行搜索。
      http-equiv 属性:模拟HTTP协议的响应消息头。
< link>
      rel 属性:描述目标文档与当前文档的关系。type 属性:文档类型。media:指定目标文档在哪种设备上起作用。

其它标签

< marquee>
      direction 属性:left right down up
      behavior 属性:scroll alternate slide
< pre>
      可以将文本内容按在代码区的样子显示在页面上。
几个纯数据封装标签
      div标签   span标签   p标签
标签分为两大类
      块级标签(元素):标签结束后都有换行。 div p dl ol ul table title
      行内标签(元素):标签结束后没有换行。 font span img input select a
lable标签
      给元素定义快捷键
XHTML 与 XML,HTML5
这里写图片描述
table1.css

@CHARSET "UTF-8";
table{
    border-color: #0000ff;
    background-color: #ffff00;
}
div{
    background-color: #79FF79;
}
span {
    background-color: #AAAAFF;
}
p{
    background-color: #A6A6D2;
}

a.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="keywords" content=" hncu"/>
    <!-- name属性:网页的描述信息.当取keywords时,content属性的内容就作为搜索引擎的关键字进行搜索。
         http-equiv属性:模拟HTTP协议的响应消息头. -->
    <!-- 设置页面3s之后自动跳转到新的网页
         <meta http-equiv="refresh" content="3;url='http://www.sina.com'"/>-->
    <title>我的演示--头标签</title>
    <!-- 
        <base href="../"/>把当前目录设置为"../"位置 -->
    <base target="_black"/><!-- 设置所有超链接打开方式 ,,"_black":新开窗口-->

    <link rel="stylesheet" type="text/css" href="table1.css" 
          media="screen,print"/>
    <!--sheet:表单,style:样式表,stylesheet:关系表--当前的文档和css是什么关系  media默认是screen-->

</head>
<body>
      <marquee behavior="scroll" height="200" scrollamount="5">
      <!-- 默认scroll(滚动) alternate:交替,左右荡秋千 slide:只滑一次,,scrollamount:滑动的速度-->
          <img alt="w2-0图片" src="img/0.jpg"/>   
          <img alt="w2-1图片 " src="img/1.jpg"/>  
          <img alt="w2-2图片" src="img/2.jpg"/>   
          <img alt="w2-3图片" src="img/3.jpg"/>   
          <img alt="w2-4图片" src="img/4.jpg"/>   
          <img alt="w2-5图片" src="img/5.jpg"/>   
      </marquee>
      <hr color="red"/>
      <a href="../day3/b.html">查看另一个网页</a>
      <hr color="red"/>
      <form>
         <table cellspacing="3" ><!-- border="1" cellspacing="3" -->
         <tr>
            <th colspan="2" align="center">注册表&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
         </tr>
         <tr>
            <td>姓名:</td> <td><input type="text" name="name" value=""  id="user"/></td><!-- id:唯一标识 -->
         </tr>
         <tr>                  
            <td>密码:</td> <td><input type="password" name="pwd" value=""/></td>
         </tr>
         <tr>
            <td>性别:</td><td><input type="radio" name="sex" checked="checked" value="male"/><input type="radio" name="sex" value="female"/></td>
         </tr>
         <tr>
            <td> 专业:<td><input type="checkbox" name="tech" value="none"/>选择所有
            <input type="checkbox" name="tech" value="java"/>java
            <input type="checkbox" name="tech" value="c/c++"/>c/c++
            <input type="checkbox" name="tech" value="c#"/>c#
            <input type="checkbox" name="tech" value="html"/>html</td>
         </tr>
         <tr>
            <td>语言:</td> <td><select name="lang">
                                  <option>请选择...</option>          
                                  <option value="java" selected="selected">java</option>          
                                  <option value="c/c++">c/c++</option>          
                                  <option value="c#">c#</option>          
                             </select></td>
         </tr>
         <tr>
             <td colspan="2">&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" value="提交"/>&nbsp;&nbsp;&nbsp;<input type="reset" value="重置"/></td>
         </tr>
        </table>
     </form>
        <pre><!-- 内容按原样显示在网页上 -->
        class Hello{
           public static void main(String args[]){
              System.out.println("hello!...");
           }
        }
        </pre>
        <!-- 数据封装标签 div,span,p-->
        1111<div><!-- 行标记:封装体内的内容独自占一行 -->
             为个人热火微软发布<br/>
             SFagkjASGKJASJCJ
        </div>2222<hr/>

        1111<span><!-- 行内标记:封装体内的内容独嵌入在 11112222中,不会独自占一行-->
          为个人热火微软发布<br/>SFagkjASGKJASJCJ  
        </span>2222<hr/>

        1111<p><!-- 封装体内的内容独自占一行,且内容前后会各有有一个空行 -->
          为个人热火微软发布<br/>SFagkjASGKJASJCJ  
        </p>2222
        <br/>
        <!-- lable标签:给元素定义快捷键  -->
        <label for="user" accesskey="u">用户名(u)</label><!-- 点此文字处或者用alt+u键,可以快速定义组件 -->
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
</body>
</html>

这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值