HTML的格式、内容容器、表格标签
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 /> 相当于回车
  表示空格 也可以在设计页面中按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的格式、内容容器、表格标签的更多相关文章
- html标签，格式控制标签，内容容器标签，超链接标签，图片标签，表格
打开DREAMWEAVER,新建HTML,如下图: body的属性: bgcolor 页面背景色 background 背景壁纸.图片 text 文字颜色 topmargin 上边距 leftm ...
- html body的属性 格式控制标签 内容容器标签 超链接标签 图片标签 表格
一.body的属性 <body bgcolor 页面背景色 background 背景壁纸.图片 text文字颜色 topmargin上边距 leftmargin左边距 rightmargi ...
- 前端 HTML body标签相关内容 常用标签 表格标签 table
表格标签 table 表格由<table> 标签来定义.每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由<td>标签定义).字母 td 指表 ...
- /.nav-tabs :是普通标签页 .nav-pills:胶囊式标签页 action ;默认的激活项，给<li>加默认显示的是哪个标签页内容 .nav是标签页的一个基类，给ul加 .nav-stacked: 垂直排列BootStrap
<meta name="viewport" content="with=device-width, initial-scale=1, user-scalabe=no ...
- HTML——表格标签
存在即是合理的. 表格的现在还是较为常用的一种标签,但不是用来布局,常见处理.显示表格式数据. 创建表格 在HTML网页中,要想创建表格,就需要使用表格相关的标签.创建表格的基本语法格式如下: < ...
- HTML的表格标签，列表标签，表单标签，HTML5有哪些新特性
欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...
- H5 表格标签基本使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- HTML基础【4】：表格标签
表格标签 在过去表格标签用的非常非常的多,绝大多数的网站都是使用表格标签来制作的,也就是说表格标签是一个时代的代表 作用:以表格形式将数据显示出来,当数据量非常大的时候,表格这种展现形式被认为是最为清 ...
- python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
随机推荐
- ios8 新增的 showViewController 和 showDetailViewController
1.showViewController 先看看说明: You use this method to decouple the need to display a view controller fr ...
- delphi控件属性大全-详解-简介
http://blog.csdn.net/u011096030/article/details/18716713 button 组件: CAPTION 属性 :用于在按钮上显示文本内容 Cancel ...
- perl 二维数组
perl没有真正的二维数组,所谓的二维数组其实是把一维数组以引用的方式放到另外一个一维数组. 二维数组定义 : my @array1=([1,2],[3,4],[45,9],[66,-5]); ...
- manage account
#!/bin/bash # #Delete_user - Automates the steps to remove an account # ############################ ...
- codeforces 507B. Amr and Pins 解题报告
题目链接:http://codeforces.com/problemset/problem/507/B 题目意思:给出圆的半径,以及圆心坐标和最终圆心要到达的坐标位置.问最少步数是多少.移动见下图.( ...
- BestCoder25 1001.Harry and Magical Computer（hdu 5154） 解题报告
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5154 题目意思:有 n 门 processes(编号依次为1,2,...,n),然后给出 m 种关系: ...
- Navicat连接oracle，出现Only compatible with oci version 8.1 and&nb （转）
与本地oracle连接的时候,一般没问题,sqlplus和oci都是本地oracle自带的,(设置: 工具->选项->oci) 分别为: oci:D:\app\pcman\produc ...
- Spring mvc中@RequestMapping 6个基本用法小结(转载)
小结下spring mvc中的@RequestMapping的用法. 1)最基本的,方法级别上应用,例如: @RequestMapping(value="/departments" ...
- ios企业应用发布流程
转载自:http://blog.csdn.net/justinjing0612/article/details/8758692留作备忘 企业发布app的 过程比app store 发布的简单多了,没那 ...
- 修改VS2010生成的dll文件中的内容
我的电脑是64为的操作系统,所以先找到下面的路径 C:\Program Files (x86)\Microsoft SDKs\Windows\v7.0A\Bin 找到这个文件:ildasm.exe,如 ...