zcy
/
csdn_spider
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
csdn_spider/blog/ds19991999/原创-- HTML语言笔记（二）.md

12 KiB
Raw Permalink Blame History

原创

： HTML语言笔记（二）

HTML语言笔记（二）

8.文本格式化

<pre>标签：预格式文本，它保留了空格和换行。
<b>标签：粗体
<code><kbd><tt><samp><var>常用于计算机/编程
title属性，缩写和首字母缩写：

  • <acronym title="World Wide Web">WWW</acronym> 
  • <abbr title="etcetera">etc.</abbr> 
    • ---

    改变文字方向：&lt;bdo dir="rtl"&gt;Here is some Hebrew text&lt;/bdo&gt;

    8.1 块引用：

  • <blockquote>长引用</blockquote> #浏览器会插入换行和外边距 
  • <q>短引用</q> #浏览器不会有任何特殊的呈现 
    • ---

    删除字效果和插入字效果：&lt;p&gt;一打有 &lt;del&gt;二十&lt;/del&gt; &lt;ins&gt;十二&lt;/ins&gt; 件。&lt;/p&gt;
    显示效果：

    一打有 二十 十二 件。

    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>是空标签&lt;img src="url" /&gt;，即没有闭合标签。

    图像标签

    替换文本属性（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>，有些浏览器不会显示空格单元边框，为避免这种情况，最好加入一个空格占位符&amp;nbsp;

    8.8.2 表格标签

    | 表格| 描述 |------ | <table>| 定义表格 | <caption>| 定义表格标题 | <th>| 定义表格的表头 | <tr>| 定义表格的行 | <td>| 定义表格单元 | <thead>| 定义表格的页眉 | <tbody>| 定义表格的主体 | <tfoot>| 定义表格的页脚 | <col>| 定义用于表格列的属性 | <colgroup>| 定义表格列的组

    8.8.3 杂项：

    表格标题:<caption>标签
    横跨两列的单元格: colspan属性&lt;th colspan="2"&gt;电话&lt;/th&gt;
    横跨两行的单元格: rowspan属性&lt;th rowspan="2"&gt;电话&lt;/th&gt;
    表格内标签
    单元格边距：cellpadding属性：&lt;table border="1" cellpadding="10"&gt;
    单元格间距：cellspacing属性：&lt;table border="1" cellspacing="10"&gt;
    向表格添加背景颜色：&lt;table border="1" bgcolor="red"&gt;
    向表格添加背景图像：&lt;table border="1" background="/i/eg_bg_07.gif"&gt;
    向表格单元添加背景颜色：&lt;td bgcolor="red"&gt;First&lt;/td&gt;
    向表格单元添加背景图像&lt;td background="/i/eg_bg_07.gif"&gt; Second&lt;/td&gt;
    表格align属性
    框架(fram)属性:&lt;table frame="above"&gt;