首页 > Web开发 > 详细

3.19课·········HTML---标签与表格

时间:2016-03-20 09:12:24      阅读:135      评论:0      收藏:0      [点我收藏+]

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>
<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=""/><!--高跟款宽设置一个即可,若都设置,图片会变形-->

表格与表单

表格

  <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"    合并同一行单元格(后面写代码要减去相对应的列) 

    rowspan="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 />
2</p>

<font >第一种<div>层标签</div></font><!--默认占一行-->
<font >第二种<span>层标签</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="../图片/My Pictures/无标题12.bmp" title="美景" name="看一看" alt="这是一张图片" width="256" height=""/><!--高跟款宽设置一个即可,若都设置,图片会变形--><br />
<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">天猫•淘宝</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><!--结束标签-->

技术分享

3.19课·········HTML---标签与表格

原文:http://www.cnblogs.com/xinghun/p/5296977.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!