HTML代码简介(html入门必看)_第1页
HTML代码简介(html入门必看)_第2页
HTML代码简介(html入门必看)_第3页
HTML代码简介(html入门必看)_第4页
HTML代码简介(html入门必看)_第5页
已阅读5页，还剩53页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

HTML代码简介主要内容HTML的基本结构HTML语言的语法HTML语言的常用标识网站设计基础知识HTML部分文档头部分正文部分<HTML> <HEAD> <TITLE>欢迎进入HTML世界</TITLE> </HEAD> <BODY> <P>这会是一种很有趣的体验</P> </BODY></HTML>基本结构：运行结果HTML文档的结构HTML标记的格式组成：<HTML>...</HTML>HTML标记用于标记HTML文档的开始和结束元素

-标识标记属性

-描述标记值

-分配给属性的内容<ELEMENTATTRIBUTE=value>HTML开发

HTML头部信息(Head)HTML头部信息(head)里包含关于所在网页的信息。头部信息(head)里的内容，主要是被浏览器所用，不会显示在网页的正文内容里。标题(title)标题(title)是最常用的head信息。它不显示在HTML网页正文里，显示在浏览器窗口的标题栏里。

HTML头部信息(Head)示例代码如下：<html><head><title>HTML中文教程头部信息</title></head></html>提供关于网页的信息<METAname=“Author”content=“GrahamBrowne”><METAname=“KEYWORDS”content=“...”>

<METAname="DESCRIPTION"content="...">对网页的描述根据关键词生成响应获得文档的作者名称2.应用：关键词生成响应<METAhttp-equiv="Expires"content="Mon,15Sep200314:25:27GMT">Expires:Mon,15Sep200314:25:27GMT设置网页的到期值:响应

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

页面显示中文设置网页使用gb2312:

使用META标记2-13.自动刷新页面<METAhttp-equiv="Refresh"content="10;url=http://yourlink">4.使用网页所使用的编码<METAhttp-equiv="Content-Type"content="text/html;

charset=gb2312">应用：如网上实时新闻报道。应用：如在不同浏览器上正确显示中文。使用META标记2-2HTML用<h1>到<h6>这几个Tag来定义正文标题，从大到小。每个正文标题自成一段。正文标题示例<html><body><h1>这是1号标题</h1><h2>这是2号标题</h2><h3>这是3号标题</h3><h4>这是4号标题</h4><h5>这是5号标题</h5><h6>这是6号标题</h6></body></html>HTML字体(Fonts)在HTML里，可以用font这个元素及其属性来设定字体的大小，颜色和字体风格。字体大小用字体大小属性(size)来设定字体的大小。示例代码如下：<p><fontsize="2">这一段的字体大小的值是2。</font></p>HTML字体(Fonts)在HTML里，可以用font这个元素及其属性来设定字体的大小，颜色和字体风格。字体风格用face属性来设定字体风格。示例代码如下：<p><fontface="arial">这一段的字体风格是arial。</font></p>字体颜色用颜色属性(color)来设定字体颜色。基本原理——色光三原色RBG#FF0000#000000#00FF00#FFFFFF#0000FF示例<html><head><title>字体大小fontsize</title></head><body><p><fontsize="1">这段文字的字体大小值为1。</font></p><p><fontsize="2">这段文字的字体大小值为2。</font></p><p><fontsize="3">这段文字的字体大小值为3。</font></p><p><fontsize="4">这段文字的字体大小值为4。</font></p></body></html>

示例<html><head><title>字体风格fontface</title></head><body><p>以下第一段用的是arial字体，第二段用的是courier字体，第三段用的是verdana字体。</p><p><fontface="arial">arialcourierverdana</font></p><p><fontface="courier">arialcourierverdana</font></p><p><fontface="verdana">arialcourierverdana</font></p></body></html>

示例<html><head><title>字体颜色fontcolor</title></head><body><p>这段文字用的是缺省的字体颜色。</p><p><fontcolor="#FF0000">这段文字的字体颜色为红色。</font></p></body></html>

HTML常用文本格式HTML定义了一些文本格式的Tag，比如利用Tag，可以将字体变成粗体或者斜体。从下面的示例，你可以了解各种文本格式Tag如何改变HTML文本的显示。常用文本格式Tag<b></b>粗体bold<i></i>斜体<U></U>下划线文本格式标记黑体字<b></b>斜体字<i></i>下划线<u></u>加粗<strong></strong>：段落标记在HTML里用<p>和</p>划分段落，<P>可以不成对出现。<HTML> <HEAD> <TITLE>欢迎使用HTML</TITLE> </HEAD> <BODYBGCOLOR=lavender>

<P>这会是一种很有趣的体验

<P>

另一个段落元素

</BODY></HTML>段落标记<HTML>

<HEAD>

<TITLE>学习HTML</TITLE>

</HEAD> <BODYBGCOLOR=lavender> <Palign=center>这会是一种很有趣的体验</P> </BODY></HTML>

右对齐Left：左对齐Center：居中Right：右对齐使用对齐属性修饰段落使用对齐属性修饰标题<html><body><h1align="center">这是标题</h1><p>上面的标题是居中显示的。</p></body></html>

换行通过使用<br>这个Tag，可以在不新建段落的情况下换行。<br>没有ClosingTag。用<p>换行是个坏习惯，正确的是使用<br>，即在行末加入<br>。<HTML> <HEAD> <TITLE>欢迎使用HTML</TITLE> </HEAD> <BODYBGCOLOR=lavender> <P>这会是一种很有趣的<BR>体验

<P>另一个段落元素

</BODY></HTML>换行标记HTML注释在HTML文件里，你可以写代码注释，解释说明你的代码，这样有助于你和他人日后能够更好地理解你的代码。注释可以写在<!--和-->之间。浏览器是忽略注释的，你不会在HTML正文中看到你的注释。<!--Thisisacomment-->示例<html><body><!--这是代码注释--><p>代码注释是不会显示在网页里。</p></body></html>

用<hr>这个Tag可以在HTML文件里加一条横线<hr>没有结束标签加入水平线示例<html><body><p>有“中国避暑之都”美誉的林城——贵州省省会贵阳市。</p><hr><p>有“中国避暑之都”美誉的林城——贵州省省会贵阳市。

</p></body></html>HTML利用超链接打开链接文件HTML用<a></a>来表示超链接<a></a>可以指向任何一个文件源：一个HTML网页，一个图片，一个影视文件等。用法如下：<ahref="url">链接的显示文字</a>点击<a></a>当中的内容，即可打开一个链接文件，href属性则表示这个链接文件的路径。示例<html><body><ahref=“http://">这是一个链接</a><br><ahref=“http://”>露之珠站点链接</a></body></html＞

HTML利用超链接打开链接文件链接的target属性使用链接的target属性，可以在一个新窗口里打开链接文件。示例<html><body><ahref="http://">这是一个链接</a><br><ahref=“http://”target=_blank>露之珠站点链接</a></body></html>HTML利用超链接打开链接文件链接的title属性使用链接的title属性，可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释。示例<html><body><ahref="http://">这是一个链接</a><br><ahref=“http://”target=_blanktitle=“露之珠站点链接”>露之珠站点链接</a></body></html>HTML利用超链接打开链接文件链接到email地址在网站中，经常会看到“联系我们”的链接，一点击这个链接，就会触发你的邮件客户端，比如OutlookExpress，然后显示一个新建mail的窗口。用<a>可以实现这样的功能。示例<html><body><ahref="http://">这是一个链接</a><br><ahref=“http://”target=_blanktitle=“露之珠站点链接”>露之珠站点链接</a><ahref="mailto:info@">联系新浪</a></body></html>

HTML相对路径(RelativePath)和绝对路径(AbsolutePath)HTML有2种路径的写法：相对路径和绝对路径。HTML相对路径(RelativePath)同一个目录的文件引用，如果源文件和引用文件在同一个目录里，直接写引用文件名即可。<ahref="biaoti.htm">这是一个链接</a>HTML相对路径(RelativePath)和绝对路径(AbsolutePath)HTML有2种路径的写法：相对路径和绝对路径。HTML相对路径(RelativePath)如何表示上级目录../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推。如何表示下级目录引用下级目录的文件，直接写下级目录文件的路径即可。HTML绝对路径(absolutepath)指带域名的文件的完整路径。<ahref=“http:///index.php”target=_blank>露之珠站点链接</a>HTML绝对路径(AbsolutePath)链接标记<ahref=“URL”></a>1、如果目标是Email地址：mailto:test@2、如果目标是网址:http://3、如果目标是本站中的网页文档xiajilanmu/wangye.html4、如果目标是本站中的文件wenjian/wengdang.doc5、如果目标是本页#6、如果目标是锚点#加上锚点的名字用<img>这个Tag可以在HTML里面插入图片。最基本的语法如下：<img

src=“url”>url表示图片的路径和文件名。比如url

可以是“images/logo/blabla_logo01.gif"，也可以是个相对路径"../images/logo/blabla_logo01.gif"。HTML图片(Images)示例<html><body><p>图片：<img

src="t1.jpg"></p></body></html>HTML图片(Images)图片align属性用align属性，可以改变水平对齐方式(居左、居中、居右)。图片Valign属性用valign属性，可以改变图片的垂直(居上、居中、居下)对齐方式图片的大小在缺省状况下，图片显示原有的大小。可以用height和width属性改变图片的大小。不过图片的大小一旦被改变，图片会相应放大或缩小，显示出来的结果可能会很难看。示例<html><body><img

src="t1.jpg"width=150heigh=50></body></html>HTML背景颜色和背景图片HTML的<body>有两个关于背景的属性bgcolor属性bgcolor属性用来设置HTML网页的背景颜色。background属性background属性用来设置HTML网页的背景图片。background属性值就是背景图片的路径和文件名，如果背景图片小于网页显示窗口，那么这个背景图片会自动重复。示例<html><bodybgcolor="yellow"><h2>看，这个页面是黄色的。</h2></body></html>示例<html><bodybackground="t1.jpg"><h3>这个网页有背景图片！</h3><p>如果图片比页面小，图片会自动重复。</p></body></html>

如何创建HTML表格表格表格可用于格式化输出与版面布局表格组成：表格标题（可省略）、表头（可省略）、表行、单元格表格标记符：<table>定义表格<caption>定义标题<th>定义表头<tr>定义行<td>定义单元格表格标记＜table＞＜tr＞＜td＞单元格内容1＜/td＞＜/tr＞＜tr＞＜td＞单元格内容2＜/td＞＜/tr＞＜/table＞单元格内容1单元格内容2表格标记表格<table></table>行<tr></tr>单元格<td></td>表头（通常使用黑体居中）<th></th>表格标记表格边框的宽度<tableborder=#></table>表格边框与其内容间的距离<tablecellpadding=#></table>表格单元格间的距离<tablecellspacing=#></table>设置表格的宽度，(绝对像素值或文档总宽度的百分比)<t

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论