HTML(Hyper Text Markup Language,超文本标记语言)

<html> ------开始标签

<head>----网页上的控制信息

<title>页面标题</title>

</head>

<body>

页面上显示的内容

</body>

</html>------结束标签

body的属性

bgcolor--------------页面背景色

text-------------------文字颜色

topmargin-----------上页边距

bottomargin--------下页边距

leftmargin-----------左页边距

rightmargin---------右页边距

background---------背景壁纸

格式控制标签

<font color=""#000033"" face="宋体" size="3"></font>----------控制字体

<b>加粗</b>或<strong>加粗</strong>

<i>倾斜</i>或<em>倾斜</em>

<u>下划线</u>

<center>居中显示,默认前面或后面若有其他,直接进行上下换行,保证自身所包含的内容单独存在,然后执行居中</center>

回<br />车<br /><!--在设计页面中按shift+Enter即可生成<br>-->
空&nbsp;&nbsp;&nbsp;格<br /><!--在设计页面中按ctrl+shift+space即可生成&nbsp;-->

内容容器标签

<h1>123,标题格式控制标签,默认自动换行</h1>
<h2>123,默认上下空开一行</h2>
<h3>123,重要性依次减小</h3>

<p>p标签,段落标签若前后有其他,执行上下换行,并空开一行</p>

<font >第一种<div>层标签</div></font><!--默认占一行-->
<font >第二种<span>层标签</span></font><!--默认有多大空间占多大空间-->

<ol>...ordered list---有序列表
<li>默认自带序号</li>
<li>默认自动换行</li>
<li>若前后有其他,执行上下换行,并空开一行</li>
</ol>

<ul>

<li>默认不自带序号</li>
<li>默认自动换行</li>
<li>若前后有其他,执行上下换行,并空开一行</li>
</ul>

常用标签
超链接标签
<a href="http://www.w3school.com.cn" target="_blank">W3School在线教程</a> 
第一步:做锚点的标签.<a name="top"></a><!--锚点标签-->
第二步:做锚点链接.<a href="#top">返回最顶端</a>

图片标签
<img src="../图片/My Pictures/无标题12.bmp" title="美景" name="看一看" alt="这是一张图片" width="256" height=""/>

高度跟宽度设置一个即可保持原有比例。

alt在图片无法加载时,显示文字,还可以帮助搜索引擎搜索。

title可以添加图片描述,鼠标放在图片上时可以显示描述。

表格与表单

表格

  <table></table> 表格

    width:宽度。可以用像素或百分比表示。常用960像素。

    border:边框。常用值0。

    cellpadding:内容跟单元格边框的边距。常用值0。

    cellspacing:单元格之间的间距。常用值0。

    align:对齐方式。

    bgcolor:背景色。

background:背景图片。

  <tr></tr> 行

    align:一行的内容的水平对齐方式

    valign:一行的内容的垂直对齐方式

    height:行高

    bgcolor:背景色

background:背景图片

  <td></td> 单元格

  <th></th> 表头,单元格的内容自动居中、加粗

    align:单元格的内容的对齐方式

    valign:单元格的内容的垂直对齐方式

    width:单元格宽度                      只规定第一行的每一列宽度,则剩下的每一列都会自动调整宽度

    height:单元格高度

    bgcolor:背景色

background:背景图片

  内容必须放在单元格里,单元格必须放在行里,行必须放在表格里。设置单元格行高、列高时,会同时影响对应的行或列

  单元格合并:(建议尽量用表格嵌套)

    colspan="n"    合并同一行单元格(后面写代码要减去相对应的列) n是当前单元格横跨的列数

    rowspan="n"    合并同一列单元格(从第二行开始减去对应的列)  n是当前单元格纵跨的行数

<!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>
<a name="top"></a><!--锚点标签-->
<body background="../../图片/2005091014411292.jpg" text="#000066" topmargin="100" leftmargin="100" rightmargin="100" bottommargin="400" >
<h2>1.1一般标签</h2>
<h3>1.1.1格式控制标签</h3>
<font color="#6600FF" face="Lucida Console, Monaco, monospace" size="+3">控制字体</font><br /><!--font控制字体,颜色,字体,大小-->
<b>加粗</b><br />
<i>倾斜</i><br />
<u>下划线</u><br /><!--必须手动打-->
<strong>字体加粗</strong><br />
<em>字体倾斜</em><br />
<center>居中</center><br /><!--默认前面或后面若有其他直接进行上下换行,保证自身所包含的内容单独存在,然后执行居中-->
回<br />车<br /><!--按shift+Enter即可生成<br>-->
空&nbsp;&nbsp;&nbsp;格<br /><!--按ctrl+shift+space即可生成&nbsp;-->
<h3>1.1.2内容容器标签</h3>
<h1>标题1</h1><!--重要性依次减小,默认自动换行,默认上下空开一行-->
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<p>段落1</p><!--若前后有其他,执行上下换行,并空开一行-->
<p>段落<br /></p> <font >第一种<div style="background-color:blue">层标签</div></font><!--默认占一行-->
<font >第二种<span style="background-color:green">层标签</span></font><!--默认有多大空间占多大空间--> <ol type="1">有序列表<!--默认自带序号,自动换行,若前后有其他,上下换行并空开一行-->
<li>序号1</li>
<li>序号2</li>
<li>序号3</li>
</ol>
<ul type="square" >无序列表<!--不自带序号-->
<li>第一</li>
<li>第二</li>
<li>第三</li>
</ul>
<h2>1.2常用标签</h2>
<h3>超链接标签</h3>
<a href="http://www.w3school.com.cn" target="_blank">W3School在线教程</a> <br />
第一步:做锚点的标签.<br />
第二步:做锚点链接.<a href="#top">返回最顶端</a><br />
<br />
<br />
图片标签<br />
<img src="file:///E|/图片/My Pictures/无标题12.bmp" title="美景" name="看一看" alt="这是一张图片" width="256" height=""/>

高度跟宽度设置一个即可保持原有比例。


alt在图片无法加载时,显示文字,还可以帮助搜索引擎搜索。


title可以添加图片描述,鼠标放在图片上时可以显示描述。

<br />
<br />
<h2>1.3表格与表单</h2>
<h3>1.3.1 表格</h3>
<table width="960" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#FFFF99" >
<tr align="center" >
<td width="80" height="40"><a href="http://www.baidu.com/index.php?tn=98012088_dg&ch=13">百度</a></td>
<td width="80"><a href="http://www.tmall.com">天猫</a>•<a href="http://www.taobao.com">淘宝</a></td>
<td width="80" >京东</td>
<td width="80">人民网</td>
<td width="80">爱奇艺</td>
</tr>
<tr align="center" >
<td width="80" height="40">腾讯</td>
<td width="80">搜狐</td>
<td width="80">新浪</td>
<td width="80">网易</td>
<td width="80">乐视</td>
</tr>
</table> <a href="#top">返回最顶端</a> </body
></html><!--结束标签-->

练习:制作个人简历

<body text="#0000CC">
<center><font size="45">个人简历</font></center>
<table width="600"border="1" cellpadding="0" cellspacing="0" align="center">
<tr align="center"height="40">
<td width="85">姓名</td>
<td width="120"></td>
<td width="85">性别</td>
<td width="120"></td>
<td rowspan="6"><font size="48">照<br />
片</font></td>
</tr>
<tr align="center" height="40">
<td>民族</td>
<td></td>
<td>出生年月</td>
<td></td>
</tr>
<tr align="center" height="40">
<td>毕业院校</td>
<td></td>
<td>专业</td>
<td></td>
</tr>
<tr align="center" height="40">
<td>学历</td>
<td></td>
<td>政治面貌</td>
<td></td>
</tr>
<tr align="center" height="40">
<td>籍贯</td>
<td></td>
<td>家庭住址</td>
<td></td>
</tr>
<tr align="center" height="40">
<td>联系电话</td>
<td></td>
<td>电子邮箱</td>
<td></td>
</tr>
<tr>
<td colspan="5" align="center" height="30">工作经历</td>
</tr>
<tr>
<td colspan="5" height="180"></td>
</tr>
<tr>
<td colspan="5" align="center" height="30">学习经历</td>
</tr>
<tr>
<td colspan="5" height="180"></td>
</tr>
<tr>
<td colspan="5" align="center" height="30">自我评价</td>
</tr>
<tr>
<td colspan="5" height="180"></td>
</tr>
</tr>
<tr align="center" height="40">
<td>博客地址</td>
<td colspan="4"><a href="http://www.cnblogs.com/">http://www.cnblogs.com</a></td>
</table>

个人简历

姓名   性别  
民族   出生年月  
毕业院校   专业  
学历   政治面貌  
籍贯   家庭住址  
联系电话   电子邮箱  
工作经历
 
学习经历
 
自我评价
 
博客地址 http://www.cnblogs.com

3.19课·········HTML---标签与表格的更多相关文章

  1. HTML常用标签与表格标签

    超链接标签: <a href="超链接地址" target="_blank">超链接的文字</a> _blank或new是在新网页中打开 ...

  2. ul+li标签制作表格

    table标签制作表格代码繁琐,且不方便后期代码维护. li标签加上css的浮动样式可以制作多种样式的表格. 代码如下: <ul id="ttttt" style=" ...

  3. 第二天(就业班) html的引入、html常用标签、实体标签、超链接标签、图片标签、表格、框架标签、表单[申明:来源于网络]

    第二天(就业班) html的引入.html常用标签.实体标签.超链接标签.图片标签.表格.框架标签.表单[申明:来源于网络] 第二天(就业班) html的引入.html常用标签.实体标签.超链接标签. ...

  4. 第19课-数据库开发及ado.net ADO.NET--SQLDataReader使用.SqlProFiler演示.ADoNET连接池,参数化查询.SQLHelper .通过App.Config文件获得连接字符串

    第19课-数据库开发及ado.net ADO.NET--SQLDataReader使用.SqlProFiler演示.ADoNET连接池,参数化查询.SQLHelper .通过App.Config文件获 ...

  5. HTML-常用标签与表格标签

    超链接标签: <a href="超链接地址" target="_blank">超链接的文字</a> _blank或new是在新网页中打开 ...

  6. html5常用标签table表格布局

    html5常用标签table表格布局 一.总结 一句话总结: 二.html5常用标签table表格布局 用表格显示信息调理清楚,使浏览者一目了然.表格在网页中还有协助布局的作用,可以把文字.图像等组织 ...

  7. a标签,img标签,表格

    <a></a>    a标签,超链接标签 ,引入超链接方式:  src="...."   target="blank" 打开方式--新页 ...

  8. HTML基础(一)——一般标签、常用标签和表格

    第一部分  HTML <html>    --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> ...

  9. HTML常用标签跟表格

    <html>    --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> <body& ...

随机推荐

  1. axios 设置超时时间 timeout

    this.$ajax.post('', {operate: type, ids: this.data.id.toString(), data_type: 'ips'}, {timeout: 60000 ...

  2. TCP应用程序通信协议的处理

    TCP应用程序通信协议的处理 flyfish 2015-6-29 一 流式处理 TCP是一种流协议(stream protocol).TCP数据是以字节流的形式传递给接收者的,没有固有的"报 ...

  3. Gradle学习小结

    build.gradle(依赖配置) // 普通java工程 apply plugin: 'java' // Idea工程 apply plugin: 'idea' // war工程,需要有webap ...

  4. trac 的安装设置

    Trac的安装设置 原网页:http://wiki.ubuntu.org.cn/Trac%E7%9A%84%E5%AE%89%E8%A3%85%E8%AE%BE%E7%BD%AE 出自Ubuntu中文 ...

  5. HTTP协议断点续传

    using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Net;usi ...

  6. SQL Server统计信息:问题和解决方式

    在网上看到一篇介绍使用统计信息出现的问题已经解决方式,感觉写的很全面. 在自己看的过程中顺便做了翻译. 因为本人英文水平有限,可能中间有一些错误. 假设有哪里有问题欢迎大家批评指正.建议英文好的直接看 ...

  7. GoogleMap的鼠标点击标注、搜索和设置城市的简单应用

    资源 Google Map API包含了大量的文档.示例和各种资料.在使用前需要申请自己的密钥 墙内要用:http://maps.google.cn/maps/api/js? 墙外可用:https:/ ...

  8. 智能提示(一) Solr (suggest)

    电商搜索中要实现这么一块功能,当输入文字时候.下拉框提示.类似于百度搜索 在师出名门的基于lucene的solr搜索引擎中.提供了 拼写检查和智能提示这块功能.   拼写检查就是用来检查用户输入的检索 ...

  9. Foundation框架 - NSDictionary类、NSMutableDictionary类

    NSArray.NSSet.NSDictionary /* 集合 1.NSArray\NSMutableArray * 有序 * 高速创建(不可变):@[obj1, obj2, obj3] * 高速訪 ...

  10. HTTP响应头缓存控制

    在一般Web开发中,有时需要设置特殊的HTTP响应头阻止客户端(一般是浏览器)缓存(使用)该次请求的响应. 这时候大部分开发人员都是百度或谷歌几段代码复制粘贴即了事. 以下简述一下关于缓存控制的几种H ...