# 原创 ： HTML语言笔记（二） # HTML语言笔记（二） ### 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>](http://www.w3school.com.cn/tags/tag_font_style.asp)| 定义粗体文本 | [<big>](http://www.w3school.com.cn/tags/tag_font_style.asp)| 定义大号字 | [<em>](http://www.w3school.com.cn/tags/tag_phrase_elements.asp)| 定义着重文字 | [<i>](http://www.w3school.com.cn/tags/tag_font_style.asp)| 定义斜体字 | [<small>](http://www.w3school.com.cn/tags/tag_font_style.asp)| 定义小号子 | [<strong>](http://www.w3school.com.cn/tags/tag_phrase_elements.asp)| 定义加重语义 | [<sub>](http://www.w3school.com.cn/tags/tag_sup.asp)| 定义下标字 | [<sup>](http://www.w3school.com.cn/tags/tag_sup.asp)| 定义上标字 | [<ins>](http://www.w3school.com.cn/tags/tag_ins.asp)| 定义插入字 | [<del>](http://www.w3school.com.cn/tags/tag_del.asp)| 定义删除字 | [<s>](http://www.w3school.com.cn/tags/tag_strike.asp)| 弃用。使用<del>代替 | [<strike>](http://www.w3school.com.cn/tags/tag_strike.asp)| 弃用。使用<del>代替 | [<u>](http://www.w3school.com.cn/tags/tag_u.asp)| 弃用。使用样式（style）代替 #### 8.3 计算机输出 | 标签| 描述 |------ | [<code>](http://www.w3school.com.cn/tags/tag_phrase_elements.asp)| 定义代码格式，不保留多余的空格和折行 | [<kbd>](http://www.w3school.com.cn/tags/tag_phrase_elements.asp)| 定义键盘输出 | [<samp>](http://www.w3school.com.cn/tags/tag_phrase_elements.asp)| 定义计算机代码的输出示例 | [<tt>](http://www.w3school.com.cn/tags/tag_font_style.asp)| 定义打字机代码 | [<var>](http://www.w3school.com.cn/tags/tag_phrase_elements.asp)| 定义数学变量，公式等 | [<pre>](http://www.w3school.com.cn/tags/tag_pre.asp)| 定义**预格式文本，不改变原有格式** | <listing>| 弃用，使用<pre>代替 | <plaintext>| 弃用，使用<pre>代替 | <xmp>| 弃用，使用<pre>代替 #### 8.4 引用、引用和术语定义** | 标签| 描述 |------ | [<abbr>](http://www.w3school.com.cn/tags/tag_abbr.asp)| 定义缩写 | [<acronym>](http://www.w3school.com.cn/tags/tag_acronym.asp)| 定义首字母缩写 | [<address>](http://www.w3school.com.cn/tags/tag_address.asp)| 定义地址 | [<bdo>](http://www.w3school.com.cn/tags/tag_bdo.asp)| 定义文字方向，反向显示文本 | [<blockquote>](http://www.w3school.com.cn/tags/tag_blockquote.asp)| 定义长的引用 | [<q>](http://www.w3school.com.cn/tags/tag_q.asp)| 定义短的引用 | [<cite>](http://www.w3school.com.cn/tags/tag_phrase_elements.asp)| 定义著作标题，常以斜体表示 | [<dfn>](http://www.w3school.com.cn/tags/tag_phrase_elements.asp)| 定义一个项目定义 #### 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](http://www.w3school.com.cn/css/index.asp) 属性。
  • <!-- 以下实例显示出如何改变段落的颜色和左外边距 --> 
  • <p style="color: red; margin-left: 20px"> 
  • This is a paragraph 
  • </p> 
    • --- --- | 标签| 描述 |------ | [<style>](http://www.w3school.com.cn/tags/tag_style.asp)| 定义样式定义 | [<link>](http://www.w3school.com.cn/tags/tag_link.asp)| 定义资源引用 | [<div>](http://www.w3school.com.cn/tags/tag_div.asp)| 定义文档中的节或区域（块级） | [<span>](http://www.w3school.com.cn/tags/tag_span.asp)| 定义文档中的行内的小块或区域 | [<font>](http://www.w3school.com.cn/tags/tag_font.asp)| 规定文本的字体，字体尺寸，字体颜色（弃用） | [<basefont>](http://www.w3school.com.cn/tags/tag_basefont.asp)| 定义基准字体（弃用） | [<center>](http://www.w3school.com.cn/tags/tag_center.asp)| 对文本进行水平居中（弃用） #### 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）:** > **图像align属性：** > **图像大小(width height):** > **图像链接** > **图像映射**
  • <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>，有些浏览器不会显示空格单元边框，为避免这种情况，最好加入一个空格占位符`&nbsp;` ##### 8.8.2 表格标签 | 表格| 描述 |------ | [<table>](http://www.w3school.com.cn/tags/tag_table.asp)| 定义表格 | [<caption>](http://www.w3school.com.cn/tags/tag_caption.asp)| 定义表格标题 | [<th>](http://www.w3school.com.cn/tags/tag_th.asp)| 定义表格的表头 | [<tr>](http://www.w3school.com.cn/tags/tag_tr.asp)| 定义表格的行 | [<td>](http://www.w3school.com.cn/tags/tag_td.asp)| 定义表格单元 | [<thead>](http://www.w3school.com.cn/tags/tag_thead.asp)| 定义表格的页眉 | [<tbody>](http://www.w3school.com.cn/tags/tag_tbody.asp)| 定义表格的主体 | [<tfoot>](http://www.w3school.com.cn/tags/tag_tfont.asp)| 定义表格的页脚 | [<col>](http://www.w3school.com.cn/tags/tag_col.asp)| 定义用于表格列的属性 | [<colgroup>](http://www.w3school.com.cn/tags/tag_colgroup.asp)| 定义表格列的组 ##### 8.8.3 杂项： > 表格标题:<caption>标签
    横跨两列的单元格: colspan属性`<th colspan="2">电话</th>`
    横跨两行的单元格: rowspan属性`<th rowspan="2">电话</th>`
    [表格内标签](http://www.w3school.com.cn/tiy/t.asp?f=html_table_elements)
    单元格边距：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属性](http://www.w3school.com.cn/tiy/t.asp?f=html_table_align)
    [框架(fram)属性](http://www.w3school.com.cn/tiy/t.asp?f=html_table_frame):`<table frame="above">`