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. 【leetcode】Binary Tree Postorder Traversal (hard) ☆

    二叉树的后序遍历 用标记右子树vector的方法 vector<int> postorderTraversal(TreeNode *root) { vector<int> an ...

  2. 【leetcode】Flatten Binary Tree to Linked List （middle）

    Given a binary tree, flatten it to a linked list in-place. For example,Given 1 / \ 2 5 / \ \ 3 4 6 T ...

  3. 20145213《Java程序设计》第五周学习总结补充

    20145213<Java程序设计>第五周学习总结补充 教材学习内容总结 欠的账都是要还的!第九章的内容躲过对酒当歌的夜,躲不过四下无人的街.由于第五周贪玩,疏忽冷落了Collection ...

  4. IOS- 内存管理机制

    iOS平台内存常见问题 作为iOS平台的开发者,是否曾经为内存问题而苦恼过?内存莫名的持续增长,程序莫名的crash,难以发现 的内存泄漏,这些都是iOS平台内存相关的常见问题:本文将会详细介绍iOS ...

  5. ASINetworkQueues(经典2)

    ASINetworkQueues, 它的delegate提供更为丰富的功能 提 供的更多的回调方法如下: a,requestDidStartSelector,请求发起时会调此方法,你可以在此方法中跟据 ...

  6. CSS3实现文字抹开特效

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

  7. FILE文件操作

    http://www.jb51.net/article/37688.htm fopen(打开文件)相关函数 open,fclose表头文件 #include<stdio.h>定义函数 FI ...

  8. 【转】C语言快速幂取模算法小结

    (转自:http://www.jb51.net/article/54947.htm) 本文实例汇总了C语言实现的快速幂取模算法,是比较常见的算法.分享给大家供大家参考之用.具体如下: 首先,所谓的快速 ...

  9. Android Programming: Pushing the Limits -- Chapter 4: Android User Experience and Interface Design

    User Stories Android UI Design 附加资源 User Stories: @.通过写故事来设计应用. @.每个故事只关注一件事. @.不同的故事可能使用相同的组件,因此尽早地 ...

  10. 个推+DCLOUD，推送消息和透传消息

    DCLOUD方案中集成了个推方案,最好是用个推来做推送相关的东西 消息分2类: 1.推送消息,这种一般会出现在手机的最上面的通知栏,用户是肯定会知道的 2.透传消息,这种一般就是一个Alert提示框, ...