码迷,mamicode.com
首页 > Web开发 > 详细

HTML 常用标签

时间:2016-11-02 23:49:55      阅读:396      评论:0      收藏:0      [点我收藏+]

标签:code   refresh   应该   控件   文本   列合并   处理程序   ace   文档   

HTML常用标签

HTML的结构

 <html>

<head></head>

<body></body>

</html>

 

Body标记的属性

<body 属性=“属性值”>

Background:给网页设置背景图片

bgColor:给网页设置背景颜色

 

文本与字体修饰标记

<b></b>或者<strong></strong> 给字体加粗

<i></i>或者<em></em> 给字体设置斜体

<u></u>或者<ins></ins> 给字体设置下划线

<s></s>或者<del></del> 给字体设置删除线

<sup></sup> 字体上标

<sub></sub> 字体下标

<font 属性=“属性值”></font> 给文本设置颜色,设置字体大小,设置字体

Color  给字体设置颜色

Size   给字体设置大小

Face  给字体设置字体

 

排版标记

<h1></h1>~<h6></h6> 标题标记(16小)

<p></p> 段落标记     

   属性:align  设置里面的内容水平方向对齐  取值:left(默认)/center/right

<br /> 换行标记

 

 

<hr /> 水平线标记

   属性:  color 设置水平线的颜色

    Size  设置水平线的粗细

Width 设置水平线的宽度

Align 设置水平线的水平对齐方式

Noshade 去除阴影

 

列表

无序列表

<ul>

<li></li>

<li></li>

</ul>

 

有序列表

<ol>

<li></li>

<li></li>

</ol>

 

自定义列表

<dl>

<dt></dt>   (标题)

<dd></dd>  (内容)

</dl>

 

跑马灯标记

<marquee></marquee>

常见属性:

Direction:滚动的方向  取值:left(默认)/center/right

Behavior:滚动的方式  取值:scroll(滚动 默认)/slide(只滚动一次)/alternate(弹动)

Width:设置宽度

Height:设置高度

bgColor:设置背景颜色

scrollAmount:滚动的步长值(值越大速度越快)

 

Head标记

<title></title>:这个标记的作用是用来显示网页的标题

<meta />

n 它告诉浏览器要使用什么编码来解析当前的文档

    <meta  http-equiv=”Content-Type”  content=”text/html;charset=字符编码”/>

n 它可以实现网页刷新

<meta  http-equiv=”refresh” content=”每隔指定的时间刷新当前网页”/>

n 它可以实现网页跳转

<meta  http-equiv=”refresh” content=”指定跳转时间;要跳转的网页网址”/>

它还可以实现SEO优化

<meta name=”keywords” content=”关键字列表”/>

<meta name=”description” content=”网页描述”/>

 

超级链接

<a><a/>:通过这个标记就可以实现超级链接

常见属性:

Href:要跳转的链接的URL地址

Target:目标文件的打开方式

属性值:_self  在当前窗口打开(默认)

_blank  在新窗口打开

_top  在顶窗口打开

_parent 在父窗口打开

Name: 用来实现锚点的链接

Id:用来实现锚点的链接

 

 

锚点链接

要实现锚点链接需要两步:

第一步:要定义锚点

<a  name=”锚点名”></a>或者<a  id=”锚点名”></a>

第二步:要找到定义的锚点链接

<a href=”#锚点名”>文字或者图片 </a>

 

 

 

 

图片标记

<img  />:图片标记

常见属性:

Src:引用图片的地址

Alt:当图片不存在的时候显示的文字信息

Title:当鼠标放在图片的位置时显示文字信息

Border:给图片设置边框

Width:给图片设置宽度

Height:给图片设置高度

图像热点

格式:

<img  src=”图片的地址”  usemap=”#名称”>

<map  name=”它要和img标记里面的usemap的属性值一样”>

<area  shape   coords=””  href=””  title=”当鼠标放上图片上面时显示的文字”/>

<area />

<area />

</map>

 

area标记的属性:

shape:表示区域里面的形状   取值:rect(矩形)circle(圆形)poly(多边形)

coords:坐标值

如果形状设置为 rect(矩形)时  那么坐标值应该有4:x1,y1,x2,y2

如果形状设置为 circle(圆形)时  那么坐标值应该有3:x1,y1,r

如果形状设置为 poly(多边形)时  那么坐标值应该有根据多少边来决定

 

 

多媒体标记

<embed />  HTML5

常见的属性:

src:要引入的源文件地址

width:设置宽度

height:设置高度

 

表格

 

表格的格式

 

<table>                        

<tr>                       

<td></td>              

</tr>

</table>

 

表格的标记

<table></table>:表示表格

<tr></tr>:表示表格中的行

<td></td>:表示表格中的单元格

<th></th>:表示表格中的标题单元格、

<caption></caption>:表示表格中的标题

 

Table标记的属性

<table></table>

属性:border:设置边框宽度  取值:0~n

  borderColor:设置边框颜色

  Width:设置表格宽度  取值:固定值或者百分比

  Heigh:设置表格高度  取值:固定值或者百分比

  Align:设置表格的水平对齐方式  取值:left(默认)/center/right

  Background:设置表格的背景图片

  bgColor:设置表格的背景颜色

  Cellspacing:表格中单元格与单元格之间的距离

  Cellpadding:表格中单元格里面的内容与单元格边框之间的距离

 

<tr></tr>

属性:background:设置行的背景图片

  bgColor:设置行的背景颜色

  Width:设置行的宽度

  Height:设置行的高度

    Align:设置行内容的水平对齐方式  取值:left(默认)/center/right

  Valign:设置行内容的垂直对齐方式  取值:top(顶部对齐)/middle(默认)/bottom

 

<td></td>或者<th></th>

属性:width:设置单元格的宽度

  Height:设置单元格的高度

  Background:设置单元格的背景图片

  bgColor:设置单元格的背景颜色

Rowspan:跨行合并单元格

Colspan:跨列合并单元格

 

标题的标记

<caption></caption>  这个是table的自标记 它是用于设置表格的标题

 

表格的隐藏标记

<thead></thead>:表示表格的头部

<tbody></tbody>:表示表格的主体部分  可以有多个

<tfoot></tfoot>:表示表格的尾部     它一般是用来做统计用

 

表单

<form>

表单的控件

</form>

 

Form标记的属性:

Action:表单数据的处理程序  将表单的数据交给“谁”来进行处理

Method:表单数据的提交方式   取值:get(默认)/post

Get:将所有的表单数据显示在浏览器的地址栏中

Post:它不会将表单的数据显示在浏览器的地址栏中  它是直接发送给后台

Enctype:表单数据的编码方式  一般情况下都不用写  只有在文件上传的时候才需要写

取值:application/x-www-form-urlencoded  默认就是它  不同的加密方式

 Multipart/form-data  多文件的方式进行上传

 

表单控件

单行文本框:

<input  type=”text”  name=”名称”  value=”值”  size=”设置宽度”  />

 

单行密码框:

<input  type=”password”  name=”名称”  value=”值”  size=”设置宽度”  />

 

单选按钮:

<input  type=”radio”  name=”名称”  value=”值”  checked=”checked”(默认选中) />

 

 

多选按钮:

<input  type=”checkbox” name=”名称” value=”值” checked=”checked”(默认选中/)>   

 

提交按钮:

<input  type=”submit”  name=”名称 不建议写”  value=”值” / >

 

重置按钮:

<input  type=”reset”  name=”名称 不建议写”  value=”值”>

 

普通按钮:

<input  type=”button”  name=”名称 不建议写” value=”值” >

 

图片按钮

<input  type=”image”  src=”图片地址URL” />

 

文件上传按钮

<input  type=”file”  name=”名称”>

form标记里面的method=”POST”  enctype=”multipart/form-data”

 

隐藏域:

<input type=”hidden” name=”名称”  value=”值”>

 

使用button这个双标签来实现按钮

提交按钮:

<button  type=”submit”>提交</button>

 

重置按钮:

<button  type=”reset”>重置</button>

 

普通按钮:

<button  type=”button”>普通</button>

注意:如果button标记里面的type没有写  在form标记里面 这个按钮它具有表单的提交功能  如果在form标记的外面 它就是一个普通按钮

 

下拉列表:

<select>

<option>请选择以下的省份</option>

</select>

 

文本域:

<textarea  rows=”行数”  cols=”列数”  name=”名称”></textarea>

 

框架型网页的结构

<frameset  rows=”将这个框架网页设置为上下型”  cols=”将这个框架网页设置为左右型”>

<frame  />

<frame  />

</frameset>

 

属性:

frameset这个标记它用来定义这个框架网页是上下还是左右型

rows=”80,*”   将窗口分割为上下型   上边的窗口占据80个像素  剩下的所有的空间都给到下窗口  

rows=”80,100,*”  将窗口分割为上中下型  上边的窗口占据80个像素  中间的窗口占据100个像素   剩下的所有的空间都给到下窗口  

cols=”100,*”   将窗口分割为左右型  左边的窗口占据100个像素  剩下的所有的空间都给到右窗口  

cols=”100,80,*”   将窗口分割为左中右型  左边的窗口占据100个像素 中间的窗口占据80个像素   剩下的所有的空间都给到右窗口

 

Border:用来设置框架网页的边框的粗细

bordeColor:用来设置框架网页的边框颜色

frame这个标记表示小窗口  这个框架网页里面有多少个小窗口 就要有多少个frame这个标记

Src:它可以引入外部的html网页或者是其他的网站都可以

Name:设置小窗口的名称   这个属性非常重要

HTML 常用标签

标签:code   refresh   应该   控件   文本   列合并   处理程序   ace   文档   

原文地址:http://www.cnblogs.com/xiaodongge/p/6024733.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!