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 入门 第二季2

    (1). 封装 封装类的时候属性用private,方法getter和setter用public 将类的某些信息隐藏在类内部,不允许外部程序直接访问,而是通过该类提供的方法来实现对隐藏信息的操作和访问 ...

  2. MAC系统下配置环境变量

    环境变量初始值 /usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin 使用export 可以设置暂时的环境变量 如果要追加PATH的话添加新的变量到文件中expor ...

  3. 20145213《Java程序设计》第八周学习笔记

    20145213<Java程序设计>第八周学习笔记 教材学习内容总结 "桃花春欲尽,谷雨夜来收"谷雨节气的到来意味着寒潮天气的基本结束,气温回升加快.刚出冬的我对于这种 ...

  4. 【XLL API 函数】xlCoerce

    将 XLOPER/XLOPER12 转换为另一种类型,或是查询表格中的单元格值. 函数原型 Excel12(xlCoerce, LPXLOPER12 pxRes, 2, LPXLOPER12 pxSo ...

  5. increadbuild重装

    客户端和服务端都重装,可能需要去任务管理其中停止相关的服务,重装之前要去注册表中删除旧的注册表项.一般情况下incredibuild对应的位置是:64位系统HKEY_CLASSES_ROOT\\Wow ...

  6. maven编译时如何忽略单元测试

    共有两种解决办法 1.通过在命令行设置:-Dmaven.test.skip=true 如:mvn clean install tomcat:run -Dmaven.test.skip=true 2.通 ...

  7. 阿里云服务器出现Warning: Cannot modify header information - headers already sent by (output started at 问题的解决方法

    阿里云服务器出现Warning: Cannot modify header information - headers already sent by (output started at 问题的解决 ...

  8. iOS - property，strong，weak，retain，assign，copy，nomatic 的区别及使用

    1:ARC环境下,strong代替retain.weak代替assign,xcode 4.2(ios sdk4.3和以下版本)和之前的版本使用的是retain和assign,是不支持ARC的.xcod ...

  9. 使用detours实现劫持

    第一步:下载detours3.0,安装detours 第二步:构建库文件,nmake编译 第三步:包含库文件和头文件 #include "detours.h" //载入头文件 #p ...

  10. CSS3–2.css3 响应式布局

    1.响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站 ...