<pre>
此例演示如何使用 pre 标签
对空行和 空格
进行控制
</pre>
效果:
此例演示如何使用 pre 标签
对空行和 空格
进行控制
<q>~~~~~~~~~~~~~~~~</q>
效果:为短文档使用双引号
<blockquote></blockquote>
效果:为长文档使用双引号
<del>blue</del> <ins>red</ins>
效果: blue(把它划掉) red(在它下面划下划线)
<h1 style="text-align:center;">居中对齐的标题</h1>
居中对齐的标题
style="font-family:verdana;font-size:110%;color:green"
效果:设置文本的字体,大小,颜色
<a href="http://www.w3cschool.cn/" style="text-decoration:none;">访问 w3cschool.cn!</a>
效果:没有下划线的链接
<link rel="stylesheet" type="text/css" href="/statics/demosource/styles.css">
链接外部样式
<p>创建图片链接:
<a href="http://www.w3cschool.cn/html/html-tutorial.html">
<img src="/statics/images/course/smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
效果:创建图片链接
<a href="http://www.w3cschool.cn/" target="">访问W3Cschool教程!</a>
<p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。</p>
<p>跳出框架?</p>
<a href="http://www.w3cschool.cn/" target="_top">点击这里!</a> ?????????????
<p>
<img src="/statics/images/course/smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> 一个带图片的段落,图片浮动在这个文本的左边。
</p>
效果:使图片出现在左边也可以是右边
<th>Name</th>
创建表头
<caption>Monthly savings</caption>
创建标签
<th colspan="2">Telephone</th>
跨两列的表格
<th rowspan="2">Telephone:</th>
跨两行的表格
<table border="1"
cellpadding="10"></table>
使表格的单元格内的间距为10
<table border="1" cellspacing="0"></table>
使表格间的距离为0
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
效果:产生无序列表
<ol>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
效果:产生有序列表
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
效果:A.**********
B.**********
C.**********
D.**********
其他的类型同理:如,a,b,c,d I II III IIII等
<ul style="list-style-type:disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
产生无序的列表:主要是前面的项目符号不同如:。。。。 ...... 主要是type 后面的单词不同如:circle,square
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
此例演示如何使用 pre 标签
对空行和 空格
进行控制
</pre>
效果:
此例演示如何使用 pre 标签
对空行和 空格
进行控制
<q>~~~~~~~~~~~~~~~~</q>
效果:为短文档使用双引号
<blockquote></blockquote>
效果:为长文档使用双引号
<del>blue</del> <ins>red</ins>
效果: blue(把它划掉) red(在它下面划下划线)
<h1 style="text-align:center;">居中对齐的标题</h1>
居中对齐的标题
style="font-family:verdana;font-size:110%;color:green"
效果:设置文本的字体,大小,颜色
<a href="http://www.w3cschool.cn/" style="text-decoration:none;">访问 w3cschool.cn!</a>
效果:没有下划线的链接
<link rel="stylesheet" type="text/css" href="/statics/demosource/styles.css">
链接外部样式
<p>创建图片链接:
<a href="http://www.w3cschool.cn/html/html-tutorial.html">
<img src="/statics/images/course/smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
效果:创建图片链接
<a href="http://www.w3cschool.cn/" target="">访问W3Cschool教程!</a>
<p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。</p>
<p>跳出框架?</p>
<a href="http://www.w3cschool.cn/" target="_top">点击这里!</a> ?????????????
<p>
<img src="/statics/images/course/smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> 一个带图片的段落,图片浮动在这个文本的左边。
</p>
效果:使图片出现在左边也可以是右边
<th>Name</th>
创建表头
<caption>Monthly savings</caption>
创建标签
<th colspan="2">Telephone</th>
跨两列的表格
<th rowspan="2">Telephone:</th>
跨两行的表格
<table border="1"
cellpadding="10"></table>
使表格的单元格内的间距为10
<table border="1" cellspacing="0"></table>
使表格间的距离为0
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
效果:产生无序列表
<ol>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
效果:产生有序列表
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
效果:A.**********
B.**********
C.**********
D.**********
其他的类型同理:如,a,b,c,d I II III IIII等
<ul style="list-style-type:disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
产生无序的列表:主要是前面的项目符号不同如:。。。。 ...... 主要是type 后面的单词不同如:circle,square
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
效果:自定义列表
<a href="mailto:yy@imooc.com?subject=观了不起的盖茨比有感&body=你好,对此评论有些想法">对此影评有何感想,发送邮件给我</a>
效果:Mailto后为收件人地址,cc后为抄送地址,bcc后为密件抄送地址,subject后为邮件的主题,body后为邮件的内容,如果Mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的每一个都以“&”开头。
<img src = "myimage.gif" alt = "My Image" title = "My Image" />
1、src:标识图像的位置;
2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;
3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);