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

HTML（Hyper Text Markup Language，超文本标记语言）

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

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

</head>

<body>

页面上显示的内容

</body>

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

body的属性

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

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

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

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

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

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

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

格式控制标签

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

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

回<br />车<br />
空   格<br />

内容容器标签

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

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

<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---标签与表格的更多相关文章

HTML常用标签与表格标签
超链接标签: <a href="超链接地址" target="_blank">超链接的文字</a> _blank或new是在新网页中打开 ...
ul+li标签制作表格
table标签制作表格代码繁琐,且不方便后期代码维护. li标签加上css的浮动样式可以制作多种样式的表格. 代码如下: <ul id="ttttt" style=" ...
第二天(就业班) html的引入、html常用标签、实体标签、超链接标签、图片标签、表格、框架标签、表单[申明：来源于网络]
第二天(就业班) html的引入.html常用标签.实体标签.超链接标签.图片标签.表格.框架标签.表单[申明:来源于网络] 第二天(就业班) html的引入.html常用标签.实体标签.超链接标签. ...
第19课-数据库开发及ado.net ADO.NET--SQLDataReader使用.SqlProFiler演示.ADoNET连接池,参数化查询.SQLHelper .通过App.Config文件获得连接字符串
第19课-数据库开发及ado.net ADO.NET--SQLDataReader使用.SqlProFiler演示.ADoNET连接池,参数化查询.SQLHelper .通过App.Config文件获 ...
HTML-常用标签与表格标签
超链接标签: <a href="超链接地址" target="_blank">超链接的文字</a> _blank或new是在新网页中打开 ...
html5常用标签table表格布局
html5常用标签table表格布局一.总结一句话总结: 二.html5常用标签table表格布局用表格显示信息调理清楚,使浏览者一目了然.表格在网页中还有协助布局的作用,可以把文字.图像等组织 ...
a标签，img标签，表格
<a></a> a标签,超链接标签 ,引入超链接方式: src="...." target="blank" 打开方式--新页 ...
HTML基础（一）——一般标签、常用标签和表格
第一部分 HTML <html> --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> ...
HTML常用标签跟表格
<html> --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> <body& ...

随机推荐

C语言 | 计算器实现（中缀表示法/后缀表示法）
———————————————————————————————————————————— 实现原理: 每个操作数都被依次压入栈中,当一个运算符到达时,从栈中弹出相应数目的操作数(对于二元运算符来说是两 ...
我攻克了oom
BitmapFactory.Options options=new BitmapFactory.Options(); options.inJustDecodeBounds = false; ...
HTML5 的四个亮点
1.XDM cross-document-messaging 跨文档消息传递. 2.原生拖放功能. 3.新媒体元素 audio.video. 4.历史状态管理.
【CODEFORCES】 A. Initial Bet
A. Initial Bet time limit per test 1 second memory limit per test 256 megabytes input standard input ...
php优化(php.ini)
PHP优化 ------------------------------------- 尽量选择php5.4及以上的版本,里面很多优化参数已经移除了相比以前版本 1.引擎解析优化和加速 1)eac ...
jquery的on()
定义和用法 on() 方法在被选元素及子元素上添加一个或多个事件处理程序. 自 jQuery 版本 1.7 起,on() 方法是 bind().live() 和 delegate() 方法的新的替代品 ...
Springboot Maven 多模块项目中 @Service跨模块引用失败的问题
子模块中引用另一个子模块中的Service, @Autowired失败. 添加了模块之间的依赖没解决. 组以后在启动类上加上 @SpringBootApplication(scanBasePackag ...
hadoop System times on machines may be out of sync. Check system time and time zones.
之前环境一直好好的,由于玩坏了一个mini3只能复制一个了,但是复制之后就出现这个问题了解决办法是设置xshell向每一个窗口发消息http://mofansheng.blog.51cto.com ...
SpringSide4 maven
假设已经安装完 maven eclipse也装了maven插件现在要运行springside4 demo 1)下载 SpringSide4 http://www.springside.org.cn ...
Android Studio 使用笔记：工具窗口浮动与布局恢复
Android Studio 的工具窗口都可以变成浮动窗口,如果有多个显示器的话,这种模式非常方便.方法如下: 然后就像下图那样,可以拖拽了.如果你不小心关了,没有关系.再次点击工具栏,浮动窗口就回显 ...

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

表格与表单

表格

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

随机推荐

热门专题