标签元素

标签介绍

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>

  

与文本显示相关的标签

<center>…</center>

使文本居中显示

<hnalign="#"></hn>

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

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

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

<b>...</b>

使文本成为粗体。

<i>…</i>

使文本成为斜体

<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初步入门的更多相关文章

  1. Struts 2 初步入门(三)

    接Struts 2初步入门(二) 若想用多个通配符设定访问: <struts> <package name="default" namespace="/ ...

  2. Java反射-初步入门

    Java反射-初步入门 学反射先了解什么是反射. 百度百科:JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动 ...

  3. 【Redis】Redis学习(一) Redis初步入门

    一.Redis基础知识 1.1 Redis简介 Redis是一个开源(BSD许可),内存存储的数据结构服务器,可用作数据库,高速缓存和消息队列代理.它支持字符串.哈希表.列表.集合.有序集合,位图,h ...

  4. WebService 初步入门的理解

    先说明 我不是高手 我是菜鸟  也在不断学习的过程  记录下来这些是让自己总结的学习  毕竟我做的时候也是摸索前进的 我没有深入 我是入门摸索 前两天的时候做一个微信的开发的 要用到我们公司微信服务号 ...

  5. 关于CSS初步入门简述1

    关于CSS的简介可以自行百度,本篇只考虑内容 首先关于CSS会由浅入深,写在前面的有很多不严谨,只是为了引出后文所写.不过如果谬误较大,敬请指正! 1.大部分的代码要写在之中 简单的例子: <b ...

  6. redis初步入门

    http://blog.csdn.net/u014419512/article/details/25693425 版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[+] 环境 安装 ...

  7. zend framework2学习(一)初步入门

    声明:本人菜鸟一枚,由于项目中需要用到zf2框架进行开发,在此记载学习使用过程中的点点滴滴.才疏学浅,请多指教............. ------------------------------- ...

  8. maven初步入门demo

    Maven是跨平台的项目管理工具.作为Apache组织中的一个颇为成功的开源项目,主要服务于基于java平台的项目构建.依赖管理和项目信息管理. maven本身使用java开发而成,所以使用前确保电脑 ...

  9. Wireshark初步入门

    第一次捕获数据包 为了能让Wireshark得到一些数据包,你可以开始你的第一次数据包捕获实验了.你可能会想:"当网络什么问题都没有的时候,怎么能捕获数据包呢?" 首先,网络总是有 ...

随机推荐

  1. Mysql 5.7 Linux安装详细步骤

    版权声明:本文为博主原创文章,未经博主允许不得转载. 1.下载安装包 http://dev.mysql.com/downloads/mysql/#downloads 推荐下载通用安装方法的TAR包(h ...

  2. Fitbit Flex 智能手环佩戴心得 主要说说过敏

    参杂一篇杂文. 也是因为体重飙升,所以去年下半年的时候入手了一个Fitbit flex. 当时相比Jawbone up,nfc和ble的特性,以及防水性还是更吸引我一点.所以就入手了. 佩带了如此长的 ...

  3. jquery里的on方法使用

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src ...

  4. HQL 参数绑定、唯一结果、分页、投影总结(上)

    我们先总结一下HQL语句常用语法: from子句:; select子句:用于选取对象和属性; where子句:用于表达查询语句的限制条件; 使用表达式:一般用在where子句中; order by子句 ...

  5. android127 zhihuibeijing 屏幕适配

    ## 屏幕适配 ## 加载不同分辨率的图片是根据手机的像素来加载不同分辨率文件夹下的图片. > 先在主流屏幕来发: *(分辨率和手机屏幕大小无关), 遵循原则: 不用AbsoluteLayout ...

  6. 解决python2.7.9以下版本requests访问https的问题

    在python2.7.9以下版本requests访问https连接后,总会报一些关于SSL warning. 解决法子可以参考:https://urllib3.readthedocs.io/en/la ...

  7. python复杂网络库networkx:绘图draw

    http://blog.csdn.net/pipisorry/article/details/54291831 networkx使用matplotlib绘制函数 draw(G[, pos, ax, h ...

  8. Python推荐系统库--Surprise理论

    Surprise Surprise是scikit系列中的一个.Surprise的User Guide有详细的解释和说明 支持多种推荐算法 基础算法/baseline algorithms 基于近邻方法 ...

  9. JS去掉字符串前后空格或去掉所有空格的用法

    1.  去掉字符串前后所有空格: 代码如下: function Trim(str) { return str.replace(/(^\s*)|(\s*$)/g, ""); } 说明 ...

  10. 二进制转化、&lt;&lt;、&gt;&gt;、&gt;&gt;&gt;移位运算

    参考资料: https://www.cnblogs.com/wxb20/p/6033458.html https://www.cnblogs.com/joahyau/p/6420619.html ht ...