HTML语言笔记（二）

最新推荐文章于 2021-06-26 13:13:51 发布

D介子

最新推荐文章于 2021-06-26 13:13:51 发布

阅读量340

点赞数

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/ds19991999/article/details/78854366

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

8.文本格式化

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

3行

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

改变文字方向：<bdo dir="rtl">Here is some Hebrew text</bdo>

8.1 块引用：

3行

 
    <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 外部样式表

当页面具有普遍性，能应用与多个页面时用外部样式表，通过更改一个文件来改变整个站点的外观

4行

 
    <head>  
      
 <link rel="stylesheet" type="text/css" href="mystyle.css">  
      
 </head>

8.5.2 内部样式表

当单个文件需要特别样式时，就可以使用内部样式表，即在head部分通过<style>标签定义内部样式表。

8行

 
    <head>  
      
 <style type="text/css">  
      
 body {background-color: red}  
      
 p {margin-left: 20px}  
      
 </style>  
      
 </head>

8.5.3 内联样式

当特殊的样式需要用到个别元素时用到，方法即在相关标签中使用样式属性，样式属性可以包含任何 CSS 属性。

5行

 
    <!-- 以下实例显示出如何改变段落的颜色和左外边距 -->  
      
 <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 属性 - 创建指向另一个文档的链接

8行

 
    <!-- 文字超链接 -->  
      
 <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）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接。

3行

 
    <!-- 锚，显示在页面上的文本 -->  
      
 <a name="lable">锚

注意：

1.锚的名称可以是任何你喜欢的名字
2.您可以使用 id 属性来替代 name 属性，命名锚同样有效。
3.假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。

实例：

7行

 
    <!-- 在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是跳出框架，直接进入文档

10行

 
    <!-- 在新窗口中打开文档 -->  
      
 <html>  
      
 <body>  
      
 <a href="http://www.w3school.com.cn/"  
      
 target="_blank">Visit W3School!</a>  
      
 </body>  
      
 </html>

8.7 图像

图像标签<img>和源属性<Src>，其中<img>是空标签<img src="url" />，即没有闭合标签。

图像标签

<img>: 定义图像

<map>: 定义图像地图(图像映射)

<area>: 定义图像地图中可点击区域

替换文本属性（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>

图像映射

7行

 
    <img  
      
 src="/i/eg_planets.jpg"  
      
 border="0" usemap="#planetmap"  
      
 alt="Planets" />  
      
 <map name="planetmap" id="planetmap">

图像转化为图像映射

4行

 
    <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：

8行

 
    <table border="1">  
      
 <tr>  
      
 <td>100</td>  
      
 <td>200</td>  
      
 <td>300</td>  
      
 </tr>  
      
 </table>

示例2（表格边框）:

border是边框属性，不定义的话不显示边框
带有普通的边框border="1"
带有粗的边框border="8"
带有很粗的边框border=“15”

11行

 
    <table border="1">  
      
 <tr>  
      
 <td>First</td>  
      
 <td>Row</td>  
      
 </tr>   
      
 <tr>  
      
 <td>Second</td>  
      
 <td>Row</td>  
      
 </tr>  
      
 </table>

表头:
表格的表头采用<th>标签进行定义，一般显示为粗体。

5行

 
    <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">

D介子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML语言笔记（二）

8.文本格式化标签：预格式文本，它保留了空格和换行。标签：粗体常用于计算机/编程title属性，缩写和首字母缩写： 3行WWW etc. 改变文字方向：Here is some Hebrew text8.1 块引用：
复制链接

扫一扫