HTML 部分标签解说 -

huangyongxing310

浏览: 495988 次
性别:
来自: 广州

最近访客更多访客>>

hiroada

lixiaoxin

u012363178

wangyy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

HTML 部分标签解说

博客分类：

HTML

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

分享到：

Hash、Hash表 | URI和URL的区别、URL编码

2016-09-05 11:51
浏览 756
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML 部分标签解说

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML 部分标签解说

评论

发表评论

相关推荐

定时调用函数功能实现

百度人脸识别

点击DIV触发上传文件的方法

前端格式化工具与检测工具选择与使用

defineProperty Array push 监听

weuiJsLayer.js

dataViewCommonJs

setFormData

jQuery Validate 校验

附件下载和导出

miniUITest

from转JSON的Obj 、js空判断、 js数字判断

HTML input 表单

最近访客更多访客>>