HTML基础教程2
1. HTML段落
1. HTML段落
段落是通过<p>标签来定义的.
<html> <body> <p>this is a paragraph</p> </body> </html>
2. HTML折行
不产生一个新段落的情况下进行换行(新行),请使用<br />标签(<br />是一个空的HTML元素):
<html> <body> <p>this is<br /> a paragraph<br />with the breaks</p> </body> </html>程序输出:
2. HTML文本格式化
1. 文本格式化标签
| 标签 | 描述 |
| <b> | 定义粗体文本 |
| <big> | 定义大号字 |
| <em> | 定义着重文字 |
| <i> | 定义斜体字 |
| <small> | 定义小号字 |
| <strong> | 定义加重语气 |
| <sub> | 定义下标字 |
| <sup> | 定义上标字 |
| <ins> | 定义插入字 |
| <del> | 定义删除字 |
2. "计算机输出"标签
| 标签 | 描述 |
| <code> | 定义计算机代码 |
| <kdb> | 定义键盘码 |
| <samp> | 定义计算机代码样本 |
| <tt> | 定义打字机代码 |
| <var> | 定义变量 |
| <pre> | 定义预格式文本 |
3. 引用和术语定义
| 标签 | 描述 |
| <abbr> | 定义缩写 |
| <acronym> | 定义首字母缩写 |
| <address> | 定义地址 |
| <bdo> | 定义文字方向 |
| <blockquote> | 定义长的引用 |
| <q> | 定义短的引用语 |
| <cite> | 定义引用,引证 |
| <dfn> | 定义一个定义项目 |
4. HTML文本格式化实例
1. 文本格式化
<html> <body> <!-- 定义粗体文本--> <b>this text is bold</b> <br /> <!-- 定义加重语气--> <strong>this text is strong</strong> <br /> <!-- 定义大号字--> <big>this text is big</big> <br /> <!-- 定义着重文字--> <em>this text is emphasized</em> <br /> <!-- 定义斜体字--> <i>this text is italic</i> <br /> <!-- 定义小号字--> <small>this text is small</small> <br /> this text contains <!-- 定义下标字--> <sub>subscript</sub> <br /> this text contains <!-- 定义上标字--> <sup>superscript</sup> </body> </html>程序输出:
2. 预格式文本
在HTML中,多个空格符号(空格,制表符,换行符)是会自动合并成一个空格的.但是如果我们想要保留空格符号,则就需要用到标签<pre>
<html> <meta charset="utf-8" /> <body> <pre> 这是 预格式文本. 它保留了 空格 和换行 </pre> <p>pre 标签很适合显示计算机代码:</p> <pre> for i = to 10 print i next i </pre> </body> </html>程序输出:
3. 计算机输出标签
<html> <meta charset="utf-8" /> <body> <code>Computer code</code> <br /> <kbd>Keyboard text</kbd> <br /> <tt>Teletype text</tt> <br /> <samp>Sample text</samp> <br /> <var>Computer variable</var> <br /> <p> <b>注释:</b>这些标签常用于显示计算机/编程代码 </p> </body> </html>程序输出:
4. 地址
<html> <meta charset="utf-8" /> <body> <address> Written by <a href="mailto:[email protected]">lei chaojian</a>.<br /> Visit us at:<br /> Example.com<br /> Box 564,Disneyland<br /> USA </address> </body> </html>程序输出:
5. 缩写和首字母缩写
<html> <meta charset="utf-8" /> <body> <abbr title="etcetera">etc.</abbr> <br /> <acronym title="World Wide Web">WWW</acronym> <p>鼠标移到缩略词上,即可显示表达的完整版本</p> </body> </html>程序输出:
6. 定义文字方向
<html> <meta charset="utf-8" /> <body> <!-- 文本从右向左输出--> <bdo dir="rtl"> here is some hebrew text </bdo> </body> </html>程序输出:
7. 删除字效果和插入字效果
<html> <meta charset="utf-8" /> <body> <p>一打有<del>二十</del><ins>十二</ins>件</p> </body> </html>程序输出:
3. HTML CSS
1. 三个实例
1. 使用添加到<head>部分的样式信息对HTML进行格式化
<html>
<head>
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
</head>
<body>
<h1>header 1</h1>
<p>a paragraph.</p>
</body>
</html>
2. 没有下划线的链接
<html> <head> <meta charset="utf-8" /> </head> <body> <a href="http://www.w3school.com.cn" style="text-decoration:none"> 这是一个链接 </a> </body> </html>
3. 链接到一个外部样式表
<html> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="http://www.w3school.com.cn/html/csstest1.css"> </head> <body> <h1>我通过外部样式表进行格式化</h1> <p>我也一样!</p> </body> </html>
而csstest1.css的代码如下:
h1
{
color: green;
border: 1pt solid black;
}
p
{
color: red;
background-color:#EFE7D6;
border: 1pt solid black;
}
div
{
color: #FFFFFF;
background-color:#000000;
}
span
{
color: #000000;
background-color:#FFFFFF;
}
2. 如何使用样式
1. 外部样式表
当样式需要被用到很多页面的时候,外部样式表将是理想的选择.
<head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="http://www.w3school.com.cn/html/csstest1.css"> </head>
2. 内部样式表
当单个文件需要特别样式时,就可以使用内部样式表.在<head>中使用<style>来定义内部样式表.
<head>
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
</head>
3. 内联样式
当特殊的样式需要应用到个别元素,就可以使用内联样式.
<p style="color:red; margin-left:20px"> This is a paragraph </p>
3. 标签总结
| 标签 |
描述 |
| <style> |
定义样式定义 |
| <link> |
定义资源引用 |
| <div> |
定义文档中的节或区域(块级) |
| <span> |
规定文本的字体,字体尺寸,字体颜色 |
4. HTML链接
1. 链接实例
1. 创建超级链接
<html> <meta charset="utf-8" /> <body> <p><a href="C:/Users/fzyz_sb/Desktop/tt.html">本文本</a>是指向本地的一个页面的链接</p> <p><a href="http://www.w3school.com.cn">本文本</a>是一个指向万维网的页面的链接</p> </body> </html>
而当我点击第一个超链接后:
2. 把图像作为超链接
<html> <meta charset="utf-8" /> <body> <p> 可以使用图像作为超链接 <a href="http://my.oschina.net/voler"> <img border="0" src="C:/Users/fzyz_sb/Desktop/个人照片.png" /> </a> </p> </body> </html>
2. HTML链接--target属性
使用target属性,可以定义被链接的文档在何处显示.例如下例中文档会在新窗口中打开:
<a href="http://www.w3school.com.cn/" target="_blank">visit w3school</a>
3. HTML链接--name属性
<html> <meta charset="utf-8" /> <body> <a href="#tips">跳到第三段</a> <p>第一段</p> <!--这里代表很多段--> <p>第二段</p> <a name="tips">第三段</a> <p>第四段</p> </body> </html>
5. HTML图像
1. 一个实例
<html> <meta charset="utf-8" /> <body> <p> 一幅图像: <img src="C:/Users/fzyz_sb/Desktop/eg_mouse.jpg" width="128" height="128" /> </p> <p> 一幅动态图像 <img src="C:/Users/fzyz_sb/Desktop/eg_cute.gif" width="50" height="50" /> </p> </body> </html>
2. 图像的属性
在HTML中,图像由<img>标签定义.而要显示图像,则需要源属性(src).
但是,当我们的图像无法加载的时候,最好需要"替换文本属性Alt"(显示文本来代替显示图片,在图片无法加载的情况下):
<img src="boat.gif" alt="Big Boat" />
3. 更多的图片实例
1. 背景图片
<html> <meta charset="utf-8" /> <body background="C:/Users/fzyz_sb/Desktop/eg_background.jpg"> <h3>图像背景</h3> <p>gif和jpg文件均可用于HTML背景</p> <p>如果图像小于页面,图像会进行重复</p> </body> </html>
2. 排列图片
<html> <meta charset="utf-8" /> <body background="C:/Users/fzyz_sb/Desktop/eg_background.jpg"> <h2>未设置对齐方式的图像：</h2> <p>图像<img src="C:/Users/fzyz_sb/Desktop/eg_cute.gif">在文本中</p> <h2>已设置对齐方式的图像：</h2> <p>图像<img src="C:/Users/fzyz_sb/Desktop/eg_cute.gif" align="bottom">在文本中</p> <p>图像<img src="C:/Users/fzyz_sb/Desktop/eg_cute.gif" align="middle">在文本中</p> <p>图像<img src="C:/Users/fzyz_sb/Desktop/eg_cute.gif" align="top">在文本中</p> </body> </html>
3. 浮动图像
<html> <meta charset="utf-8" /> <body background="C:/Users/fzyz_sb/Desktop/eg_background.jpg"> <p> <img src ="C:/Users/fzyz_sb/Desktop/eg_cute.gif" align ="left"> 带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。 </p> <p> <img src ="C:/Users/fzyz_sb/Desktop/eg_cute.gif" align ="right"> 带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。 </p> </body> </html>
4. 调整图像尺寸
<html> <meta charset="utf-8" /> <body background="C:/Users/fzyz_sb/Desktop/eg_background.jpg"> <img src="C:/Users/fzyz_sb/Desktop/eg_cute.gif" width="50" height="50" /> <br /> <img src="C:/Users/fzyz_sb/Desktop/eg_cute.gif" width="100" height="100" /> <br /> <img src="C:/Users/fzyz_sb/Desktop/eg_cute.gif" width="200" height="200" /> <p>通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。</p> </body> </html>
5. 为图片显示替换文本
<html> <meta charset="utf-8" /> <body background="C:/Users/fzyz_sb/Desktop/eg_background.jpg"> <p>通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。</p> <p>仅支持文本的浏览器无法显示图像，仅仅能够显示在图像的 "alt" 属性中指定的文本。在这里，"alt" 的文本是“向左转”。</p> <p>请注意，如果您把鼠标指针移动到图像上，大多数浏览器会显示 "alt" 文本。</p> <img src="C:/Users/fzyz_sb/Desktop/eg_cute.gif" alt="向左转" /> <p>如果无法显示图像，将显示 "alt" 属性中的文本：</p> <img src="C:/Users/fzyz_sb/Desktop/eg_cute123.gif" alt="向左转" /> </body> </html>
6. 把图像转换为图像映射
<html> <meta charset="utf-8"> <body> <p>请点击图像上的星球，把它们放大。</p> <img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap"> <!--这里area定义图像地图中的可点击区域。即点击这些区域,则会超链接到href的网页中去--> <area shape="circle" coords="180,139,14" href ="/example/html/venus.html" target ="_blank" alt="Venus" /> <area shape="circle" coords="129,161,10" href ="/example/html/mercur.html" target ="_blank" alt="Mercury" /> <area shape="rect" coords="0,0,110,260" href ="/example/html/sun.html" target ="_blank" alt="Sun" /> </map> <p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p> </body> </html>
4. 小结
| 标签 | 描述 |
| <img> | 定义图像 |
| <map> | 定义图像地图 |
| <area> | 定义图像地图中的可点击区域 |