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 ...
随机推荐
- ios swift generator 文章推荐
https://medium.com/swift-programming/sequence-beyond-primitive-iterations-in-swift-80bc2507d8cc /// ...
- HDU 4966 GGS-DDU（最小树形图）
n个技能,每个技能有0-a[i]的等级,m个课程,每个课程需要前置技能c[i]至少达到lv1[i]等级,效果是技能d[i]达到lv2[i]等级,花费w[i]. 输出最小花费使得全技能满级(初始全技能0 ...
- Greedy:Cow Acrobats(POJ 3045)
牛杂技团 题目大意:一群牛想逃跑,他们想通过搭牛梯来通过,现在定义risk(注意可是负的)为当前牛上面的牛的总重量-当前牛的strength,问应该怎么排列才能使risk最小? 说实话这道题我一开始给 ...
- (转)JAVA AJAX教程第二章-JAVASCRIPT基础知识
开篇:JAVASCRIPT是AJAX技术中不可或缺的一部分,所以想学好AJAX以及现在流行的AJAX框架,学好JAVASCRIPT是最重要的.这章我给大家整理了一些JAVASCRIPT的基础知识.常用 ...
- SpringMVC，3种不同的URL路由配置方法(这根本不是一个小问题)
转载自:http://blog.csdn.net/fansunion/article/details/41149287?utm_source=tuicool&utm_medium=referr ...
- 自定义循环滑动的viewpager
今天和大家分享一下如何定制一个可以循环滑动的viewpager.其实今天更重要的提供一种组件化思想,当然你可以理解为面向对象思想. 吐槽一下网上流行的实现方式吧(为了方便说明,下文称之为方式A),方式 ...
- 一个servlet处理来自多个不同页面的请求！
例如有一个用户表,我们要处理 添加,删除 用户以及登录功能 对应的有add.jsp del.jsp login.jsp等 <body> <!-- login.jsp --> & ...
- 使用Ajax上传图片到服务器（不刷新页面）
有时候我们需要上传图片时不刷新页面,那么Ajax就是很好的东西哦.之前在网上找了很多的资料都不对,不是这里就是那里错,这是本人亲自测试了的哈,是没有问题的,若有不足之处希望指正.我用的.net,对了这 ...
- endnote设置文献第二行悬挂缩进办法
参考:http://blog.sina.com.cn/s/blog_62b13cf201014lfr.html 使用[endnote]插入文献后,如果文献稍长些,有第二行,第二行会顶格开始.并且这个 ...
- NPOI基本操作XLS
using System; using System.Collections.Generic; using System.Diagnostics; using System.IO; using Sys ...