HTML基础教程

1.一般我都是在记事本中写HTML文件,也有很多人用DreamWeaver,这个随意~~

2.HTML的一般结构如下:

<html>----以<html>开始,以</html>结束,表示之间的文档是HTML

<head>----HTML文档的头部,主要放文档的标题信息

<title>未使用CSS的HTML文件</title>

</head>

<body>----HTML的主体部分 

<h1>未使用CSS的HTML文件</h1>

<hr>----在网页中插入一条水平线

<p>未使用CSS的HTML文件</p>

</body>

</html>

3.标记语法

(1)标记在使用时必须用尖括号"<>"括起来;标记的大小写作用相同;

(2)单标记:<标记名称>,例如<br>它表示换行;

(3)双标记:<标记>内容</标记>

例如:<em>第一:</em>,它表示突出对“第一:”的显示;

(4):标记可以包含标记本身,即可以嵌套使用

<html>

<head>

<title>请输入密码</title>

</head>

<body>

<form>

<table border="1", width="321">

<tr>

<td>请输入密码</td>

</tr>

<tr>

<td>密码<input type="password" name="text1"></td>

</tr>

</table>

</form>

</body>

</html>


4. 属性语法

大多数单标记和双标记的始标记内部都可以包含一些属性

<标记名字 属性1 属性2 ...>

例如单标记<img>表示在文档当前位置插入一幅图片

<img src="1.jpg" width="652px" height="1249px" alt="博客">

其中src属性规定显示图像的路径,width属性设置图像的宽度,height属性设置图像的高度,alt属性规定图像的代替文本,src属性为必需属性,其他属性为可选属性。


5. HTML文件命名:

(1)文件的扩展名要以.html或.htm结束;

(2)文件名中只可由英文字母、数字或下划线组成;

(3)文件名中不要包含特殊符号,如空格、¥等;

(4)文件名师区分大小写的,在Unix和Windows主机中有大小写的不同;

(5)网站首页文件名默认是index.htm或index.html;


6. 编写HTML文件的注意事项:

(1)所有标记都要用尖括号<>括起来;

(2)成对出现的标记不要漏写;

(3)采用标记嵌套的方式可以为同一个信息应用多个标记,如<tag1><tag2>同一个信息</tag2></tag1>;

(4)在代码中,不区分大小写;

(5)任何空格或回车在代码中都无效,插入空格或回车有专用的标记,分别是&nbsp, <br>;

(6)标记中不要有空格;

(7)标记中的属性,可以用双引号("")引起来,也可以不引;

<hr color=red> 等价于 <hr color="red">


7.<p></p>表示插入段落文字;

8.绘制表格:三个成对标记<table></table>、<tr></tr>、<td></td>

<table width="650" border="1"> ----<table>是制作表格的标记,其后的属性依次为表格宽度,边框粗细

<tr>----<tr>表示插入行,一对<tr>表示一行

<td>----<td>表示一列

HTML基础教程<br>

作者:王占金等

<br>----<br>表示换行,单标记

定价49.00元<br>

</td>

<td>

<img src="1.jpg" width="69px" height="92" alt="HTML">

</td>

</tr>

<tr>

<td>

搜索引擎营销-网站流量大提速<br>

作者:(美)亨特<br>

定价:69.80元<br>

</td>

</tr>


</table>


9. 设置页面标题:<title>页面标题</title>;

10. 设置基地网址<base>

(1)<base>标记一般用于设计文件的URL地址;

(2)一个HTML文件只能有一个<base>标记,同时该标记必须放于头部文件中;

(3)<base href="文件路径" target="目标窗口">

  href用于设置网页文件链接的地址,target用于设置页面显示的目标窗口。

  例如:

<html>

<head>

<title>设置基地网址</title>

<base href="http://www.Broad View.com.cn">

</head>

<body>

2007年1月16日,电子工业出版社<a href="index">博文视点</a>公司召开了一次晚会。

</body>

</html>


11.定义元信息<meta>

(1)该标记的主要功能是定义页面中的一些信息,但这些信息不会出现在网页中,而会在源文件中显示;

(2)<meta>标记通过一些属性来定义文件爱你的信息,例如,文件爱你的关键字、作者信息、网页过期时间等,HTML文件的头部文件可以有多个<meta>标记;

(3)基本语法:

<meta http-equiv="" name="" content="">

http-equiv属性用于设置一个http的标题域,但确定值由content属性决定,name属性用于设置元信息出现的形式,content用于设置元信息出现的内容。


12.设置页面关键字--keywords

(1)基本语法:<meta name="keywords" content="value">

(2)语法说明:keywords用于说明定义的是关键字,value用于说明该网页定义的关键字,可以是多个关键字;

(3)例子:

<html>

<head>

<title>设置关键字</title>

<meta name="keywords" content="计算机、英语、经管、财会、职场"> ----此行代码表示在该HTML文件中定义的关键字为“计算机、英语、经管、财会、职场”,当利用搜索引擎搜索图书时,输入任何一个关键字都可以搜索到该网页。

</head>

<body>

......

</body>

</html>

13. 设置页面过期时间--expires

(1)基本语法: <meta http-equiv="expires" content="value">

(2)语法说明: expires用于设计页面过期时间,content属性设置具体过期时间值;

(3)例子:

<html>

<head>

<title>设置页面过期时间</title>

<meta http-equiv="expires" content="FRI,1 Jun 2017 00 00 00 GMT">

</head>

<body>

......

</body>

</html>


14.设置页面背景

(1)基本语法:<body bgcolor="">

(2)语法说明:bgcolor可以设置网页的背景颜色;

(3)例子:

<html>

<head> ...</head>

<body style="background-color:blue">----此行代码表示:将网页背景颜色设置为蓝色,也可以设置为 red white等,也可以十六进制数表示,例如“#00ff00”,或者rgb(0,0,0)的形式

......

</body>

</html>

15.设置页面边距

(1)基本语法:<body topmargin=value leftmargin=value rightmargin=value bottommargin=value>

(2)语法说明:topmargin 设置到顶端的距离

leftmargin设置到左边的距离

rightmargin设置到右边的距离

bottommargin设置到低端的距离

(3)例子:

<html>

<head>......</head>

<body topmargin=0 leftmargin=20 rightmargin=20 bottommargin=180>

&nbsp;&nbsp;2016年5月9日,阴雨

</body>

</html>

16.设计正文颜色

(1)基本语法:<body text=""> ...</body>

(2)语法说明:利用text属性设置文档的颜色时,还可以进行其他设置,例如:背景、字体等;

(3)例子:

<html>

<head>......</head>

<body text="white" bgcolor="red">

&nbsp;&nbsp;2016年5月9日,阴雨

</body>

</html>

17.添加注释 <!-->

注释信息不会在网页中显示,可以放在HTML文件的任何地方

<!--请在此添加注释语句-->

18. 添加空格 &nbsp;

在主体中使用,一个&nbsp代表空一个字符

19.添加删除线 <del></del>

使用成对标记<del></del>,在主体中添加

<body>

<del>请在此输入需要添加删除线的文字</del>

</body>

20. 插入特殊符号

符号对应代码

&&amp

TM &trade

&yen

等~~

21.设置文字标注标记<ruby>

<ruby>

被说明的文字(当代最可爱的人)

<rt>

文字的标注(志愿者)

</rt>

</ruby>

22.简单文字修饰(加粗、斜体、下划线)

<body>

普通文字的显示<br>

<b>加粗文字的显示</b>

<i>斜体文字</i>

<u>给文字加下划线</u>

</body>


23.确定文字上下标-<sup>/<sub>

<body>

<sup>上标内容</sup>

<sub>下标内容</sub>

</body>

24.设置地址文字<address>

在网页中添加地址文字,是为了更方便地突出显示联系方式,将联系人的地址信息突出显示

<body>

<address>请在此添加地址信息</address>

</body>

25.设置等宽文字 <tt> <samp> <code> <kdd>

多数情况用在英文文字显示中

<body>

<tt>打字机风格显示</tt>

<code>等宽文字设置内容</code>

<samp>等宽文字设置内容</samp>

<kdd>键盘输入</kdd>

</body>

26.段落<p></p>----双标记

回车<br>----单标记,强制性换行,可以放在<p></p>之间使用

预格式化<pre></pre>

利用<pre></pre>标记对网页中文字段落进行预格式化,在输入过程中,按键盘上的回车键,就可以生成一个段落;

设置段落缩进<backquote>

利用一对<backquote></backquote>标记可以缩进5个字符

插入并设置水平线<hr>

水平线的属性有:align---水平线对齐方式,取值有3种:left,right和center

width---水平线的长度,如500px

size---水平线的粗细

color---水平线的颜色,如red

noshade---水平线是否有阴影

标题标记<hn>,其中n为数字1-6,共分6级,数字越小,字体越大,表示越重要


27.插入列表

列表类型标记符号

定义列表<dl></dl>

无序列表<ul></ul>

目录列表<dir></dir>

有序列表<ol></ol>

(1)插入定义列表<dl></dl>

<dl>

<dt>联系人<dd>***   ----<dt>定义名称部分,只在<dl>中使用

<dt>联系地址<dd>北京市海淀区----<dd>解释说明部分,只在<dl>中使用

<dt>邮政编码<dd>100876

</dl>

输出结果为:


联系人

***

联系地址

北京市海淀区

邮政编码

100876


(2)插入无序列表<ul></ul>

<ul>

<li>联系人:***</li>

<li>联系地址:北京市海淀区</li>

<li>邮政编码:100876</li>

</ul>

输出结果为:


·联系人:***

·联系地址:北京市海淀区

·邮政编码:100876

补充:无序列表<ul>中用type属性来控制行的标号

type=disc 设定一个实心圆点的行标号,表示默认项,如上面所示;

type=circle  设定一个空心圆点作为行标号;

type=square  设定一个方形实心点作为行标号;

(3)插入有序列表<ol></ol>

<ol>

<li>联系人:***</li>

<li>联系地址:北京市海淀区</li>

<li>邮政编码:100876</li>

</ol>


输出结果为:

1.联系人:***

2.联系地址:北京市海淀区

3.邮政编码:100876

补充:有序列表的顺序是由属性type和start来设置的。type表示标号的类型,start表示列表的标号从第几项开始

type=1 表示用数字标号(默认项)

type=A 表示用大写字母

type=a 表示用小写字母

type=I 表示用大写罗马数字

type=i 表示用小写罗马数字

(4)嵌套定义列表

<dl>

<dt>网页三剑客

<dd>Dreamweaver

<dd>Flash

<dd>Fireworks

<dt>编程三剑客

<dd>VB

<dd>VF

<dd>VC

</dl>


显示结果为:

网页三剑客

Dreamweaver

Flash

Fireworks

编程三剑客

VB

VF

VC

(5)嵌套有序与无序列表

<ul>

<li>水果类

<ol>

<li>苹果</li>

<li>香蕉</li>

</ol>

</li>

<li>蔬菜类

<ol>

<li>萝卜</li>

<li>白菜</li>

</ol>

</li>

</ul>


显示结果为:

·水果类

1.苹果

2.香蕉

·蔬菜类

1.萝卜

2.白菜


28.超链接

一般而言,一个网站的文件都是在同一个目录下的

在HTML文件中提供了三种路径:绝对路径,相对路径,根路径

在HTNL文件中,超链接可以分为内部链接和外部链接。所谓内部链接:指网站内部文件之间的链接;所谓外部链接,指网站内的文件链接到站点内容外的文件。

(1)绝对路径:只文件的完整路径,包括文件传输的协议http,ftp等,一般用于网站的外部链接,例如:http://ysu.edu.cn,  ftp://202.206.251.100

(2)相对路径:只相对于当前文件的路径,它包含了从当前文件指向目的文件的路径。同时只要是处于站点文件夹之内,即使不属于同一个文件目录下,相对路径建立的链接也适合。采用相对路径是建立两个文件之间的相互关系,可以不受站点和所处服务器位置的影响。

相对位置如何输入

同一目录输入要链接的文档

链接上一目录先输入"../",再输入目录名

链接下一目录先输入目录名,后加"/"

(3)根路径:适合内部链接的建立,一般情况下不使用根路径,以"/"开头,后面紧跟文件路径。


29.超链接的建立

(1)插入内部链接: <a href="index.htm">链接内容</a>

(2)插入外部链接: <a href="http://ysu.edu.cn">燕山大学</a>

(3)设置图像映射:

基本语法:<img src="URL" usemap=""></img>

  <map name="">

  <area shape="" coords=" , , " href="URL">

  </map>

语法说明:<img>标记表示插入图像文件,src表示插入图像的路径,<map>标记表示插入图像的映射;<area>标记表示图像映射区域;shape属性表示映射区域形状:rect表示矩形区域,circle表示椭圆形区域,poly表示多边形区域;coords表示感应区域的坐标。

30.表格

(1)<table></table>表示插入一个表格;

(2)<tr></tr>表示插入一行,<td></td>表示插入一列;

(3)<caption></caption>表示插入表格标题,用于<table>和<tr>之间;

(4)设置表格表头<th>:将要作为表头的一行,列标记<td>改为<th>即可;

(5)设置划分结构表格<thead>、<tbody>、<tfoot>

   所谓划分结构表格,指将一个表格分成三个部分在网页上显示

   <thead></thead>表示定义一组表头行

   <tbody></tbody>表示定义表格主体部分

   <tfoot><tfoot>表示为表格添加一个标准

(6)设置表格的标记属性

<table width="" border="" frame="" rules="">

width设置表格的宽度border设置表格边框的粗细frame设置表格边框的样式rules设置表格内部边框的属性

above 显示上边框,border显示上下左右边框, below显示下边框, hsides显示上下边框,lhs显示左边框,rhs显示右边框,void 不显示边框,vsides 显示左右边框;

all 显示所有内部边框

groups 显示介于行列之间的边框

none 不显示内部边框

cols 显示列边框

rows 显示行边框

(7)设置表格行:<tr align="" valign="">

align设置行内容的水平对齐:left(左对齐),right,center

valign调整行内容的垂直对齐:top(顶端对齐),middle,bottom,baseline(基线)

(8)设置跨行:rowspan

<table>

<tr>

<td rowspan="2"> &nbsp;</td>

<td> &nbsp;</td>

<td> &nbsp;</td>

</tr>

<tr>

<td> &nbsp;</td>

<td> &nbsp;</td>

</tr>

</table>

显示结果为一个两行三列的表格,但是第一列的两个表格合并为一个了,即跨行。

(9)设置跨列:colspan

<table>

<tr>

<td colspan="2"> &nbsp;</td>

<td> &nbsp;</td>

</tr>

<tr>

<td> &nbsp;</td>

<td> &nbsp;</td>

<td> &nbsp;</td>

</tr>

</table>

显示结果为:

一个两行三列的表格,但是第一行的前两列表格合并为一个表格。



你可能感兴趣的:(html)