简单html学习总结

来源：互联网发布：剑网3女神脸数据编辑：程序博客网时间：2024/05/23 00:05

大一上学期时老师讲《计算机概论》课时，讲了4节课关于html的，当时将老师的课件拷贝下来了，暑假整理时发现了那份课件，浏览着课件顺带将html的相关标签使用知识复习总结了一下。

简单html学习总结

html is short for “Hypertext Markup Language” 超文本链接标示语言

是一门标记性的语言，学习html 的基本标签是很重要的 ，一般的标签有以下一些：

<html>

<head>

<title>

</title>

</head>

<body>

</body>

</html>

上面是一个空网页

使用记事本创建网页的步骤：

1、打开记事本

2、输入HTML代码

3、保存为*.html或*.htm文件，注意格式问题

4、打开网页预览效果

网页页面中出现乱码，那如何消除乱码使其正常显示？

使用<META>标签

<HEAD>

<METAhttp-equiv="Content-Type" content="text/html; charset=gb2312">

<TITLE>网页标题</TITLE>

</HEAD>
其中这个charset=gb2312指的是使用中文编码方式

设置网页背景颜色的命令是bgcolor

设置网页背景图片的命令是background

<BODY bgcolor="#FFCCFF“background="back_image.GIF" >

Hello World！

</BODY>

· 字体、字号

· 标题标签<H1> －<H6>

· <FONT> 标签

· 特殊符号

· 行的控制

· 段落标签<P>

· 换行标签<BR>

<BODY>

<H1>一级标题</H1>

<H2>二级标题</H2>

<H3>三级标题</H3>

<H4>四级标题</H4>

<H5>五级标题</H5>

<H6>六级标题</H6>

</BODY>

· 标题标签

<H#> ... </H#>

#=1, 2, 3, 4, 5, 6

说明：<H1> 到<H6>

字体大小依

次递减

· <FONT>标签

<FONT size=“+2” color=“red” face=“律书” >

...

</FONT>

size控制字体的大小 color控制字体的颜色face控制字体的类型

&quot最初出现表明是左引号

第二个配对的那个&quot；是右引号

&copy 是版权号；

注意要包括分号

一个实例：

<BODY>

<P> <FONT size="+2" color="red" >

手机充值、IP卡/电话卡 </FONT><BR />

移动 |  100 |  联通 |  50</P>

</BODY>

……

· 段落标签<P>

· 段(Paragraph) ( 可以看作是空行) <p>

· 换行标签<BR>

· 换行 <br>

其中这个段落标签不必成对出现加上</p>

因为第二个<p>的出现就意味着进行下一段了

· 图像的基本语法

<IMG src="images/adv_2.jpg" width="300“ height="150“ alt="明星演唱会开幕" >

src是所插入图片的一个命令接着是一个地址，最好是相对地址，否则离开这台机器或者所插入的图片地址有所变化就会显示不了图片

alt="明星演唱会开幕" 这个命令的效果是，当我们的鼠标移到鼠标上时出现提示性的文字

但是需要说明的是并不是所有的浏览器上都能实现这一效果，一般的IE浏览器都能实现，但是好像在火狐浏览器的一些版本上不能实现这一个效果

· 图像与文本的对齐方式

· <IMG align="middle">

· 内容分隔<HR>标签

· 项目列表和编号

· 有序列表<OL>

· 无序列表<UL>

预格式文本<PRE> 标签

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

example:

……

<BODY>

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

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

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

</BODY>

……

<HR> 标签用于在页面上绘制水平线

使用列表

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

<OL type="1" >

<LI>填写信息</LI>

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

<LI>注册成功 </LI>

</OL>

新人上路指南

<UL type="circle">

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

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

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

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

</UL>

效果图：

<PRE>

<IMG src="images/QQ.JPG"width="159" height="133" align="LEFT">

腾讯-QQ币/QQ幻想-30元卡

一口价：26.45元

运　费：卖家承担运费

剩余时间：5天

宝贝类型：全新

卖主声明：货到付款，可试用10天！

</PRE>

HTML中代码格式与浏览器中显示效果一样

页面链接<A>标签

<A href="register/register.html">[免费注册]</A>

<A href="login/login.htm">[登录]</A>

· 链接到其他页面的两种路径

· 绝对对路径

指定从根目录到文件的完整路径。

· 相对路径

指定相对于当前文件的文件位置。

· 电子邮件链接

· 要链接电子邮件，可在链接标签中插入”mailto:邮箱地址”

<A href="mailto:webmaster@sohu.com">站长信箱</A>

<marquee></marquee>文字滚动标签

example：

<MARQUEE scrolldelay ="100" >水平滚动</MARQUEE>

<MARQUEE scrolldelay ="200" direction="up" >垂直滚动</MARQUEE>

<MARQUEE scrolldelay ="300" direction="up"

onmouseover="this.stop()"onMouseOut="this.start()">

<A href="#"><IMG src="images/scroll/1.gif"border="0" align="middle">

Avon化妆品</A><BR>

<A href="#"><IMGsrc="images/scroll/2.gif" border="0" align="middle">

雅诗兰黛 </A><BR>

……

</MARQUEE>

表格基础

example：

<TABLE border="2">

<TR>

<TD>移动</TD>

<TD>联通</TD>

<TD>铁通</TD>

</TR>

<TR>

<TD>IBM</TD>

<TD>惠普</TD>

<TD>华硕</TD>

</TR>

</TABLE>

效果图：

跨多列的表格：

<TABLE border="2">

<TR>

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

</TR>

<TR>

<TD >英语</TD>

<TD >数学</TD>

<TD >语文</TD>

</TR>

<TR>

<TD>95</TD>

<TD>98</TD>

<TD>89</TD>

</TR>

</TABLE>

效果图：

跨多行的表格：

<TABLE border="1">

<TR>

<TD rowspan=“3” >早上菜谱 </TD>

<TD >食物</TD>

<TD >鸡蛋</TD>

</TR>

<TR>

<TD >饮料</TD>

<TD >牛奶</TD>

</TR>

<TR>

<TD>甜点</TD>

<TD>开心粉</TD>

</TR>

</TABLE>

效果图：

跨多行多列的表格：

<TABLE border="1">

<TR>

<TD>手机充值、IP卡 </TD>

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

</TR>

<TR>

<TD rowspan="2">各种卡的总汇</TD>

<TD>铅笔</TD>

<TD>彩笔</TD>

</TR>

<TR>

<TD>打印</TD>

<TD>刻录</TD>

</TR>

</TABLE>

效果图：

设置表格的尺寸和边框来修饰表格：

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

<TR>

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

</TR>

<TR>

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

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

</TR>

<TR>

<TD >惠普</TD>

<TD >华硕</TD>

<TD >打印机</TD>

<TD >刻录盘</TD>

</TR>

</TABLE>