HTML文档结构

来源:互联网 发布:linux vi编辑器c 编辑:程序博客网 时间:2024/05/17 19:22

<html>  是HTML文件的开头


<head>标记是HTML文件的头标记


<title>标记为标题标记


<body>是HTML页面的主题标记


<br>换行标记


///////////////////////////////////////////////////////////////////////////////////////////////////////



<html>  
  <head>
     <title>应用换行标记实现页面文字换行</title>
  </head>
  <body>
     <b>
       黄鹤楼送孟浩然之广陵
     </b><br>
       故人西辞黄鹤楼,烟花三月下扬州。<br>
       孤帆远影碧空尽,唯见长江天际流
  </body>
</html>








//////////////////////////////////////////////////////////////////////////////////////////////////////////////////


<p>段落标记


<h1>标题标记



<html>
    <head>
  <title>设置标题标记</title>
    </head>
    <body>
<h1>java开发的3个方向</h1>
<h2>Java SE</h2>
<p>主要用于桌面程序的开发。它是学习Java EE和Java ME的基础,也是本书的重点内容。 </p>
<h2>Java EE</h2>
<p>主要用于网页程序的开发。随着互联网的发展,越来越多的企业使用Java语言来开发自 己的官方网站,其中不乏世界500强企业。</p>
<h2>Java ME</h2>
<p>主要用于嵌入式系统程序的开发。</p>
   </body>
</html>








//////////////////////////////////////////////////////////////////////////////////////////////////////////////////



<center>居中标记



<html>
    <head>
  <title>设置标题标记</title>
    </head>
    <body>
<center>
<h1>java开发的3个方向</h1>
<h2>Java SE</h2>
<p>主要用于桌面程序的开发。它是学习Java EE和Java ME 的基础,也是本书的重点内容。</p>
<h2>Java EE</h2>
<center>
<p>主要用于网页程序的开发。随着互联网的发展,越来越 多的企业使用Java语言来开发自己的官方网站,其中不乏世界500强企业。</p>
</center>
<h2>Java ME</h2>
<center>
<p>主要用于嵌入式系统程序的开发。</p>
</center>
   </body>
</html>






//////////////////////////////////////////////////////////////////////////////////////////////////////////////////


<ul>创建一组无序列表



<html>
    <head>
  <title>无序列表标记</title>
    </head>
    <body>
编程词典有以下几个品种
<p>
<ul>
 <li>Java编程词典
 <li>VB编程词典
 <li>VC编程词典
 <li>.net编程词典
 <li>C#编程词典
</ul>
   </body>
</html>






//////////////////////////////////////////////////////////////////////////////////////////////////////////////////


<ol>创建一组有序列表



<html>
    <head>
  <title>有序列表标记</title>
    </head>
    <body>
编程词典有以下几个品种
<p>
<ol>
 <li>Java编程词典
 <li>VB编程词典
 <li>VC编程词典
 <li>.net编程词典
 <li>C#编程词典
</ol>
   </body>
</html>








//////////////////////////////////////////////////////////////////////////////////////////////////////////////////


<table>表格标记


<caption>标题标记


<th>表头标记


<tr>表格行标记


<td>单元格标记





<body>
<table width="318" height="167" border="1" align="center">
  <caption>学生考试成绩单</caption>
  <tr>
    <td align="center" valign="middle">姓名</td>
    <td align="center" valign="middle">语文</td>
    <td align="center" valign="middle">数学</td>
    <td align="center" valign="middle">英语</td>
  </tr>
  <tr>
    <td align="center" valign="middle">张三</td>
    <td align="center" valign="middle">89</td>
    <td align="center" valign="middle">92</td>
    <td align="center" valign="middle">87</td>
  </tr>
  <tr>
    <td align="center" valign="middle">李四</td>
    <td align="center" valign="middle">93</td>
    <td align="center" valign="middle">86</td>
    <td align="center" valign="middle">80</td>
  </tr>
  <tr>
    <td align="center" valign="middle">王五</td>
    <td align="center" valign="middle">85</td>
    <td align="center" valign="middle">86</td>
    <td align="center" valign="middle">90</td>
  </tr>
</table>
</body>









//////////////////////////////////////////////////////////////////////////////////////////////////////////////////





      






<form>表单标记





<html>
<head>
<title>&lt;input&gt;标记的典型应用</title>
</head>
<body><form action="" method="post" name="myform">
<table width="694" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><img src="images/01.gif" width="694" height="168"></td>
  </tr>
</table>
  <table width="694" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td width="103" height="231" valign="top"><img src="images/02.gif" width="35"></td>
      <td width="547" valign="top"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="17%" height="29" align="center">用 户 名:</td>
            <td colspan="2"><input name="username" type="text" id="UserName4" maxlength="20"></td>
          </tr>
          <tr>
            <td height="28" align="center">密&nbsp;&nbsp;&nbsp;&nbsp;码:</td>
            <td height="28" colspan="2"><input name="pwd1" type="password" id="PWD14" size="20" maxlength="20"></td>
          </tr>
          <tr>
            <td height="28" align="center">确认密码:</td>
            <td height="28" colspan="2"><input name="pwd2" type="password" id="PWD25" size="20" maxlength="20"></td>
          </tr>
          <tr>
            <td height="28" align="center">性&nbsp;&nbsp;&nbsp;&nbsp;别:</td>
            <td colspan="2"><input name="sex" type="radio" class="noborder" value="男" checked>
              男&nbsp;
              <input name="sex" type="radio" class="noborder" value="女">
              女</td>
          </tr>
          <tr>
            <td height="28" align="center">爱&nbsp;&nbsp;&nbsp;&nbsp;好:</td>
            <td colspan="2" class="word_grey"><input name="like" type="checkbox" id="like" value="体育">              
            体育
            <input name="like" type="checkbox" id="like" value="旅游">
            旅游
            <input name="like" type="checkbox" id="like" value="听音乐">
            听音乐
            <input name="like" type="checkbox" id="like" value="看书">
            看书</td>
          </tr>


          <tr>
            <td height="28" align="center" style="padding-left:10px">E-mail:</td>
            <td colspan="2" class="word_grey"><input name="email" type="text" id="PWD224" size="50">            </td>
          </tr>
          <tr>
            <td height="34">&nbsp;</td>
            <td width="30%" class="word_grey"><input name="Submit" type="submit" class="btn_grey" value="确定保存">
            <input name="Reset" type="reset" class="btn_grey" id="Reset" value="重新填写"></td>
            <td width="53%" class="word_grey"><input type="image" name="imageField" src="images/btn_bg.jpg"></td>
          </tr>
      </table></td>
      <td width="44" valign="top"><img src="images/04.gif" width="44"></td>
    </tr>
  </table>
</form>
</body>
</html>






//////////////////////////////////////////////////////////////////////////////////////////////////////////////////



超链接与图片标记

<a href = ""></a>
属性href用来设定链接到哪个页面中



图片标记

<img src="uri" width="value" height="value" border=value" alt="提示文字">






<table width="409" height="523" border="1" align="center">
  <tr>
    <td width="199" height="208">
     <img src="images/ASP.NET.jpg" />
    </td>
    <td width="194">
     <img src="images/C#.jpg"/>
    </td>
  </tr>
  <tr>
    <td height="35" align="center" valign="middle"><a href="message.html">查看详情</a></td>
    <td align="center" valign="middle"><a href="message.html">查看详情</a></td>
  </tr>
  <tr>
    <td height="227"><img src="images/Java .jpg"/></td>
    <td><img src="images/VB.jpg"/></td>
  </tr>
  <tr>
    <td height="35" align="center" valign="middle"><a href="message.html">查看详情</a></td>
    <td align="center" valign="middle"><a href="message.html">查看详情</a></td>
  </tr> 
</table>

















<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>


<body>
<p>编程词典系列软件由明日科技公司数十位一线软件编程专家,历经
数年研发的软件产品。
编程词典的特点是容量大、每月都有新的升级内容。编程词典的问世,将改变广大学生的
学习方式。明日科技的每一位员工将竭诚为你服务。</p>
</body>
</html>












//////////////////////////////////////////////////////////////////////////////////////////////////////////////////



<aside>元素定义页面侧栏





<aside>
<nav>
    <h2>侧栏</h2>
        <ul>
           <li>
             <a href="#">明日图书</a> 2011-9-27
           </li>
           <li>
             <a href="#">明日软件</a> 2011-9-27
           </li>
           <li>
              <a href="#">编程词典</a> 2011-9-27
           </li>
        </ul>
    </nav>
</aside>












//////////////////////////////////////////////////////////////////////////////////////////////////////////////////




使用类别选择器控制页面字体的样式



<!--以下为定义的CSS样式-->
<style> 
   .one{             <!--定义类名为one的类别选择器-->
font-family:宋体; <!--设置字体-->
font-size:24px; <!--设置字体大小-->
color:red; <!--设置字体颜色-->
 }
.two{
font-family:宋体;
font-size:16px;
color:red; 
 }
.three{
font-family:宋体;
font-size:12px;
color:red; 
 }
</style>
</head>
<body>
   <h2 class="one"> 应用了选择器one </h2><!--定义样式后页面会自动加载样式-->
   <p> 正文内容1 </p>
    <h2 class="two">应用了选择器two</h2>
   <p>正文内容2 </p>
   <h2 class="three">应用了选择器three </h2>
   <p>正文内容3 </p>
</body>















//////////////////////////////////////////////////////////////////////////////////////////////////////////////////






<title>使用CSS2对页面中的文字添加彩色边框</title>
<style>
#boarder {
margin:3px;
width:180px;
padding-left:14px;
border-width:5px;
  border-color:blue;
border-style:solid;
height:104px;
}
</style>
</head>
<body>
<div id="boarder"> 文字一<br>
  文字二<br>
  文字三<br>
  文字四<br>
  文字五<br>
</div> 
</body>











//////////////////////////////////////////////////////////////////////////////////////////////////////////////////



<style>
#boarder {
border:solid 5px blue;
border-radius:20px;
-moz-border-radius:20px;
padding:20px;
width:180px;
}
</style>
</head>
<body>
<div id="boarder"> 文字一<br>
  文字二<br>
  文字三<br>
  文字四<br>
  文字五<br>
</div>
</body>









//////////////////////////////////////////////////////////////////////////////////////////////////////////////////













<html>
<head>
<title>使用删除线样式标注商品特价</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<img src="bike.jpg" width="200" height="165"><br> 
&nbsp;&nbsp;<span style="text-decoration:line-through">原价:796(元)</span>&nbsp;&nbsp;&nbsp;
<span>现价:399(元)</span>
</body>
</html>








//////////////////////////////////////////////////////////////////////////////////////////////////////////////////





<html>
<head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<table width="98%" height="114" border="0" cellpadding="0" cellspacing="1" bgcolor="#666666">
  <tr>
    <td bgcolor="#FFFFFF" title="单元格1">单元格1</td>
    <td bgcolor="#FFFFFF" title="单元格2">单元格2</td>
    <td bgcolor="#FFFFFF" title="单元格3">单元格3</td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF" title="单元格4">单元格4</td>
    <td bgcolor="#FFFFFF" title="单元格5">单元格5</td>
    <td bgcolor="#FFFFFF" title="单元格6">单元格6</td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF" title="单元格7">单元格7</td>
    <td bgcolor="#FFFFFF" title="单元格8">单元格8</td>
    <td bgcolor="#FFFFFF" title="单元格9">单元格9</td>
  </tr>
</table>
</body>
</html>











//////////////////////////////////////////////////////////////////////////////////////////////////////////////////







1 0
原创粉丝点击