使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。

HTML 样式实例 - 背景颜色

background-color 属性为元素定义了背景颜色：

This is a heading

This is a paragraph.

font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸：

A heading

A paragraph.

text-align 属性规定了元素中文本的水平对齐方式：

This is a heading

将图像作为链接

表格的表头

表格的表头使用 标签进行定义。

表格中的空单元格

table border="1">

row 1, cell 1

row 1, cell 2

row 2, cell 1

无序列表:

一个无序列表：

有序列表 :

一个有序列表：

1. 咖啡
2. 茶
3. 牛奶

定义列表

Coffee

Black hot drink

Milk

White cold drink

表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。

表单使用表单标签（

单选按钮

复选框

表单的动作属性（Action）和确认按钮

实例：

简单的下拉列表

本例演示如何在 HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。

文本域

本例演示如何创建文本域（多行文本输入控件）。用户可在文本域中写入文本。可写入字符的字数不受。

This example cannot be edited

because our editor uses a textarea

for input,

and your browser does not allow

a textarea inside a textarea.

</p><p>The cat was playing in the garden.</p><p>创建按钮</p><p>创建框：</p><p><fieldset></p><p><legend>健康信息：</legend></p><p></fieldset></p><p>带有输入框和确认按钮的表单</p><p>带有复选框的表单</p><p>带有单选按钮的表单</p><p><h4>垂直的表头：</h4></p><p><table border="1"></p><p><tr></p><p> <th>姓名</th></p><p> <td>Bill Gates</td></p><p></tr></p><p><tr></p><p> <th>电话</th></p><p> <td>555 77 854</td></p><p></tr></p><p><tr></p><p> <th>电话</th></p><p> <td>555 77 855</td></p><p></tr></p><p></table></p><p>图解：姓名 Bill Gates</p><p> 电话 555 77 854</p><p> 电话 555 77 855</p><p>带有标题的表格</p><p>本例演示一个带标题 (caption) 的表格</p><p><table border="6"></p><p><caption>我的标题</caption></p><p><h4>横跨两列的单元格：</h4></p><p><table border="1"></p><p><tr></p><p> <th>姓名</th></p><p> <th colspan="2">电话</th></p><p></tr></p><p><h4>横跨两行的单元格：</h4></p><p><tr></p><p> <th rowspan="2">电话</th></p><p> <td>555 77 854</td></p><p></tr> </p><a class="downbb html2word" href="javascript:;" data-model="article" data-id="aechev">下载本文</a> <script type="text/javascript" src="https://jss.51dongshi.net/mwz/nrhou.js"></script></div> </mip-showmore> <div on="click:showmore01.toggle" data-closetext="收起全文" class="mip-showmore-btn">显示全文</div></section> <script type="text/javascript" src="https://jss.51dongshi.net/mwz/dajia.js"></script> <script type="text/javascript" src="https://jss.51dongshi.net/mwz/cnxh.js"></script> <script type="text/javascript" src="https://jss.51dongshi.net/mwz/cnxhhou.js"></script> <script type="text/javascript" src="https://jss.51dongshi.net/mwz/wntj.js"></script> <script type="text/javascript" src="https://jss.51dongshi.net/mwz/wntjhou.js"></script> <script type="text/javascript" src="https://jss.51dongshi.net/mwz/end.js"></script> <div style="display:none"><a href="https://m.51dongshi.net/wzztf/ae/aechev/">专题</a></div><iframe src="https://hits.51dongshi.net/?biao=ho_article&id=908507" border="0" frameborder="0" style="width: 0px; height: 0px"></iframe> <link rel="stylesheet" href="https://jss.51dongshi.net/js/fffz/css/box.css"> <script id="fffz" data-domain="//m.51dongshi.net" src="https://js.51dongshi.net/js/fffz/fffz.js"></script> <div class="foot_new"> <div class="footlogo"></div> <div class="copyright">动视 51dongshi.net 版权所有<br>Copyright © 2019-2025 </div> </div> </div><script type="text/javascript" src="https://jss.51dongshi.net/mwz/zuihou.js"></script> <script> $(function(){ var downbox_top = $('.downbox').offset().top-$(window).scrollTop(); $(window).scroll(function(){ if ($(window).scrollTop()>$('.downbox').offset().top+$('.downbox').height()) { if($('.downbb').length>0) $('.downbb').show() }else{ if($('.downbb').length>0) $('.downbb').hide() } }) }) </script> <div style="display:none;"><script>var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?de973f4fc4fc27c651135a4cd7781c2b";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script></div></body> </html>