HTML 部分标签解说

HTML 部分标签解说

<q>
<q> 元素定义短的引用
浏览器通常会为 <q> 元素包围引号。

实例:

<p>WWF 的目标是：<q>构建人与自然和谐共存的世界。</q></p>
输出：
WWF 的目标是"构建人与自然和谐相处的世界。"

<code>
<code> 元素不保留多余的空格和折行
实例

<!DOCTYPE html>
<html>
<body style="font-size:16px">

<p>code 元素不保留多余的空格和折行：</p>

<code>
var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
}
</code>

</body>
</html>

输出:
code 元素不保留多余的空格和折行：

var person = { firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue" }

<pre>
<!DOCTYPE html>
<html>
	<body style="font-size:16px">
	<p>code 元素不保留多余的空格和折行：</p>
	<p>如需解决该问题，您必须在 pre 元素中包围代码：</p>
	<code>
	<pre>
	var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
}
</pre>
</code>

</body>
</html>

输出:
code 元素不保留多余的空格和折行：

如需解决该问题，您必须在 pre 元素中包围代码：

 var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
}

HTML 注释标签

浏览器不会显示注释，但是能够帮助记录您的 HTML 文档。

图像背景(在body中加入background属性)

<html>
	<body background="/i/eg_background.jpg">
	<h3>图像背景</h3>
	</body>
</html>

<img>(图像)

<img src="/i/eg_mouse.jpg" width="200" height="200" align="bottom" alt="移到图片时提示内容" usemap="#planetmap">

<html>
<body>
<h2>未设置对齐方式的图像：</h2>
<p>图像 <img src ="/i/eg_cute.gif"> 在文本中</p>
<h2>已设置对齐方式的图像：</h2>
<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>
<p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p>
<p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p>
<p>请注意，bottom 对齐方式是默认的对齐方式。</p>
</body>
</html>

<p>
	您也可以把图像作为链接来使用：
	<a href="/example/html/lastpage.html">
		<img border="0" src="/i/eg_buttonnext.gif" />
	</a>
</p>

<map>
定义一个客户端图像映射,图像映射（image-map）指带有可点击区域的一幅图像。

图像地图

area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

map提供一个集合，area 提供的是一个区域的定位

<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），
所以我们应同时向 <map> 添加 id 和 name 属性。

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
	<area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
	<area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
	<area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>



<!DOCTYPE html>
<html>
	<body>
	<p>请把鼠标移动到图像上，看一下状态栏的坐标如何变化。</p> //显示<a>里的href
	<a href="/example/html/html_ismap.html">
		<img src="/i/eg_planets.jpg" ismap />	//加入ismap
	</a>
	</body>
</html>

<table>
<table>:定义表格
<caption>:定义表格标题。
<th>:定义表格的表头。(一列或一行的属性名)
<tr>:定义表格的行。(定义一行)
<td>:定义表格单元。(一人单元格的内容)
<thead>:定义表格的页眉。
<tbody>:定义表格的主体。
<tfoot>:定义表格的页脚。
<col>:定义用于表格列的属性。
<colgroup>:定义表格列的组。

<table
border="1" 		//border边框大小
bgcolor="red"		//
background="/07.gif" 	//表格添加背景颜色或背景图像，也可向td设置,
frame="box"		//"frame" 属性来控制围绕表格的边框.
cellspacing="10"	//单元格间距,单元格间距增加单元格之间的距离。
cellpadding="10">	//单元格填充来创建单元格内容与其边框之间的空白。
<caption>我的标题</caption>
<tr>
  <th colspan="2">姓名</th> //横跨两列的单元格
  <th rowspan="2">电话</th> //横跨两行的单元格
  <th>电话</th>
</tr>
<tr>
  <td align="left">Bill</td> //排列内容(左对齐)
  <td>555</td>
  <td>555</td>
</tr>
</table>

HTML 列表
<ul>无序列表
<ol>有序列表
<li>定义列表项
<dl>定义列表,每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<ol>
	<li>Coffee</li>
	<li>Milk</li>
</ol>

<dl>
	<dt>Coffee</dt>
	<dd>Black hot drink</dd>
	<dt>Milk</dt>
	<dd>White cold drink</dd>
</dl>

HTML Iframe

<iframe src="demo_iframe.htm" width="200" height="200" frameborder="0"></iframe> //设置属性值为 "0" 就可以移除边框

HTML 颜色
Color HEX:#0000FF
Color RGB:rgb(0,0,255)
颜色名:green

HTML 部分标签解说

猜你喜欢