学习笔记(2):HTML 常用标签的归纳
2013-06-07 14:46
561 查看
一、body 的属性：
bgcolor="#000000" 网页正文部分的背景色
background="../key/1.jpg" 注：地址只能用英文，背景图片，如果图片足够的大，它将盖住背景颜色bgcolor
text="#0000ff" 网页正文部分的文字的颜色
link="#ffffff" 超链接的颜色
alink="#cccccc" 鼠标按下超级链接时候文本的颜色 vlink="#cccccc" 被访问过的超级链接的颜色
leftmargin="20" 左缩进的长度，单位是像素
topmargin="30" 上缩进的长度，单位是像素
=============================================================================
二、格式标签
1、<pre>。。。</pre> 把包围起来的内容按原格式显示在浏览器上
2、<p>。。。</p> 段落标签，实质是：换行并加入一个空行
3、<br> 换行不产生空行
4、<center>。。。</center> 居中显示
5、<dl> 列表标签
<dt>中国城市</dt>
<dd>石家庄</dd>
<dd>唐山</dd>
<dd>廊坊</dd>
<dt>美国城市</dt>
<dd>通县</dd>
<dd>大兴</dd>
<dd>铁岭</dd>
</dl>
更多关于列表标签的内容：
6、<ul> 。。。。。。。。。。。。有序清单
<li></li>
<li></li>
<li></li>
</ul>
7、<ol> 。。。。。。。。。。。。无序清单
<li></li>
<li></li>
<li></li>
</ol>
==========================================================================
三、文本标签
1、<h1></h1> HTML中定义6个h标签来表示不同大小的字体，只能是1-6，不能是其他数字
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
2、<font color="#111111" size="12" face="隶书"> 字体设置标签 </font>
3、<b>这是粗体标签</b> <strong> 这也是粗体标签 </strong>
4、<em>斜体效果</em> <var>斜体效果<var> <cite>斜体效果<cite> <dfn>斜体效果</dfn>
5、<address>换行并且斜体</address>
6、<u>下划线标签</u> <strike>删除线标签</strike>
7、<big>变大标签</big> <small>变小标签</small>
8、<sub>上标</sub> <sup>下标</sup>
===========================================================================
四、超链接 <a>
1、普通的超链接： <a href="http://www.baidu.com" target="_blank"> 百度 </a>
target属性的取值有：_blank 在新窗口打开
_self 当前串口打开
_top 显示到顶层视窗
_parent 副框架显示
2、锚点连接：两个<a>...</a> 才能构成一个完整的锚点连接
<a href="#one"> 这是在定义一个锚点 </a>
<a name="one"> one </a> 当两个点位于同一页面是的写法
<a href="#two"> 这是在定义一个锚点 </a> 当two位于另一个名为key.html的页面
<a name="key.html#one"> one </a> 此时的写法为
=======================================================================================
五、图像标签 img
<img src="../img"/> 此时的路径最好写相对路径 ,img 标签的属性有：
src="" 这个用于确定图片的位置，是必须要有的属性
height="" width="" 高、宽
alt="" 替换图片的文字
hspace="" 与左右文本的距离
vspace="" 与上下文本的距离
lowsrc="" 低解析度的图像
===================================================================================
六、表格标签
<table> 表格的一般结构
<tr>
<td></td><td></td>
</tr>
<tr>
<td></td><td></td>
</tr>
</table>
table标签的属性：
width="20%" height="90" 分别表示 宽、高， 它们的大小既可以用百分比来描述，也可以用像素点描述
border="1" 边框粗细
bgcolor 整个表格的背景颜色
align="center/left/right" 水平对齐方式(表格相对于外面的元素)，选择三个参数中的某一个
valign="middle/top/bottom" 垂直对齐方式（同上）
cellspacing="5" 单元格之间的距离
cellpadding="3" 文字留白
bordercolor 边框颜色
tr标签的属性：
align valign 整行的单元格里 水平、竖直 对齐方式（文字相对于单元格）
bgcolor 本行所有单元格的背景色
td标签的属性：
width height
align valign 单元格里 水平、竖直 对齐方式（文字相对于单元格）当 tr中也定义了该属性，td的优先执行
colspan 合并纵列的属性值个单元格，该行少了属性值-1个单元格
rowspan 合并横列的属性值个单元格，该行的下面属性值-1个行少了一个单元格
============================================================================
七、frame框架
框架概念 ：
所谓框架便是网页画面分成几个框窗，同时取得多个 URL。只 要 <FRAMESET> <FRAME> 即可，而所有框架标记 要放在一个总起的 html 档，这个档案只记录了该框架 如何划分，不会显示任何资料，所以不必放入 <BODY> 标记，浏览这框架必须读取这档 案而不是其它框窗的档案。<FRAMESET> 是用以划分框窗，每一框窗由一个 <FRAME> 标 记所标示，<FRAME>必须在 <FRAMESET> 范围中使用。如下例：
<frameset cols="300,*"> 这就是一个简单的左边固定的框架，她由两个页面1.html 2.html组成
<frame name="hello" src="1.html">
<frame name="hi" src="2.html">
</frameset>
cols="300,*" 该属性表明是将框架左右切分，大小既可以用百分数也可以用像素点表示
rows="90,*" 该属性表明是将框架上下切分 两者一般去其一
frameborder="0" 该属性设定框架的边框，其值只有 0 和 1 ， 0 表示不要边框， 1 表示要显示边框
border="0" 该属性设定框架的边框厚度
bordercolor="#008000" 设定框架的边框颜色
framespacing="5" 表示框架与框架间的保留空白的距离
典型框架的代码示例：
1、上方固定框架代码：
<frameset rows="80,*" frameborder="2" border="10" framespacing="0">
<frame src="c.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
<frame src="b.html" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset>
2、上方固定，左边嵌套的框架
<frameset rows="80,*" cols="*" frameborder="5" border="2" framespacing="2">
<frame src="d.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
<frameset cols="80,*" frameborder="5" border="2" framespacing="2">
<frame src="c.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" />
<frame src="b.html" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset>
</frameset>
====================================================================================
七、表单
1、<form>。。。</form> 表单可以看做是用户向服务器提交数据的一种方式
form标签的属性：
1> method 用于确定表示向浏览器传值的方式 有post、get 两种方式
2>action 该属性表示表单提交的目标页面, 值是一个url
3>target 表示该表单内容被提交时，目标页面是否在新的窗口中打开。_self、_blank（在讲解a标签时已经解释过）
4>title 当光标移到表单的任何一个部分时所提示的文字
表单控件的总结请看：http://www.cnblogs.com/key1309/archive/2013/06/07/3123790.html
bgcolor="#000000" 网页正文部分的背景色
background="../key/1.jpg" 注：地址只能用英文，背景图片，如果图片足够的大，它将盖住背景颜色bgcolor
text="#0000ff" 网页正文部分的文字的颜色
link="#ffffff" 超链接的颜色
alink="#cccccc" 鼠标按下超级链接时候文本的颜色 vlink="#cccccc" 被访问过的超级链接的颜色
leftmargin="20" 左缩进的长度，单位是像素
topmargin="30" 上缩进的长度，单位是像素
=============================================================================
二、格式标签
1、<pre>。。。</pre> 把包围起来的内容按原格式显示在浏览器上
2、<p>。。。</p> 段落标签，实质是：换行并加入一个空行
3、<br> 换行不产生空行
4、<center>。。。</center> 居中显示
5、<dl> 列表标签
<dt>中国城市</dt>
<dd>石家庄</dd>
<dd>唐山</dd>
<dd>廊坊</dd>
<dt>美国城市</dt>
<dd>通县</dd>
<dd>大兴</dd>
<dd>铁岭</dd>
</dl>
更多关于列表标签的内容：
6、<ul> 。。。。。。。。。。。。有序清单
<li></li>
<li></li>
<li></li>
</ul>
7、<ol> 。。。。。。。。。。。。无序清单
<li></li>
<li></li>
<li></li>
</ol>
==========================================================================
三、文本标签
1、<h1></h1> HTML中定义6个h标签来表示不同大小的字体，只能是1-6，不能是其他数字
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
2、<font color="#111111" size="12" face="隶书"> 字体设置标签 </font>
3、<b>这是粗体标签</b> <strong> 这也是粗体标签 </strong>
4、<em>斜体效果</em> <var>斜体效果<var> <cite>斜体效果<cite> <dfn>斜体效果</dfn>
5、<address>换行并且斜体</address>
6、<u>下划线标签</u> <strike>删除线标签</strike>
7、<big>变大标签</big> <small>变小标签</small>
8、<sub>上标</sub> <sup>下标</sup>
===========================================================================
四、超链接 <a>
1、普通的超链接： <a href="http://www.baidu.com" target="_blank"> 百度 </a>
target属性的取值有：_blank 在新窗口打开
_self 当前串口打开
_top 显示到顶层视窗
_parent 副框架显示
2、锚点连接：两个<a>...</a> 才能构成一个完整的锚点连接
<a href="#one"> 这是在定义一个锚点 </a>
<a name="one"> one </a> 当两个点位于同一页面是的写法
<a href="#two"> 这是在定义一个锚点 </a> 当two位于另一个名为key.html的页面
<a name="key.html#one"> one </a> 此时的写法为
=======================================================================================
五、图像标签 img
<img src="../img"/> 此时的路径最好写相对路径 ,img 标签的属性有：
src="" 这个用于确定图片的位置，是必须要有的属性
height="" width="" 高、宽
alt="" 替换图片的文字
hspace="" 与左右文本的距离
vspace="" 与上下文本的距离
lowsrc="" 低解析度的图像
===================================================================================
六、表格标签
<table> 表格的一般结构
<tr>
<td></td><td></td>
</tr>
<tr>
<td></td><td></td>
</tr>
</table>
table标签的属性：
width="20%" height="90" 分别表示 宽、高， 它们的大小既可以用百分比来描述，也可以用像素点描述
border="1" 边框粗细
bgcolor 整个表格的背景颜色
align="center/left/right" 水平对齐方式(表格相对于外面的元素)，选择三个参数中的某一个
valign="middle/top/bottom" 垂直对齐方式（同上）
cellspacing="5" 单元格之间的距离
cellpadding="3" 文字留白
bordercolor 边框颜色
tr标签的属性：
align valign 整行的单元格里 水平、竖直 对齐方式（文字相对于单元格）
bgcolor 本行所有单元格的背景色
td标签的属性：
width height
align valign 单元格里 水平、竖直 对齐方式（文字相对于单元格）当 tr中也定义了该属性，td的优先执行
colspan 合并纵列的属性值个单元格，该行少了属性值-1个单元格
rowspan 合并横列的属性值个单元格，该行的下面属性值-1个行少了一个单元格
============================================================================
七、frame框架
框架概念 ：
所谓框架便是网页画面分成几个框窗，同时取得多个 URL。只 要 <FRAMESET> <FRAME> 即可，而所有框架标记 要放在一个总起的 html 档，这个档案只记录了该框架 如何划分，不会显示任何资料，所以不必放入 <BODY> 标记，浏览这框架必须读取这档 案而不是其它框窗的档案。<FRAMESET> 是用以划分框窗，每一框窗由一个 <FRAME> 标 记所标示，<FRAME>必须在 <FRAMESET> 范围中使用。如下例：
<frameset cols="300,*"> 这就是一个简单的左边固定的框架，她由两个页面1.html 2.html组成
<frame name="hello" src="1.html">
<frame name="hi" src="2.html">
</frameset>
cols="300,*" 该属性表明是将框架左右切分，大小既可以用百分数也可以用像素点表示
rows="90,*" 该属性表明是将框架上下切分 两者一般去其一
frameborder="0" 该属性设定框架的边框，其值只有 0 和 1 ， 0 表示不要边框， 1 表示要显示边框
border="0" 该属性设定框架的边框厚度
bordercolor="#008000" 设定框架的边框颜色
framespacing="5" 表示框架与框架间的保留空白的距离
典型框架的代码示例：
1、上方固定框架代码：
<frameset rows="80,*" frameborder="2" border="10" framespacing="0">
<frame src="c.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
<frame src="b.html" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset>
2、上方固定，左边嵌套的框架
<frameset rows="80,*" cols="*" frameborder="5" border="2" framespacing="2">
<frame src="d.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
<frameset cols="80,*" frameborder="5" border="2" framespacing="2">
<frame src="c.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" />
<frame src="b.html" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset>
</frameset>
====================================================================================
七、表单
1、<form>。。。</form> 表单可以看做是用户向服务器提交数据的一种方式
form标签的属性：
1> method 用于确定表示向浏览器传值的方式 有post、get 两种方式
2>action 该属性表示表单提交的目标页面, 值是一个url
3>target 表示该表单内容被提交时，目标页面是否在新的窗口中打开。_self、_blank（在讲解a标签时已经解释过）
4>title 当光标移到表单的任何一个部分时所提示的文字
表单控件的总结请看：http://www.cnblogs.com/key1309/archive/2013/06/07/3123790.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML学习笔记：HTML基本标签属性、常用标记
- 学习Html、css和Javascript中的常用标签英文缩写笔记（可供同学们参考）
- HTML常用标签的属性（学习笔记，慢慢更新中...）
- 常用HTML标签学习笔记1
- HTML 5 学习笔记之 常用标签简介
- HTML&CSS基础学习笔记5-添加常用的标签
- HTML学习笔记（一）了解HTML与HTML的常用标签
- HTML学习笔记（1）——常用标签
- HTML学习笔记1.4-添加常用的标签
- 前端学习笔记，HTML常用标签02
- <学习html>第八天笔记-HTML5文档类型和字符集、HTML5新标签与特性（常用新标签、新增input type属性值、常用新属性、多媒体标签）
- 前端学习之路html基础(01)——常用标签
- HTML常见标签学习和笔记总结
- Struts2 form表单常用标签学习笔记
- HTML入门学习笔记--表格标签(4)
- HTML学习笔记之行级标签和块级标签全
- HTML常用标签参考学习
- HTML&CSS基础学习笔记1-简单网页中有哪些标签？
- Struts学习笔记: Html标签库学习(Form标签)
- HTML&CSS基础学习笔记1-简单网页中有哪些标签？