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><input>标记的典型应用</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">密 码:</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">性 别:</td>
<td colspan="2"><input name="sex" type="radio" class="noborder" value="男" checked>
男
<input name="sex" type="radio" class="noborder" value="女">
女</td>
</tr>
<tr>
<td height="28" align="center">爱 好:</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"> </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>
<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>
<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>
<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>
<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>
<span style="text-decoration:line-through">原价:796(元)</span>
<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>
- HTML文档结构
- html文档结构
- HTML文档结构
- HTML文档结构、注释
- html文档结构
- HTML文档结构
- HTML的文档结构
- HTML 文档结构
- 1、html文档结构
- 1.1HTML文档的结构
- (X)HTML的文档结构
- 【HTML】文档整体结构【UNDONE】
- 02.HTML的文档结构
- HTML基础-HTML文档基本结构
- 第一章 HTML标记与文档结构(HTML文档剖析)
- .mypage打破传统html文档结构
- html+css 基础学习文档结构
- HTML的文档结构与基本语法
- sqoop数据导入的常见问题及小结
- Gartner:2017年十大科技趋势盘点
- 在uboot的控制台中利用tftp将镜像从虚拟机中下载到开发板
- 3DMAX
- 谢谢初学编程时受过的嘲讽,让我成长的那么迅速。
- HTML文档结构
- RPM方式安装MySQL5.6
- 投影矩阵的推导(Deriving Projection Matrices)
- 克隆二叉树
- [2017.4.23]IMWEB前端小白训练营日记(九)
- 求助NGRAIN 5.1版本 免费版(激活版本)
- Oracle学习之BULK COLLECT用法
- 2016年十大商业领袖:敢于冒险,善于坚持,勇于自省
- Passing 1d arrays as data is deprecated