HTML（Hyper Text Markup Language，超文本标记语言）超指的是超链接。

<html>    --开始标签

　　<head>

　　　　网页上的控制信息

<title>页面标题</title>

　　</head>

　　<body>

　　　　页面显示的内容

　　</body>

</html>    --结束标签

代码写在body里面

<!--注释内容--> 注释

body的属性：

bgcolor 页面背景色      text 文字颜色

topmargin 上页边距      leftmargin 左页边距

rightmargin 右页边距    bottomargin 下页边距  background 背景壁纸

一、格式控制标签

<font color="" face="" size=""></font>  控制字体；color="##FF0000"；face，字体；size，字体大小

<b></b>                字体加粗

<i></i>                  倾斜

<u></u>                下划线

<strong></strong> 字体加粗（强调，语气加强用）

<em></em>           字体倾斜（强调，语气加强用）

<center></center>  居中（前后有内容时自动换行 内容会单独占据一行）

<br> 或<br />         相当于回车

&nbsp                      表示空格 也可以在设计页面中按ctrl+shift+space

二、内容容器标签

<h1></h1>……<h6></h6>     标题（会自动换行）。

<p></p>                               段落标签（段落之间空行）

<div></div>                          层标签（默认占一行）

<span></span>                     层标签（默认用多大空间占多大空间）

<ol type="1">                       --有序列表，序号为1,2,3……，引号中可以更改序号形式

<li>内容</li>

<li>内容</li>

</ol>                                  --上面“ol”改为“ul”则为无序列表

三、超链接、图片标签

<a href="超链接地址" target=“_blank”>超链接的文字</a>     --href（hyperlink reference）；_blank是在新窗口打开。

类似返回顶部或返回特定位置的链接：

第一步：做锚点的标签。<a name=""></a>

第二步：做锚点链接。<a href="目标链接的name的值"></a>

图片：

<img src="图片地址" alt="文字" width="" height="" title="" />     --高跟宽设置一个即可，显示图片会按比例缩放。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"    合并同一行单元格（后面写代码要减去相对应的列）

rowspan="n"    合并同一列单元格（从第二行开始减去对应的列）

练习：使用HTML制作简历：

<!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>

<h1 align="center">王潼的个人简历</h1>

<table bgcolor="#FFFFCC" align="center" width="50%" height="850" border="1" cellpadding="0" cellspacing="0">

<tr align="center" height="50">

<td width="70"><b>姓名</b></td>

<td width="100">王潼</td>

<td width="70"><b>性别</b></td>

<td width="100">男</td>

<td width="70"><b>民族</b></td>

<td width="100">汉</td>

<td rowspan="3"><img src="zhaopian.png"/></td>

</tr>

<tr align="center" height="50">

<td><b>籍贯</b></td>

<td>泰安</td>

<td><b>婚姻状况</b></td>

<td>未婚</td>

<td><b>学历</b></td>

<td>本科</td>

</tr>

<tr align="center" height="50">

<td><b>出生年月</b></td>

<td>1992年3月</td>

<td><b>年龄</b></td>

<td>24</td>

<td><b>政治面貌</b></td>

<td>群众</td>

</tr>

<tr align="center" height="50">

<td><b>家庭住址</b></td>

<td colspan="6">山东省淄博市张店区华光路南四巷</td>

</tr>

<tr align="center" height="50">

<td><b>获得证书</b></td>

<td colspan="6">毕业证、驾驶证</td>

</tr>

<tr align="center" height="50">

<td><b>个人技能</b></td>

<td colspan="6">C#基础</td>

</tr>

<tr align="center" height="50">

<td colspan="7"><b>教育或工作经历</b></td>

</tr>

<tr align="center" height="50">

<td colspan="2"><b>起止日期</b></td>

<td colspan="4"><b>在何单位</b></td>

<td><b>职务</b></td>

</tr>

<tr align="center" height="50">

<td colspan="2">2010.9-2014.6</td>

<td colspan="4">滨州学院</td>

<td>学生</td>

</tr>

<tr align="center" height="50">

<td colspan="2">2014.11-2016.8</td>

<td colspan="4">淄博思科电子</td>

<td>技术支持</td>

</tr>

<tr align="center" height="50">

<td colspan="2">2016.9-</td>

<td colspan="4">淄博汉企</td>

<td>实训员工</td>

</tr>

<tr align="center" height="50">

<td><b>期望行业</b></td>

<td colspan="4">IT行业</td>

<td><b>期望薪资</b></td>

<td>4000</td>

</tr>

<tr align="center" height="50">

<td colspan="7"><b>自我评价</b></td>

</tr>

<tr align="center">

<td colspan="7"></td>

</tr>

<tr align="center" height="50">

<td><b>博客地址</b></td>

<td colspan="6"><a href="http://www.cnblogs.com/wt627939556/" target="_blank">http://www.cnblogs.com/wt627939556/</a></td>

</tr>

</table>

</body>

</html>

较为简约的版本，使用到了表格以及部分字体设置标签

总结：刚开始HTML部分的学习，感觉内容非常零碎，需要记忆的东西很多，不过许多功能在不同的标签中类似，比如bgcolor都是设置背景颜色，需要勤加练习才能牢记所学内容。

HTML的格式、内容容器、表格标签的更多相关文章

  1. html标签，格式控制标签，内容容器标签，超链接标签，图片标签，表格

    打开DREAMWEAVER,新建HTML,如下图: body的属性: bgcolor 页面背景色 background  背景壁纸.图片 text  文字颜色 topmargin  上边距 leftm ...

  2. html body的属性 格式控制标签 内容容器标签 超链接标签 图片标签 表格

    一.body的属性 <body  bgcolor  页面背景色 background 背景壁纸.图片 text文字颜色 topmargin上边距 leftmargin左边距 rightmargi ...

  3. 前端 HTML body标签相关内容 常用标签 表格标签 table

    表格标签 table 表格由<table> 标签来定义.每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由<td>标签定义).字母 td 指表 ...

  4. /.nav-tabs :是普通标签页 .nav-pills:胶囊式标签页 action ;默认的激活项，给<li>加默认显示的是哪个标签页内容 .nav是标签页的一个基类，给ul加 .nav-stacked: 垂直排列BootStrap

    <meta name="viewport" content="with=device-width, initial-scale=1, user-scalabe=no ...

  5. HTML——表格标签

    存在即是合理的. 表格的现在还是较为常用的一种标签,但不是用来布局,常见处理.显示表格式数据. 创建表格 在HTML网页中,要想创建表格,就需要使用表格相关的标签.创建表格的基本语法格式如下: < ...

  6. HTML的表格标签，列表标签，表单标签，HTML5有哪些新特性

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...

  7. H5 表格标签基本使用

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. HTML基础【4】：表格标签

    表格标签 在过去表格标签用的非常非常的多,绝大多数的网站都是使用表格标签来制作的,也就是说表格标签是一个时代的代表 作用:以表格形式将数据显示出来,当数据量非常大的时候,表格这种展现形式被认为是最为清 ...

  9. python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

随机推荐

  1. 游戏服java程序启动，显示内存溢出

    1.OutOfMemoryError:Java heap space 过程:服务器上面的mysql突然异常重启,导致了程序启动的时候报错 问题1:OutOfMemoryError:Java heap ...

  2. ABAP 数值类型转换

    CALL FUNCTION 'CONVERSION_EXIT_ALPHA_INPUT'       EXPORTING         input  = wa_zz-werks       IMPOR ...

  3. GCD 大中枢派发 简单应用实例

    @interface ViewController () { UIImageView* iv; UIButton* btn; UILabel* lbl; } @end @implementation ...

  4. HDU 4949 Light（插头dp、位运算）

    比赛的时候没看题,赛后看题觉得比赛看到应该可以敲的,敲了之后发现还真就会卡题.. 因为写完之后,无限TLE... 直到后来用位运算代替了我插头dp常用的decode.encode.shift三个函数以 ...

  5. Greedy:Linear world(POJ 2674)

      Linear world 题目大意:一些人生活在线性世界中,到达线性世界两端就会消失,两个人的前进方向有两个,相遇会改变各自相遇方向,求最后一个人掉下的人的名字和时间. 其实这一题就是弹性碰撞的模 ...

  6. ubuntu10.04+win7双系统，重装win7后，恢复grub引导菜单以及命令行引导linux

    我在我的小Y上安装了ubuntu10.04和win7旗舰版的双系统,采用的是grub引导.今天win7不知道哪儿出了问题,windows update更新一直报错,(当然360也是打不上滴)网上查了很 ...

  7. 【XLL API 函数】xlGetHwnd

    返回顶层的 Excel 窗口句柄. Excel4(xlGetHwnd, LPXLOPER pxRes, 0); /* returns low part only */ Excel12(xlGetHwn ...

  8. IOS - socket 编程初体验

    #import "ViewController.h" @interface ViewController () <NSStreamDelegate, UITextFieldD ...

  9. CSS3实现文字抹开特效

    CSS: .column-title { color: #9b9b9b; text-shadow: 1px 1px #d4d4d4;}.column-title:hover { color: #5a5 ...

  10. springmvc上传List，

    @RequestMapping("pay") public ModelAndView pay(String orderNo, TransactionDTO transaction, ...