标签元素

标签介绍

html元素包括一个或一对标签定义的包含范围。而标签就是由两个字符串“<”和“>”号组成，标签包括开始标签“<>”和结束标签“</>”。

html标签元素有四种形式分别是：

空元素：<br>

带有属性的空元素：<hrfont="red">

带有内容的元素：<titile>这是内容</titile>

带有内容和属性的元素:<fontcolor="red">这是内容</font>

这里有一点要说的是在html文档中，标签和属性的名字是和大小无关的。

html框架的必备基本元素

<html></html>表示文档的开始和文档结束

<head></head>表示文档头部的开始和结束

<title></title>表示文档标题的开始和结束

<body></body>表示文档的正文的开始和结束

<html>

	<head>

		<meta charset="utf-8" />

		<title></title>

	</head>

	<body>

	</body>

</html>

html注释

格式是小于号（<），感叹号（!）小于号和感叹号间无空格，接下来是两条短线（--）,然后就是注释内容，最后又是两条短线（--）和大于号（>）。

如：

<html>

	<head>

		<meta charset="utf-8" />

		<!--这是注释内容-->

		<title></title>

	</head>

	<body>

	</body>

</html>

与段落控制相关的标签

<palign="#">

创建一个段落，属性align表示段落的对齐方式，#可以是left、center、right、justify。

<br>

作用是换行

<hrcolor="#">

作用是插入一条水平线，属性color用来表示颜色。

<BODY>

<HR size="5" color="red" width="300">

<HR size="10" color="black" width="200">

<HR size="5"  color="#0000FF" width="50%">

</BODY>

与文本显示相关的标签

使文本居中显示

<hnalign="#"></hn>

作用是表示文档的标题，n是从1-6的整数，一次为最大标题，6是最小标题，align为设置标题对齐方式，包括left、center、right

<fontsize=n color="#">...</font>

设置字体，size为字体大小，从1到7的整数，数字越大，字体越大。

使文本成为粗体。

使文本成为斜体

<BODY>

   <H1>一级标题</H1>

   <H2>二级标题</H2>

   <H3>三级标题</H3>

   <H4>四级标题</H4>

   <H5>五级标题</H5>

   <H6>六级标题</H6>

</BODY>

列表元素创建的标签

a.创建带数字编号的列表：

<ol>...</ol>用start属性，设置起始的序号。

<li>...</li>用value属性，改变列表内的序号顺序。

b.创建带有项目符合的列表：

<ul>和<li>，他们标签的type属性指定符号的样式：

disc，显示为实心的圆圈；

square，显示未实心的方块。

circle，显示未空心的圆圈

<H4>注册步骤：</H4>

  <OL type="1" >

    <LI>填写信息</LI>

    <LI>收电子邮件</LI>

    <LI>注册成功 </LI>

  </OL>

  新人上路指南

  <UL type="circle">

    <LI>如何激活会员名？ </LI>

    <LI>如何注册淘宝会员？ </LI>

    <LI>注册时密码设置有什么要求？</LI>

    <LI>支付宝认证</LI>

  </UL>

b.建立无符号的列表

<dl>与<dt>标签创建无符号的列表

<dd>和<dt>，创建缩进的列表

<body>

		<TABLE border="2">

			<TR>

				<td>成绩</td>

				<TD colspan="3">学生成绩表</TD>

			</TR>

			<TR>

				<td rowspan="2">学生</td>

				<TD>英语</TD>

				<TD>数学</TD>

				<TD>语文</TD>

			</TR>

			<TR>

				<TD>95</TD>

				<TD>98</TD>

				<TD>89</TD>

			</TR>

		</TABLE>

	</body>

表格元素的标签

表格在网页布局中的作用是至关重要的，表格是用<table>来定义的，

具体的定义为：<tableborder=n aligh="#" bgcolor="rgb">

属性border用于定义表格边框的宽度，属性align用于设定表格的对齐方式，可以是left、right、center。bgcolor是颜色。

<caption>…</caption>用来定义表格的标题

<tr>...</tr>为表格添加新行

<th>…</th>用于定义表头

<td>…</td>用于定义单元格

html交互式表单

表单在网页中主要负责数据采集功能，比如我们平常注册信息、输入信息可以与网页进行交互的都是表单。

表单使用<form>...</form>元素创建，在两者之间嵌入其它相关元素或者说是控件，就可以创建作为html文档一部分的表单。

创建表单的基本语法如下：

<formmethod="get or post" action="URL">….</form>

属性method用于指定向服务器发送表单数据时所使用的HTTP方法，用get或者post皆可，提交的数据被附加到URL的末端，作为URL的一部分发送到服务器。

下面就是关于表单常用的一些元素:

<input>元素用于接收用户输入的信息，它是一个带有属性的空元素，用来创建表单中的控件语法是

<inputtype="type" name="name" size="size"value="value'>

属性type用来指定要创建的控件的类型，属性那么用来指定控件的名称，size用来指定表单中控件的初始宽度，属性value指定控件的初始值。

关于type的类型可以参考下面张图片：

列表框元素

允许用户从一个下拉菜单中选择一项或多项，列表框由<select>元素创建，列表框中的各个选项用<option>元素提供。

多行文本输入控件

<textareaname="name" rows="number of rows" cols="number ofcolumns" >…</textarea>

属性rows用于指定文本框输入控件可视区域显示的文本行数，cols指定文本输入控件可视区域显示的宽度。

超链接标签

<ahref="URL">…</a>

属性href用于指定链接的目标，目标地址有URL定位，在开始标签<a></a>之间的文本将作为浏览器中显示的链接文本。

嵌入图像标签

<img src="URL" width=n height=m>属性src指定图像资源的位置，属性width和height用于指定图片的尺寸，在这里需要注意的是src应该尽量用相对路径而不用绝对路径。

特殊字符元素

特殊字符包括字符引用和实体引用，下面我们将常用的进行总结

在写几个代码留着看！

1》练习标签

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

		<title>网页制作啦！</title>

	</head>

	<body bgcolor="coral">

	<img src="data:images/logo.JPG" width="290" height="60" alt="欢迎光临拍拍网"align="middle">

	       

	<A href="login.html">登录</A> | 关于拍拍 | 拍拍助理 | 

    <A href="mailto:907655189@qq.com">联系我们</A>

    <P>

    	<FONT color="#FFA275" size="+6">手机 - 诺基亚 -

    		<A href="#MOTO">MOTO</A> - 索爱</FONT>

    </P>

	<h1>导购资讯</h1>

	<p>参观电玩达人的宝贝仓库</p>

	<p>

		炎炎夏日，冰凉家具两折起

		周末折扣，品牌三折起

	</p>

	<hr size="5" color="dimgrey"  noshade width="400" align="left"/><br />

	网游专区

	<ol type="A">

		<LI>QQ幻想100点卡只需￥8.8元</LI>

  		<LI>热血江湖250点只需￥8.8元</LI>

  		<LI>问道30元卡只需￥25.0元</LI>

  		<LI>跑跑点卡200点只需￥16.8元</LI>

	</ol>

	数码产品

		<UL type="disc">

 		<LI>最酷音乐手机导购</LI>

 		<LI>最强街机6300仅售1450</LI>

 		<LI>99元热销学生Mp3推荐</LI>

 		<LI>漫步者音箱76元搞定</LI>

	</UL>

	<hr size="5" color="dimgrey"  noshade width="400" align="left"/><br />

	<A name="#MOTO">MOTO E2  音乐手机</A>

	<pre>

130W像素摄像头 Linux智能系统

Intel XScale 处理器

A2DP蓝牙立体声 市场价：1690

开学价：1045

	</pre>

	<MARQUEE scrolldelay="150">

		精品推荐:超酷PSP  NIKE球星球鞋  ZIP珍藏限量版

	</MARQUEE>

	<hr size="5" color="dimgrey"  noshade width="400" align="left"/><br />

	版权信息： Copyright © 1998 - 2007 TENCENT Inc. All Rights Reserved

	</body>

</html>

2》练习表格

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

		<title>表格一</title>

	</head>

	<body>

		<TABLE border="2">

			<TR>

				<td>成绩</td>

				<TD colspan="3">学生成绩表</TD>

			</TR>

			<TR>

				<td rowspan="2">学生</td>

				<TD>英语</TD>

				<TD>数学</TD>

				<TD>语文</TD>

			</TR>

			<TR>

				<TD>95</TD>

				<TD>98</TD>

				<TD>89</TD>

			</TR>

		</TABLE>

	</body>

	<br />

	<body>

		<table border="3" bgcolor="aqua">

			<tr>

				<td>手机充值、ID卡</td>

				<td colspan="3">办公设备、文具、耗材</td>

			</tr>

			<tr>

				<td rowspan="3">各类卡的总汇</td>

				<td>铅笔</td>

				<td>彩笔</td>

				<td>粉笔</td>

			</tr>

			<tr>

				<td>打印</td>

				<td>刻录</td>

				<td>墨盒</td>

			</tr>

			<tr>

				<td>笔记</td>

				<td>港币</td>

				<td>墨水</td>

			</tr>

		</table>

	</body>

	<br />

	<body>

		<TABLE width=“400” height=“200” border=“15” bordercolor="red">

			<TR>

				<TD colspan="4"> 品牌商城</TD>

			</TR>

			<TR>

				<TD colspan="2">笔记本电脑</TD>

				<TD colspan="2">办公设备、文具、耗材</TD>

			</TR>

			<TR>

				<TD>惠普</TD>

				<TD>华硕</TD>

				<TD>打印机</TD>

				<TD>刻录盘</TD>

			</TR>

		</TABLE>

	</body>

	<br />

	<body>

		<TABLE width="350" height="100" cellspacing=“5” cellpadding=“10” border=“1 " background="images/type_back.jpg ">

			<TR>

				<TD colspan="4 "> </TD>

			</TR>

			<TR bgcolor="#EBEFFF ">

				<TD colspan="2 " align="center ">笔记本电脑</TD>

				<TD colspan="2 " align="center ">办公设备、文具、耗材</TD>

			</TR>

			<TR bgcolor="#EBEFFF ">

				<TD>惠普</TD>

				<TD>华硕</TD>

				<TD>打印机</TD>

				<TD>刻录盘</TD>

			</TR>

		</TABLE>

	</body>

	<br />

	<BODY>

<TABLE width="450 " height="100 " border="0 "

	background="images/type_back.jpg " cellpadding="10 ">

  <TR>

    <TD colspan="4 "> </TD>

  </TR>

  <TR bgcolor="#EBEFFF ">

    <TD width="40% " rowspan="2 ">阿里巴巴旗下</TD>

    <TD width="20% " >我要买</TD>

    <TD width="20% " >我要买</TD>

    <TD width="20% ">我淘宝</TD>

  </TR>

  <TR bgcolor="#EBEFFF ">

    <TD colspan="3 " align="center ">您好，欢迎来淘宝！

    	<a href="# ">[免费注册]</a></TD>

  </TR>

</TABLE>

	<br />

	<BODY>

<TABLE width="600 " border="0 ">

  <TR>

    <TD width="300 " rowspan="2 "><IMG src="data:images/logo.gif " width="250 " height="40 "></TD>

    <TD width="100 "><IMG src="data:images/banner_1.gif " width="51 " height="24 "></TD>

    <TD width="100 "><IMG src="data:images/banner_2.gif " width="51 " height="24 "></TD>

    <TD width="100 "><IMG src="data:images/banner_3.gif " width="73 " height="24 "></TD>

  </TR>

  <TR>

    <TD colspan="3 " align="left ">您好，欢迎来淘宝！<A href="# ">[免费注册]</A> </TD>

  </TR>

</TABLE>

<table bgcolor="aqua " border="1 ">

		<tr>

			<td colspan="4 " align="absmiddle ">拍拍公告栏</td>

		</tr>

		<tr>

			<TD rowspan="3 "><IMG src="data:images/ppgg.JPG " width="90 " height="71 "></TD>

			<td colspan="3 ">"彩票大卖 "频道开张！</td>

		</tr>

		<tr>

			<td colspan="3 ">社区新版首页亮相啦!</td>

		</tr>

		<tr>

			<td colspan="3 ">自输卡密自动发货功能发布</td>

		</tr>

		<tr>

			<td >积分换购</td>

			<td >货到付款</td>

			<td >手机充值</td>

			<td >点卡售货机</td>

		</tr>

	</table>

	</body>

	<br />

	<body>

		<table width="400 " height="134 " border="0 "

			background="images/background.jpg " cellpadding="5 ">

			<tr>

				 <TD height="30 " colspan="4 "> </TD>

			</tr>

			<tr bgcolor="#EBEFFF ">

				<td colspan="2 " align="center ">手机充值 - IP卡 - 电话卡</td>

				<td colspan="2 " align="center ">网游 - 点卡 - 金币 - 代练</td>

			</tr>

			<tr bgcolor="#EBEFFF ">

				<td align="center " width="132 " height="30 " bgcolor="#FFD2D2 ">移动</td>

				<td align="center " width="132 ">联通</td>

				<td align="center " width="132 " bgcolor="#C4FFC4 ">魔兽</td>

				<td align="center " width="132 ">跑跑卡丁车</td>

			</tr>

		</table>

	</body>

	<br />

	<!--这是一个方法，里面放一个表格-->

	<body>

		<table width="957 " border="0 " background="images/naviBg.JPG " >

			<tr>

				 <TD width="529 " rowspan="2 "><img

				 	src="data:images/logo.JPG " width="290 " height="60 "</TD>

				<td width="67 " height="33 " ><IMG src="data:images/buy.gif "  width="58 " height="22 "></td>

				<td width="67 "><IMG src="data:images/sell.gif " width="58 " height="22 "></td>

				<td width="98 "><IMG src="data:images/mypp.gif " width="83 " height="22 "></td>

				<td width="61 "><IMG src="data:images/bbs.gif " width="45 " height="22 "></td>

				<td width="109 ">

					<img src="data:images/help.gif " width="13 " height="13 "/>

					<FONT size="-1 " color="#FF0000 ">帮助中心</FONT>

				</td>

			</tr>

			<tr>

				<TD height="28 " colspan="2 "><FONT size="-1 " color="#FF6262 ">欢迎来到拍拍网！</FONT></TD>

    			<TD colspan="3 ">

					<FONT size="-1 "><A href="# ">[登录]</A> |

						<A href="# ">[免费注册]</A> | <A href="# ">[结算中心]</A></FONT>

				</TD>

			</tr>

		</table>

</BODY>

</html>

HTML初步入门的更多相关文章

Struts 2 初步入门（三）
接Struts 2初步入门(二) 若想用多个通配符设定访问: <struts> <package name="default" namespace="/ ...
Java反射-初步入门
Java反射-初步入门学反射先了解什么是反射. 百度百科:JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动 ...
Shel脚本-初步入门之《06》
Shel脚本-初步入门-06 Shell 脚本的建立和执行 6.Shell 脚本的建立和执行 6.1 Shell脚本的建立在 Linux 系统中,Shell 脚本(bash Shell 程序)通常是 ...
Shel脚本-初步入门之《01》
Shel脚本-初步入门-什么是 Shell 1.什么是 Shell Shell 是一个命令解释器,它的作用是解释执行用户输入的命令及程序等.Shell 存在于操作系统的最外层,负责与用户直接对话,把用 ...
Shel脚本-初步入门之《02》
Shel脚本-初步入门-什么是 Shell 脚本 2.什么是 Shell脚本当命令或程序语句不在命令行下执行,而是通过一个程序文件来执行时,改程序就被称为 Shell 脚本.如果在 Shell 脚本 ...
Shel脚本-初步入门之《03》
Shel脚本-初步入门-Shell 脚本在 Linux 运维工作中的地位 3.Shell 脚本在 Linux 运维工作中的地位 Shell 脚本语言很适合用于处理纯文本类型的数据,而 Linux 系统 ...
Shel脚本-初步入门之《04》
Shel脚本-初步入门-04 脚本语言的种类 4.脚本语言的种类 4.1 Shell 脚本语言的种类 Shell 脚本语言是弱类型语言(无须定义变量的类型即可使用),在 Unix/Linux 中主要有 ...
Shel脚本-初步入门之《05》
Shel脚本-初步入门-05 常用操作系统默认的 Shell 5.常用操作系统默认的 Shell 通过以下两种方法可以查看 CentOS Linux 系统默认的 Shell 方法1: echo $SH ...
JVM初步入门（很初级，建议只做大致了解用）
jvm初步入门本博客中的所有内容都是来自b站狂神说视频教程,如有侵权联系我删除. 下面是视频链接:b站狂神说关于jvm的几个小问题 1. jvm的位置: jvm是一个运行在操作系统上的用c语言编写 ...
【Redis】Redis学习（一） Redis初步入门
一.Redis基础知识 1.1 Redis简介 Redis是一个开源(BSD许可),内存存储的数据结构服务器,可用作数据库,高速缓存和消息队列代理.它支持字符串.哈希表.列表.集合.有序集合,位图,h ...

随机推荐

Codeigniter 3.0 相关文档 part two
分页首先,配置 $this->load->library('pagination'); $config = array(); // $this->config->load(' ...
MINIUI版本破解
miniui类似easyui是一个web ui,功能比不上人家还是收费,收费也就算了,代码还加密混淆,过期提示脚本越写越离谱,严重低估IT人员的智慧,对此表示强烈不满,故下载了几个版本花了一小时破解: ...
[UIScreen mainScreen].bounds.size.width 和self.view.frame.size.width的区别
self.view.frame.size.width在导航栏titleView计算frame时会出现宽度不准确的情况,布局出现问题,[UIScreen mainScreen].bounds.size. ...
selenium python的使用(二)
1.selenium获取到的信息是把页面加载完毕之后获取异步加载的html源码 html=driver.find_element_by_xpath("/html").get_a ...
单例模式-C++
单例模式(Singleton) --本文内容部分引自<大话设计模式 Chapter21> 一.概念:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 通常我们可以让一个全局变量使一个 ...
DataTable/集合转 Json
前端用的jqueryUI框架获取json格式数据绑定显示表格. 后端通过WebService获取的数据是DataTable. 现将获取DataTable转Json,也支持将数据集合转Json. 一.项 ...
js检测手机摇一摇
1.检测设备是否支持重力感应事件deviceorientation deviceorientation 提供设备的物理方向信息,表示为一系列本地坐标系的旋角 function motionHandle ...
Error of "Please Check for Sufficient Write File Permissions"
The error message “Please check for sufficient write file permissions” is generated by the Web-based ...
win7下开启telnet命令
win7下开启telnet命令 win7上telnet这条命令默认被关闭了. 开启telnet方法如下: 一,打开控制面版二,选择程序三,选择打开或关闭windows功能在弹出窗口中把 Teln ...
选择App开发外包时，你该了解哪些法律常识？
随着App需求的激增,选择App外包服务的客户也多了起来.然而客户和开发方对于其中的法律条款却不甚了解,导致在服务过程中,时常会发生一些分歧和纠纷,最终致使项目搁浅. 为了普及App外包的法律常识,移 ...

HTML初步入门