csdn_spider/blog/ds19991999/原创-- HTML语言笔记(二).md

12 KiB
Raw 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;