HTML初步入门
标签元素
标签介绍
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="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="images/logo.gif " width="250 " height="40 "></TD> <TD width="100 "><IMG src="images/banner_1.gif " width="51 " height="24 "></TD> <TD width="100 "><IMG src="images/banner_2.gif " width="51 " height="24 "></TD> <TD width="100 "><IMG src="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="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="images/logo.JPG " width="290 " height="60 "</TD> <td width="67 " height="33 " ><IMG src="images/buy.gif " width="58 " height="22 "></td> <td width="67 "><IMG src="images/sell.gif " width="58 " height="22 "></td> <td width="98 "><IMG src="images/mypp.gif " width="83 " height="22 "></td> <td width="61 "><IMG src="images/bbs.gif " width="45 " height="22 "></td> <td width="109 "> <img src="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>