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. redis pub/sub 实战: 微信语音识别

    2015年5月22日 20:20:20 星期五 效果: 这边对微信说话,  浏览器端及时显示语音识别的文字 注意: 在连接socket.io时, 按下浏览器f12, 如果一直有请求不断的刷, 说明so ...

  2. cannot use the same dataset for report.dataset and page.dataset

    把page中的dataset中填的数据表删除.(改成not assigned)

  3. MongoDB 副本集的相关概念【转】

    一.副本集基本概念 副本集(replica set) MongoDB的replica set是一个mongod进程实例簇,数据在这个簇中相互复制,并自动进行故障切换. MongoDB的数据库复制增加了 ...

  4. CentOS基础指令备忘

    功能 指令 可用参数 示例 说明 新建文件夹 mkdir   mkdir etc/temp 在当前目录的etc文件夹下新建temp文件夹 新建文件 vi   vi abc.sh 新建名为abc.sh的 ...

  5. jsp页面路径问题

    jsp路径默认不是项目跟路径 一. <%@ page language="java" import="java.util.*" pageEncoding= ...

  6. jquery中dom元素的attr和prop方法的理解

    一.背景 在编写使用高版本[ jQuery 1.6 开始新增了一个方法 prop()]的jquery插件进行编写js代码的时候,经常不知道dom元素的attr和prop方法到底有什么区别?各自有什么应 ...

  7. 让div等块级元素水平以及垂直居中的解决办法

    一.背景 我们在设计页面的时候,经常要把div等块级元素居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让div等块级元素居中.在本文中,我将 ...

  8. html+css+js实现标签页切换

    CSS部分: #Tab { margin:0 auto; width:640px; border:none; position:absolute; z-index:9; margin-left:320 ...

  9. hdu 1290 切糕

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1290 思路: n条直线最多能将一个平面分成几个区域其递推公式即为:f(n)=f(n-1)+n:递推一下 ...

  10. 二、JavaScript语言--事件处理--DOM事件探秘

    第一章 事件流 事件:是文档或浏览器窗口中发生的.特定的交互瞬间.JavaScript和HTML之间的交互都是通过事件来实现的. 事件流:描述的是从页面中接受事件的顺序 IE:事件冒泡流 Netsca ...