三月 28th, 2011

网页设计中常见HTML标签

19,330 views, 学习, by admin.

网页设计中常见HTML标签

(红色部份为代码)、黑色为注释

HTML:全名是HyperText MarkupLanguage 是一种超文本标识语言,是用来描述WWW上超文本文件的。

基本标签

<html></html> 创建一个HTML文档
<head></head> 设置文档标题以及其他不在WEB网页上显示的信息
<body></body> 设置文档的可见部分

注释:起始标签<head>结束标签</head>

标题标签

<title></title> 将文档的题目放在标题栏中

注释:标题起始标签<title>标题结束标签</title>

文档整体属性

<body bgcolor=?>或者<body background=?> 设置背景颜色,使用名字或十六进制值或者设置背景图片
<body text=?> 设置文本文字颜色,使用名字或十六进制值
<body link=?> 设置链接颜色,使用名字或十六进制值
<body vlink=?> 设置已使用的链接的颜色,使用名字或十六进制值
<body alink=?> 设置正在被击中的链接的颜色,使用名字或十六进制值

注释:<body bgcolor=“bule”> 或者 <body bgcolor=十六进制> 注意无引号也可以有引号 其他HTML标签也类似

文本标签

<pre></pre> 创建预格式化文本
<h1></h1> 创建最大的标题
<h6></h6> 创建最小的标题
<b></b> 创建黑体字
<i></i> 创建斜体字
<tt></tt> 创建打字机风格的字体
<cite></cite> 创建一个引用,通常是斜体
<em></em> 加重一个单词(通常是斜体加黑体    )
<strong></strong> 加重一个单词(通常是斜体加黑体)
<font size=?></font> 设置字体大小,从1到7
<font color=?></font> 设置字体的颜色,使用名字或十六进制值

注释:

链接

<a href="URL"></a> 创建一个超链接
<a href="mailto:EMAIL"></a> 创建一个自动发送电子邮件的链接
<a name="NAME"></a> 创建一个位于文档内部的靶位
<a href="#NAME"></a> 创建一个指向位于文档内部靶位的链接

注释:链接起始标签标签<a href=”网址或者文件“>欢迎光临我的主页(在浏览器中看到的蓝色下划线部份)链接结束标签</a>

格式排版

<p> 创建一个新的段落
<p align=?> 将段落按左、中、右对齐
<br> 插入一个回车换行符
<blockquote></blockquote> 从两边缩进文本
<dl></dl> 创建一个定义列表
<dt> 放在每个定义术语词之前
<dd> 放在每个定义之前
<ol></ol> 创建一个标有数字的列表
<li>夹在上两个中间使用注意无</li><li type=字母> 放在每个数字或字母列表项之前,并加上一个数字或字母
<ul></ul> 创建一个标有圆点的列表
<li> 放在每个圆点列表项之前,并加上一个圆点
<div align=?> 用来排版大块HTML段落的标签,也可用于格式化

注释:段落标签<p>段落结束标签</p> 段落左对齐属性如:<p align=”left”> 注释:居中对齐center 右对齐right

图形元素

<img src="name"> 添加一个图像
<img src="name" align=?> 排列对齐一个图像:左中右或上中下
<img src="name" border=?> 设置围绕一个图像的边框的大小
<hr> 加入一条水平线
<hr size=?> 设置水平线的大小(高度)
<hr width=?> 设置水平线的宽度(百分比或绝对像素点)
<hr noshade> 创建一个没有阴影的水平线

注释:图像标签<img border=5 src=”ABC.jpg”>给图像加边框用于给图片做链接时候才显示,值为0-99

图片居中在多数浏览器中应该这样写:<p align=center><ima src="name">

表格

<table></table> 创建一个表格
<tr></tr> 开始表格中的每一行
<td></td> 开始一行中的每一个格子也就是列
<th></th> 设置表格头通常使用黑体居中文字的格子

注释:

表格属性

<table border=#> 设置围绕表格的边框的宽度
<table cellspacing=#> 设置表格格子之间空间的大小
<table cellpadding=#> 设置表格格子边框与其内部内容之间空间的大小
<table width=#or%> 设置表格的宽度-用绝对像素值或文档总宽度的百分比
<tr align=?>or<td align=?> 设置表格格子的水平对齐(左中右)
<tr valign=?>or<td valign=?> 设置表格格子的垂直对齐(上中下)
<td colspan=#> 设置一个表格格子应跨占的列数(缺省为1)
<td rowspan=#> 设置一个表格格子应跨占的行数(缺省为1)
<td nowrap> 禁止表格格子内的内容自动断行回卷

注释:

窗框

<frameset></frameset> 放在一个窗框文档的<body>标签之前,也可以嵌在其他窗框文档中
<framesetrows="value,value"> 定义一个窗框内的行数,可以使用绝对像素值或高度的百分      比
<framesetcols="value,value"> 定义一个窗框内的列数,可以使用绝对像素值或宽度的百分比
<frame> 定义在不支持窗框的浏览器中显示什么提示

注释:框架起始标签<frameset> 框架结束标签</frameset>

窗框属性

<frame src="URL"> 规定窗框内显示什么HTML文档
<frame name="name"> 命名窗框或区域以便别的窗框可以指向它
<frame marginwidth=#> 定义窗框左右边缘的空白大小,必须大于等于1
<frame marginheight=#> 定义窗框上下边缘的空白大小,必须大于等于1
<frame scrolling=VALUE> 设置窗框是否有滚动栏,其值可以是”yes”,”no”,”auto”,缺省时一般为”auto”
<frame noresize> 禁止用户调整一个窗框的大小

注释:

表单

对于功能性的表单,一般需要运行一个CGI小程序,HTML仅仅是产生表单的表面样子。
<form></form> 创建所有表单
<select multiple 创建一个滚动菜单,size设置在需要滚动前可以看到的表单项数目
name="NAME"size=?></select>
<option> 设置每个表单项的内容
<select name="NAME"></select> 创建一个下拉菜单
<option> 设置每个菜单项的内容
<textarea name="NAME" cols=40 rows=8></textarea> 创建一个文本框区域,列的数目设置宽度,行的数目设置高度
<input type="checkbox"name="NAME"> 创建一个复选框,文字在标签后面
<input type="radio" 创建一个单选框,文字在标签后面
name="NAME"value="x">
<input type=textname="foo"size=20> 创建一个单行文本输入区域,size设置以字符计的宽度
<input type="submit"value="NAME"> 创建一个submit(提交)按钮
<input type="image"border= 创建一个使用图象的submit(提交)按钮
0name="NAME"src="name.gif">
<input type="reset"> 创建一个reset(重置)按钮

注释:

Tag :理解为标签

PS:本来想一大堆废话要说的,现在没了。只为学习!

Back Top

回复自“网页设计中常见HTML标签”

  1. 所有不需要闭合的元素,最好加斜杠。比如”。

  2. @我不在乎: 标签被过滤了,〈hr /〉。

  3. 这个要好好看看,基础中的基础呀

  4. 基础很重要,温故而知新,可以为师矣。

  5. 这些确实很常用啊

  6. 主题很简洁 好看! 过来挺挺~! 这些基础的要熟悉的!经常用! ❗

  7. 温故而知新,呵呵

  8. 最近开始玩技术了,以后可以方便来你这里查询了

  9. 今天没更新?

  10. 都歸納了的說啊,一般來說用的也就那幾個的說,表情好有愛的說 🙁

  11. @蛋糕: 哈哈,承蒙期待,小生會努力的畫的,現在連人物都還不怎麼會畫 ❗

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据