8.文本格式化
<pre>标签:预格式文本,它保留了空格和换行。
<b>标签:粗体
<code><kbd><tt><samp><var>常用于计算机/编程
title属性,缩写和首字母缩写:
- <acronym title="World Wide Web">WWW</acronym>
- <abbr title="etcetera">etc.</abbr>
改变文字方向:<bdo dir="rtl">Here is some Hebrew text</bdo>
8.1 块引用:
- <blockquote>长引用</blockquote> #浏览器会插入换行和外边距
- <q>短引用</q> #浏览器不会有任何特殊的呈现
删除字效果和插入字效果:<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
显示效果:
一打有 二十 十二 件。
8.2 文本格式化标签:
标签 | 描述 |
---|---|
<b> | 定义粗体文本 |
<big> | 定义大号字 |
<em> | 定义着重文字 |
<i> | 定义斜体字 |
<small> | 定义小号子 |
<strong> | 定义加重语义 |
<sub> | 定义下标字 |
<sup> | 定义上标字 |
<ins> | 定义插入字 |
<del> | 定义删除字 |
<s> | 弃用。使用<del>代替 |
<strike> | 弃用。使用<del>代替 |
<u> | 弃用。使用样式(style)代替 |
8.3 计算机输出
标签 | 描述 |
---|---|
<code> | 定义代码格式,不保留多余的空格和折行 |
<kbd> | 定义键盘输出 |
<samp> | 定义计算机代码的输出示例 |
<tt> | 定义打字机代码 |
<var> | 定义数学变量,公式等 |
<pre> | 定义预格式文本,不改变原有格式 |
<listing> | 弃用,使用<pre>代替 |
<plaintext> | 弃用,使用<pre>代替 |
<xmp> | 弃用,使用<pre>代替 |
8.4 引用、引用和术语定义**
标签 | 描述 |
---|---|
<abbr> | 定义缩写 |
<acronym> | 定义首字母缩写 |
<address> | 定义地址 |
<bdo> | 定义文字方向,反向显示文本 |
<blockquote> | 定义长的引用 |
<q> | 定义短的引用 |
<cite> | 定义著作标题,常以斜体表示 |
<dfn> | 定义一个项目定义 |
8.5 CSS样式
插入样式表
8.5.1 外部样式表
当页面具有普遍性,能应用与多个页面时用外部样式表,通过更改一个文件来改变整个站点的外观
- <head>
- <link rel="stylesheet" type="text/css" href="mystyle.css">
- </head>
8.5.2 内部样式表
当单个文件需要特别样式时,就可以使用内部样式表,即在head部分通过<style>标签定义内部样式表。
- <head>
-
- <style type="text/css">
- body {background-color: red}
- p {margin-left: 20px}
- </style>
- </head>
8.5.3 内联样式
当特殊的样式需要用到个别元素时用到,方法即在相关标签中使用样式属性,样式属性可以包含任何 CSS 属性。
- <!-- 以下实例显示出如何改变段落的颜色和左外边距 -->
- <p style="color: red; margin-left: 20px">
- This is a paragraph
- </p>
标签 | 描述 |
---|---|
<style> | 定义样式定义 |
<link> | 定义资源引用 |
<div> | 定义文档中的节或区域(块级) |
<span> | 定义文档中的行内的小块或区域 |
<font> | 规定文本的字体,字体尺寸,字体颜色(弃用) |
<basefont> | 定义基准字体(弃用) |
<center> | 对文本进行水平居中(弃用) |
8.6 链接
<a>标签使用:
8.6.1 通过使用 href 属性 - 创建指向另一个文档的链接
- <!-- 文字超链接 -->
- <a href="http://www.microsoft.com/">本文本</a>
-
- <!-- 图像作为链接 -->
- <a href="/example/html/lastpage.html">
- <img border="0" src="/i/eg_buttonnext.gif" />
- </a>
8.6.2 通过使用 name 属性 - 创建文档内的书签
name属性规定锚(anchor)的名称,利用name属性可以创建HTML页面中的书签。当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接。
- <!-- 锚,显示在页面上的文本 -->
- <a name="lable">锚
注意:
1.锚的名称可以是任何你喜欢的名字
2.您可以使用 id 属性来替代 name 属性,命名锚同样有效。
3.假如浏览器找不到已定义的命名锚,那么就会定位到文档的顶端。不会有错误发生。
实例:
- <!-- 在HTML文档中对锚进行命名,创建一个书签 -->
- <a name="tips">基本的注意事项 - 有用的提示</a>
- <!-- 在同一个文档中创建指向该锚的链接 -->
- <a href="#tips">有用的提示</a>
- <!-- 在其他页面中创建指向该锚的链接 -->
- <a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
8.6.3 target属性
定义被链接的文档在何处显示,_blank是在新窗口打开文档,_top是跳出框架,直接进入文档
- <!-- 在新窗口中打开文档 -->
- <html>
- <body>
-
- <a href="http://www.w3school.com.cn/"
- target="_blank">Visit W3School!</a>
-
- </body>
- </html>
8.7 图像
图像标签<img>和源属性<Src>,其中<img>是空标签<img src="url" />
,即没有闭合标签。
图像标签
替换文本属性(Alt):
alt属性用来为图像定义一串预备的可替换的文本,替换文本是用户自定义的<img src="boat.gif" alt="Big Boat">
当浏览器无法显示图像时,就会采用替代文本进行显示 载入图片花费的时间较长,尽量不要使用图片
图像align属性:
<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>
botton是底部(默认对齐方式),同样还有middle top left right
图像大小(width height):
<img src="/i/eg_mouse.jpg" width="50" height="50">
调整width和height属性,改变图片大小 为图像显示文本<img src="/i/eg_goleft.gif" alt="文本显示" />
<img src="/i/eg_goleft123.gif" alt="文本显示" />
图像链接
<a href="/example/html/lastpage.html"> <img border="0" src="/i/eg_buttonnext.gif" /> </a>
图像映射
- <img
- src="/i/eg_planets.jpg"
- border="0" usemap="#planetmap"
- alt="Planets" />
-
- <map name="planetmap" id="planetmap">
图像转化为图像映射
- <a href="/example/html/html_ismap.html">
- <img src="/i/eg_planets.jpg" ismap />
- </a>
8.8 表格
每个表格由table标签开始,表格行由tr标签开始,表格数据由td标签开始,表头以th标签开始,表题以caption标签开始。
8.8.1 示例
示例1:
- <table border="1">
- <tr>
- <td>100</td>
- <td>200</td>
- <td>300</td>
- </tr>
- </table>
示例2(表格边框):
border是边框属性,不定义的话不显示边框
带有普通的边框border="1"
带有粗的边框border="8"
带有很粗的边框border=“15”
- <table border="1">
- <tr>
- <td>First</td>
- <td>Row</td>
- </tr>
- <tr>
- <td>Second</td>
- <td>Row</td>
- </tr>
- </table>
表头:
表格的表头采用<th>标签进行定义,一般显示为粗体。
- <tr>
- <th>Heading</th>
- <th>Another Heading</th>
- </tr>
空单元格:
<td> </td>,有些浏览器不会显示空格单元边框,为避免这种情况,最好加入一个空格占位符
8.8.2 表格标签
表格 | 描述 |
---|---|
<table> | 定义表格 |
<caption> | 定义表格标题 |
<th> | 定义表格的表头 |
<tr> | 定义表格的行 |
<td> | 定义表格单元 |
<thead> | 定义表格的页眉 |
<tbody> | 定义表格的主体 |
<tfoot> | 定义表格的页脚 |
<col> | 定义用于表格列的属性 |
<colgroup> | 定义表格列的组 |
8.8.3 杂项:
表格标题:<caption>标签
横跨两列的单元格: colspan属性<th colspan="2">电话</th>
横跨两行的单元格: rowspan属性<th rowspan="2">电话</th>
表格内标签
单元格边距:cellpadding属性:<table border="1" cellpadding="10">
单元格间距:cellspacing属性:<table border="1" cellspacing="10">
向表格添加背景颜色:<table border="1" bgcolor="red">
向表格添加背景图像:<table border="1" background="/i/eg_bg_07.gif">
向表格单元添加背景颜色:<td bgcolor="red">First</td>
向表格单元添加背景图像<td background="/i/eg_bg_07.gif"> Second</td>
表格align属性
框架(fram)属性:<table frame="above">