18910140161

Html

首页 >> 前端开发 >> Html

html练习题练习 - luxcon4008626116

顺晟科技

2022-09-15 19:32:25

264

html练习题练习

<!doctype html>
<html>
<head>
<meta charset="utf8"><!--用于防止出现中文乱码-->
<title>我的第一个HTML页面</title>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
<base target="_blank" />
</head>

<body>
<h1>我通过外部样式表进行格式化。</h1>
<p>我也一样！</p>
</head>

<body bgcolor="Aquamarine "text="black">

<!--对body的背景颜色进行设置,具体颜色的代码记不住，可以通过html网络手册进行查询后编写-->

<h1 align="center">这里是首页</h1>
<p>body 元素的内容会显示在浏览器中。</p>
<p>title 元素的内容会显示在浏览器的标题栏中。</p>

<!--简单段落举例-->
<p>这是段落1 </p>
<p>这是段落2 </p>
<p>这是段落3 </p>
<p>段落元素由P标签定义</p>

<!--段落行数依赖于浏览器窗口的大小，如果浏览器大小改变，将改变段落中的行数。-->
<p>在这个段落里
有许多
许多
行
</p>

<!--诗歌问题,浏览器会自动忽略源代码里的排版，省略了多余的空格和换行-->
<h1>静夜思></h1>
<p>床前明月光，
疑是地上霜。
举头望明月，
低头思故乡。
</p>
<!--利用br代码，来实现空行的功能，举例如下-->
<h1 align="center">利用br代码，来实现空行的功能，举例如下</h1>
<p>你好<br/>中国<br/>我<br/>来自<br/>美国
<br/>
<br/>
<br/>
很高兴来到中国。<hr/>
</p>
<!--几个标题的应用举例-->
<h1>这个是标题1</h1>
<h2>这个是标题2</h2>
<h3>这个是标题3</h3>
<h4>这个是标题4</h4>
<h5>这个是标题5</h5>
<h6>这个是标题6</h6>
<p><strong>备注:</strong>请仅仅把标题标签用于标题文件。而不用仅仅为了产生粗体文本而使用它们。请使用其他标签或用CSS代替</p>
<!--如何把标题进行居中显示-->
<h1 align="center">This is heading 1</h1>
<p>上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。</p>

<!--水平线标签hr的用法举例-->
<p>标签定义水平线：</p>
<hr/>
<p>这是段落。</p>
<hr/>
<p>这是例外一个段落</p><hr/>
<p>这是段落</p>
<!--html链接设置,请仔细观察代码target的用法与区别-->
<h1 align="center">链接设置,请仔细观察代码target的用法与区别</h1>

<a href="http://www.luxcon.cn">宁波乐控智能科技有限公司</a><!--原来页面直接跳转打开-->
<a href="http://www.luxcon.cn"target="_blank">宁波乐控智能科技有限公司</a><!--跳转到新的页面打开-->
<!--对一张图片进行链接设置-->
<a href="http://baike.baidu.com/item/马蓉/64853""><img src="http://img1.dzwww.com:8080/tupian/20160823/90/1386535136774793718.jpg" width="250" height="350" /></a>

<a href="http://baike.baidu.com/item/马蓉/64853"target=_"blank><img src="/uploads/image/20220915/1471230061571.jpg"width="300"height="350"/></a>

<p>
<b>This text is bold<q>定义粗体文本。</q></b>

<br />

<strong>This text is strong<q>把文本定义为语气更强的强调的内容。</q></strong>

<br />

<big>This text is big<q>标签可以很容易地放大字体。</q></big><!--浏览器显示包含在 <big> 标签和其相应的 </big> 标签之间的文字时，其字体比周围的文字要大一号。但是，如果文字已经是最大号字体，这个 <big> 标签将不起任何作用。-->

<br />

<em>This text is emphasized<q>把文本定义为强调的内容。</q></em><!--类同于斜体-->

<br />

<i>This text is italic<q>标签显示斜体文本效果。</q></i>

<br />

<small>This text is small<q>标签呈现小号字体效果。</q></small>

<br />

This text contains
<sub>subscript<q>标签可定义下标文本。</q></sub><!--无论是 <sub> 标签还是和它对应的 <sup> 标签，在数学等式、科学符号和化学公式中都非常有用。-->

<br />

This text contains
<sup>superscript<q> 标签可定义上标文本。</q></sup>
</p>
<!--预格式文本,如pre标签的用法-->
<pre>
这是
预格式文本。
它保留了 空格
和换行。
</pre>

<p>pre 标签很适合显示计算机代码：</p>

<pre>
for i = 1 to 10
print i
next i
</pre>
<!--计算机输出标签,此例演示不同的计算机输出标签的显示效果。-->
<h1 align="center">计算机输出标签，此例演示不同的计算机输出标签的显示效果。</h1>

<code>Computer code<q>定义计算机代码文本。</q></code>
<br />
<kbd>Keyboard input<q>定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。</q></kbd>
<br />
<tt>Teletype text<q> 标签呈现类似打字机或者等宽的文本效果。</q></tt><!--<tt> 标签和必需的 </tt> 结束标签告诉浏览器，要把其中包含的文本显示为等宽字体。对于那些已经使用了等宽字体的浏览器来说，这个标签在文本的显示上就没有什么特殊效果了。-->

<br />
<samp>Sample text<q>定义样本文本。</q></samp>
<br />
<var>Computer variable<q>标签表示变量的名称，或者由用户提供的值。</q></var><!--<var> 标签是计算机文档中应用的另一个小窍门，这个标签经常与 <code> 和 <pre> 标签一起使用，用来显示计算机编程代码范例及类似方面的特定元素。-->
<br />
<p>
<b>注释：</b>这些标签常用于显示计算机/编程代码。
</p>
<h1 align="center">此例演示如何在 HTML 文件中写地址。标签address的用法</h1>
<address>
Written by <a href="mailto:webmaster@example.com">王宝强</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
<h1 align="center">本利演示缩写的用法，标签abbr与acronym</h1>
<abbr title="luxcon">lx</abbr>
<br />
<acronym title="宁波乐控智能科技有限公司">乐控科技</acronym>

<p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>

<p>仅对于 IE 5 中的 acronym 元素有效。</p>

<p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>

<h1 align=“center">用标签bdo改变文字的方向</h1>
<p><i>
如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；</i>
</p>

<bdo dir="rtl">
Here is some Hebrew text
</bdo>
<bdo dir="rtl">你好我好大家好</bdo><hr/>
<bdo dir="ltr">你好我好大家好</bdo>

<p align="center"><strong><big>
本例讲解块引用，使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。</big></strong>
</p>
这是长的引用：
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>
这是短的引用：
<q>
这是短的引用。
</q>

<h1 align="center">删除效果标签del,插入效果ins,（带有下划线）</h1>
<p>截止2016年8月19日
乐控按摩椅共有 <del>79</del> <ins>81</ins> 台。</p>

<p>大多数浏览器会改写为删除文本和下划线文本。</p>

<p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>
<h1 align="center">HTML链接实例介绍</h1>
<a href="/lekong/Login.html">文本1</a> 是一个指向本网站中的一个页面的链接。采用直接跳转的链接方式</p>
<a href="/lekong/Login.html"target="_blank">文本2</a> 是一个指向本网站中的一个页面的链接。采用新窗口打开的链接方式</p>

<p><a href="http://www.luxcon.cn">本文本3</a> 是一个指向万维网上的页面的链接。采用直接跳转的链接方式</p>
<p><a href="http://www.luxcon.cn"target="blank">本文本4</a> 是一个指向万维网上的页面的链接。采用新窗口打开的链接方式</p>
<p>本次采用图片进行链接跳转</p><hr/>
<a href="http://www.luxcon.cn"><img src="img/lx.jpg"></a><p>直接跳转</p>
<a href="http://www.luxcon.cn"target="_blank"><img src="img/lx.jpg"></a><p>通过新窗口打开</p>
<h2 align="center">本实例介绍怎么链接到同一页面里的不同位置</h2>
<p>
<pre><a href="#d4">查看 第四章。</a> <a href="#d6">查看 第六章。</a> <a href="#d15">查看 第十五章。</a></pre>
</p>

<h2>第一章</h2>
<p>This chapter explains ba bla bla</p>

<h2>第二章</h2>
<p>This chapter explains ba bla bla</p>

<h2>第三章</h2>
<p>This chapter explains ba bla bla</p>

<h2><a name="d4">第四章</a></h2>
<p>This chapter explains ba bla bla</p>

<h2>第五章</h2>
<p>This chapter explains ba bla bla</p>

<h2><a name="d6">第六章</a></h2>
<p>This chapter explains ba bla bla</p>

<h2>第七章</h2>
<p>This chapter explains ba bla bla</p>

<h2>第八章</h2>
<p>This chapter explains ba bla bla</p>

<h2>第九章</h2>
<p>This chapter explains ba bla bla</p>

<h2>第十章</h2>
<p>This chapter explains ba bla bla</p>

<h2>第十一章</h2>
<p>This chapter explains ba bla bla</p>

<h2>第十二章</h2>
<p>This chapter explains ba bla bla</p>

<h2>第十三章</h2>
<p>This chapter explains ba bla bla</p>

<h2>第十四章</h2>
<p>This chapter explains ba bla bla</p>

<h2><a name="d15">第十五章</a></h2>
<p>This chapter explains ba bla bla</p>

<h1 align="center">跳出框架</h1>
<p>被锁在框架中了吗？</p>

<a href="jiaochen.html"
target="_top">请点击这里！可以直接跳转到首页</a>

<p align="center">创建电子邮件链接</p>
<p>
这是邮件链接：
<a href="mailto:someone@microsoft.com?subject=你好%20马蓉">发送邮件</a>
</p>

<p>
<b>注意：</b><i>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。</i>
</p>

<p>
这是另一个 mailto 链接：
<a href="mailto:product@luxcon.cn?cc=wang_xi_jiang@126.com&bcc=luxcon@163.com&subject=公司%20开会&body=各%20位%20同%20事%20，%20今%20天%20开会">发送邮件！</a>
</p>

<p>
<b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
</p>

<p align="center"><b>每个表格由 table 标签开始。</b></p>
<p align="center"><b>每个表格行由 tr 标签开始。</b></p>
<p align="center"><b>每个表格数据由 td 标签开始。</b></p>
<h4>一列:</h4>
<table border="1">
<tr><td>100</td></tr>
</table>

<h4>一行三列:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>

<h4>两行三列:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

<h3>表格边框粗细调整</h3>

<h4>带有普通的边框，使用border="1"</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>带有粗的边框，使用border="8"</h4>
<table border="8">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>

</table>

<h4>带有很粗的边框，使用border="15"</h4>
<table border="15">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>


<h3 align="center">如下通过两种方式来实现表格边框为零，即没有边框</h3>
<h4>这个表格没有边框：</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
<td>400</td>
</tr>
<tr>
<td>500</td>
<td>600</td>
<td>700</td>
<td>800</td>
</tr>
</table>
<h4>这个表格也没有边框，通过设置border="0"来实现</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
<td>400</td>
</tr>
<tr>
<td>500</td>
<td>600</td>
<td>700</td>
<td>800</td>
</tr>
</table>
<h4>表头：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th>电话</th>
<th>电话</th>
</tr>
<tr>
<td>王北</td>
<td>0022</td>
<td>444444</td>
</tr>
</table>
<h4>垂直的表头：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>王北</td>
</tr>
<tr>
<th>电话</th>
<td>11233</td>
</tr>
</tr>
<tr>
<th>电话</th>
<td>1122553</td>
</tr>
</table>
<hr/>
<table border="1">
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td></td>
<td>Some text</td>
</tr>
</table>

<p>正如您看到的，其中一个单元没有边框。这是因为它是空的。在该单元中插入一个空格后，仍然没有边框。</p>

<p>我们的技巧是在单元中插入一个 no-breaking 空格。</p>

<p>no-breaking 空格是一个字符实体。如果您不清楚什么是字符实体，请阅读关于字符实体的章节。</p>

<p>no-breaking 空格由和号开始 ("&")，然后是字符"nbsp"，并以分号结尾(";")。</p>
<hr/>
<h4>通过标签caption来设置标题</h4>
<table border="6">
<caption>我的标题</caption>
<tr>
<td>100</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>400</td>
<td>300</td>
<td>600</td>
</tr>
<h2 align="center">通过colspan和rowspan两个元素来实现对单元格的合并</h2>
<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">电话号码</th>
</tr>
<tr>
<td>王北</td>
<td>2513131</td>
<td>4545646</td>
</tr>
</table>
<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
<table border="1">
<tr>
<td>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</td>
<td>这个单元包含一个表格：
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>这个单元包含一个列表：
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>

<h4>没有 cellpadding：</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

<h4>带有 cellpadding：</h4>
<table border="1"
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>没有 cellspacing：</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

<h4>带有 cellspacing：</h4>
<table border="1"
cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

<h4>背景颜色：</h4>
<table border="1"
bgcolor="red">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

<h4>背景图像：</h4>
<table border="1"
background="img/002.png">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

<table width="400" border="1">
<tr>
<th align="left">消费项目....</th>
<th align="right">一月</th>
<th align="right">二月</th>
</tr>
<tr>
<td align="left">衣服</td>
<td align="right">$241.10</td>
<td align="right">$50.20</td>
</tr>
<tr>
<td align="left">化妆品</td>
<td align="right">$30.00</td>
<td align="right">$44.45</td>
</tr>
<tr>
<td align="left">食物</td>
<td align="right">$730.40</td>
<td align="right">$650.00</td>
</tr>
<tr>
<th align="left">总计</th>
<th align="right">$1001.50</th>
<th align="right">$744.65</th>
</tr>
</table>
<p><b>注释：</b>frame 属性无法在 Internet Explorer 中正确地显示。</p>

<p>Table with frame="box":</p>
<table frame="box">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>

<p>Table with frame="above":</p>
<table frame="above">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>

<p>Table with frame="below":</p>
<table frame="below">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>

<p>Table with frame="hsides":</p>
<table frame="hsides">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>

<p>Table with frame="vsides":</p>
<table frame="vsides">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>

<h4>一个无序列表：</h4>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
<h4>本例演示有序列表</h4>
<ol>
<li>咖啡</li>
<li>牛奶</li>
<li>白糖</li>
</ol>
<ol start="10">
<li>咖啡</li>
<li>牛奶</li>
<li>白糖</li>
</ol>

<h4>disc项目符号列表：</h4>
<ul type="disc">
<li>苹果</li>
<li>香蕉</li>
<li>梨头</li>
<li>草莓</li>
<li>柠檬</li>
</ul>
<h4>circle项目符号列表：</h4>
<ul type="circle">
<li>苹果</li>
<li>香蕉</li>
<li>梨头</li>
<li>草莓</li>
<li>柠檬</li>
</ul>

<h4>square项目符号列表：</h4>
<ul type="square">
<li>苹果</li>
<li>香蕉</li>
<li>梨头</li>
<li>草莓</li>
<li>柠檬</li>
</ul>

<h3 align="center">有序列表的演示</h3>

<h4>数字列表：</h4>
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>

<h4>字母列表：</h4>
<ol type="A">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>

<h4>小写字母列表：</h4>
<ol type="a">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>

<h4>罗马字母列表：</h4>
<ol type="I">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>

<h4>小写罗马字母列表：</h4>
<ol type="i">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>

<h3 align="center">本例演示嵌套列表</h3>
<h4>一个嵌套列表：</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶</li>
<li>乌龙茶</li>
<li>菊花茶</li>
</ul>
<li>牛奶</li>
</ul>
<h3 align="center">多级嵌套列表：</h3>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶</li>
<ul>
<li>中国茶</li>
<li>非洲茶</li>
</ul>
</ul>
</li>
<li>牛奶</li>

</ul>

<h2>一个定义列表，元素dl/dt/dd的用法</h2>
<dl>
<dt>计算机</dt>
<dd>是用来计算的仪器......</dd>
<dt>显示器</dt>
<dd>是以视觉方式显示信息的装置......</dd>
</dl>
<h2 align="center">本例演示如何在html里创建文本域,type="text" name=""</h2>
<form>
姓；
<input type="text" name="firstname">
<hr/>
名：
<input type="text" name="lastname">
</form>

<h2 align="center">本例演示如何在html页面创建密码域。</h2>
<form>
用户：
<input type="text" name="user">
<br />
密码：
<input type="password" name="password">
</form>
<p>
请注意，当您在密码域中键入字符时，浏览器将使用项目符号来代替这些字符。
</p>
<h2 align="center">本例演示复选框怎么设置,type="checkbox"</h2>
<form>
我喜欢宝马：
<input type="checkbox" name="bmw"><br/>
我喜欢奔驰：
<input type="checkbox" name="BC"><br/>
我喜欢自行车：
<input type="checkbox" name="bike"><br/>
</form>

<h3 align="center">本例演示单选框的设置，type="radio" checked="checked"</h3>
<form>
男性；
<input type="radio" checked="checked" name="sex" value="male"/>
<br/>
女性：
<input type="radio" name="sex" value="female"/>
</form>
<p>当用户点击一个单选按钮时，该按钮会变成选中状态，其他所有按钮会变为非选中状态。</p>

<h2 align="center">本例演示如何创建一个简单的带有预选值的下拉列表框。下拉列表框是一个可选列表。</h2>
<form>
汽车品牌：
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

<h2 align="center">带有预选的下拉菜单</h2>
<form>
汽车品牌：
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>


<h2 align="center">本例演示如何创建一个文本域（多行文本输入控件）。用户可以在文本域中写入文本。在文本域中，可写入的字符字数不受限制。</h2>
<textarea cols="30" rows="5">
领先的 Web 技术教程 - 全部免费
在w3school，你可以找到你所需要的所有的网站建设教程。
从基础的HTML到XHTML，乃至进阶的XML、SQL、数据库、多媒体和WAP。
</textarea>

<p>您无法对本例进行编辑，因为我们的在线编辑器使用 textarea 进行输入，
而浏览器不允许 textarea 中存在另一个 textarea。</p>

<h3 align="center">本例演示如何创建一个按钮</h3>
<form>
<input type="button" value="下载">
</form>


<h3 align="center">本例演示如何在数据周围绘制一个带标题的框。</h3>
<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
</form>
<p>如果表单周围没有边框，说明您的浏览器太老了。</p>

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="王">
<br>
Last name:<br>
<input type="text" name="lastname" value="西江">
<br><br>
<input type="submit" value="Submit">
</form>

<p>If you click "Submit", the form-data will be sent to a page called "action_page.php".</p>

<form name="input" action="/html/html_form_action.asp" method="get">
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" checked="checked" />
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane" />
<br /><br />
<input type="submit" value="Submit" />
</form>

<p>如果您点击 "Submit" 按钮，您将把输入传送到名为 html_form_action.asp 的新页面。</p>

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

<form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain">

<h3>这个表单会把电子邮件发送到 W3School。</h3>
姓名：<br />
<input type="text" name="name" value="yourname" size="20">
<br />
电邮：<br />
<input type="text" name="mail" value="yourmail" size="20">
<br />
内容：<br />
<input type="text" name="comment" value="yourcomment" size="40">
<br /><br />
<input type="submit" value="发送">
<input type="reset" value="重置">

</form>

<p>
一副图像：
<img src="/uploads/image/20220915/04I58PICaWv_1024.jpg"width="128"height="128"/>
</p>
<p>
一副动画图像：
<img src="/uploads/image/20220915/13.gif"width="128"height="128"/>
</p>
<p>请注意，插入动画图像的语法与插入普通图像的语法是没有区别的。</p>

<h2>未设置对齐方式的图像：</h2>

<p>图像 <img src ="img/lx.jpg"> 在文本中</p>

<h2>已设置对齐方式的图像：</h2>

<p>图像 <img src="img/lx.jpg" align="bottom"> 在文本中</p>

<p>图像 <img src ="img/lx.jpg" align="middle"> 在文本中</p>

<p>图像 <img src ="img/lx.jpg" align="top"> 在文本中</p>

<p>请注意，bottom 对齐方式是默认的对齐方式。</p>

<p>
<img src ="img/lx.jpg" align ="left">
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
</p>

<p>
<img src ="img/lx.jpg" align ="right">
带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
</p>

 

<img src="img/lx.jpg" width="200" height="35">

<br />

<img src="img/lx.jpg" width="300" height="45">

<br />

<img src="img/lx.jpg" width="500" height="80">

<p>通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。</p>


<p>仅支持文本的浏览器无法显示图像，仅仅能够显示在图像的 "alt" 属性中指定的文本。在这里，"alt" 的文本是“向左转”。</p>

<p>请注意，如果您把鼠标指针移动到图像上，大多数浏览器会显示 "alt" 文本。</p>

<img src="img/lx.jpg" alt="宁波乐控智能科技有限公司" />

<p>如果无法显示图像，将显示 "alt" 属性中的文本：</p>

<img src="http://img5.imgtn.bdimg.com/it/u=153938114,572515731&fm=21&gp=0.jpg" alt="宁波乐控智能科技有限公司" />

<p>
您也可以把图像作为链接来使用：
<a href="orderform.html">
<img border="0" src="img/登录.jpg"width="100"height="50" />
</a>
</p>

<p>
在新的页面里打开：
<a href="orderform.html"target="_blank">
<img border="0" src="img/登录.jpg"width="100"height="50" />
</a>
</p>


<p>请把鼠标移动到图像上，看一下状态栏的坐标如何变化。</p>

<a href="/example/html/html_ismap.html">
<img src="img/登录.jpg" ismap />
</a>

<h2 align="center">利用style="text-decoration:none"来实现超链接不带下划线</h2>
<a href="http://www.luxcon.cn" style="text-decoration:none">
这是一个链接！
</a>

<h2 align="center">利用style="text-decoration:none"来实现超链接不带下划线</h2>
<a href="http://www.luxcon.cn" target="_blank" style="text-decoration:none">
在新页面里打开！
</a>

 

 

 

 

 

 

 

</body>

</html>

上一篇：2010年最新的100个免费HTML 下一篇：解析富格文本数据HTML
相关文章
推荐阅读
随机推荐
我们已经准备好了，你呢？
获取网站建设报价
2024我们与您携手共赢，为您的企业形象保驾护航！