HTML入门教程

AirJD

没有录音文件

00:00/00:00

加收藏

发布者 csser

发布于 1440756043310 浏览 6449 关键词 HTML5, 前端

分享到

第1页

HTML

第2页

第3页

HTML概念

HTML（Hyper Text Markup Language 超文本标识语言）
是一种用来制作超文本文档的简单标记语言。
用HTML编写的超文本文件称为HTML文件，也称Web文件。

第4页

HTML文档的编写方法

手工直接编写
记事本等，存成.htm .html格式
使用可视化HTML编辑器
Frontpage、Dreamweaver等
由Web 服务器（或称HTTP 服务器）一方实时动态地生成。

第5页

网页文件命名

*.htm或*.html
无空格
无特殊符号（例如&符号），只可以有下划线“_”，只可以为英文、数字
区分大小写
首页文件名默认为：index.htm 或 index.html

第6页

HTML 文件结构

<html>...</html>
<head>...</head>
<body>...</body>
元素：是HTML语言的基本部分。元素总是成对出现，每一对元素一般都有一个开始的标记（如<body>），也有一个结束的标记（如</body>）。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。

第7页

HTML 文件结构(Document Structures)

<HTML>
<HEAD>
<title></title>
<meta>
</HEAD>
<BODY>
HTML 文件的正文
</BODY>
</HTML>

第8页

第一张网页（01.htm）

<html>
      <head>
       <title>第一张网页</title>
      </head>
      <body>
      欢迎光临我的主页！
      </body>
</html>

第9页

基本组成部分——HTML元素属性

HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的< >内，并且和元素名之间有一个空格分隔；属性值用“”引起来。

第10页

第二张网页（02.htm）

<html>
      <head>
        <title>第一张网页</title>
      </head>
      <body>
         <p align="center">欢迎光临我的主页!</p>
      </body>
</html>

第11页

HTML基本结构的有关元素和元素属性

HEAD元素——1 <head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。
<title>
<title>元素定义HTML文档的标题。<title>与</title>之间的内容将显示在浏览器窗口的标题栏。

第12页

HTML基本结构的有关元素和元素属性

HEAD元素——2
<meta>元素
<meta>元素下面可以插入很多很有用的元素属性。下面介绍四种：
<meta name="keywords" content="study,computer">
用来标记搜索引擎在搜索你的页面时所取出的关键词。

第13页

设置页面关键字－keywords

基本语法

Keywords用于说明定义的是关键字，value用于说明为该网页定义的关键字，可以是多个关键字。

第14页

设置页面关键字－keywords

<html>
<head>
<title>设置文件关键字</title>
<meta name=”keywords” content=”计算机、英语、经管、财会、职场”> …
</head>
<body>
…
</body>
</html>

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

第15页

HTML基本结构的有关元素和元素属性

HEAD元素——3
<meta>元素
<meta name="author" content=“wutao">
用来标记文档的作者。

第16页

HTML基本结构的有关元素和元素属性

HEAD元素——4
<meta>元素
<meta http-equiv=“Content-Type” content=“text/html; charset=gb2312”>
用来标记你的页面的解码方式。

第17页

HTML基本结构的有关元素和元素属性

HEAD元素——5
<meta>元素
<meta http-equiv=“refresh” content=“5;URL=http://www.ecust.edu.cn”>
用来自动刷新网页

第18页

设置页面过期时间－expires

基本语法

expires用于设计页面过期时间，content属性设置具体过期时间值。

第19页

设置页面过期时间－expires

<html>
<head>
<title>设置页面过期时间</title>
<meta http-equiv=”expires” content =”FRI,1 JUN 2007 00 00 00 GMT”>
</head> <body>
</body>
</html>

Expires用于设置网页的过期时间，content给出了网页过期的具体时间值。

第20页

定义元信息<meta>

基本语法

第21页

定义元信息<meta>

语法说明

第22页

练习（03.htm）

编写一个网页，要求3秒钟后自动跳转到校网主页。
<html>
      <head>
        <title>my first page</title>
        <meta http-equiv=“refresh” content=“3;URL=http://www.sict.edu.cn/”>
      </head>
      <body>
       <p align=“center”>三秒钟后本网页将自动跳转到山东商业职业技术学院首页</p>
      </body>
</html>

第23页

设置基准文字<basefont>

基本语法

第24页

设置基准文字<basefont>

语法说明

  <basefont>标记用于设置网页中的文字；
  face属性用于设置文字的名称，可以是宋体、隶
      体、楷体等；
  size属性用于设置字号的大小；
  color用于设置字体的颜色。

第25页

设置基准文字<basefont>

此行代码表示将网页中文字的字体设置为“宋体”，字号大小为“h2”，颜色为“#666666”（灰色）。

第26页

<body>元素及元素属性——1

<body>元素表明是HTML文档的主体部分。在<body>与</body>之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。

第27页

<body>元素及元素属性——2

<body>元素中有下列元素属性：
(1)bgcolor
bgcolor属性标志HTML文档的背景颜色。如：bgcolor=“#CCFFCC”。
例：04.htm

第28页

HTML对颜色的控制

HTML对颜色的控制也有自己的语法。HTML使用16进制的RGB颜色值对颜色进行控制。
16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.

第29页

常见颜色的代码

第30页

<body>元素及元素属性——3

<body>元素中有下列元素属性：
(2)background
background属性标志HTML文档的背景图片。如：background=“images/bg.gif"。
可以使用的图片格式为GIF，JPG
例：05.htm、06.htm

第31页

<body>元素及元素属性——4

<body>元素中有下列元素属性：
(3)bgproperties=fixed
bgproperties=fixed使背景图片成水印效果，即图片不随着滚动条的滚动而滚动。
例：07.htm和08.htm对比

第32页

<body>元素及元素属性——5

<body>元素中有下列元素属性：
(4)text
text属性标志HTML文档的正文文字颜色。如：text=“#FF6666”。Text元素定义的颜色将应用于整篇文档。
例：09.htm

第33页

设置页面边距——topmargin、leftmargin、rightmargin、bottomnargin

基本语法

<body topmargin=value leftmargin=value rightmargin=value
bottomnargin=value>

第34页

设置页面边距——topmargin、leftmargin、rightmargin、bottomnargin

通过设置topmargin/leftmargin/rightmargin/bottomnargin不同的属性值来设置显示内容与浏览器的距离：
  topmargin设置到顶端的距离
  leftmargin设置到左边的距离
  rightmargin设置到右边的距离
  bottommargin设置到底边的距离。

第35页

设置页面边距——topmargin、leftmargin、rightmargin、bottomnargin

第36页

文字标签属性——1

文字属性标记<font>..</font>
1.文字颜色
指定颜色 <font color=#> ... </font>
#=RRGGBB 16 进制数码
例：010.htm

第37页

文字标签属性——2

文字属性标记
2.文字字体
<font face=“#, #, ..., #”> ... </font>#=客户端可获得的字体
011.htm

第38页

文字标签属性——3

文字属性标记
3.文字大小
<font size=#> ... </font>
#=1, 2, 3, 4, 5, 6, 7 or +#, -#
例：012.htm

第39页

文字布局

行的控制
段(Paragraph) (可以看作是空行) <p>
空白占位符
例：013.htm

第40页

文字布局

行的控制
HTML的段落与段落之间有一定的空隔。如果不希望出现空隔而只想换行的话，就要用到另一个元素，即<br>元素。<br>元素可以使所在的位置出现换行。这种换行和浏览器的自动换行的效果类似。<br>元素不是成对出现的。
例：014.htm
不换行<nobr>
015.htm

第41页

换行与不换行<wbr>/<nobr>

基本语法

<body>
输入要显示的文字内容<nobr><wbr>继续输入要显示的内容</wbr></nobr>
</body>

第42页

语法说明

HTML文件中，成对的<nobr></nobr>标记表示不换行，但是在<nobr>标记中，插入成对的<wbr> </wbr>标记后，<wbr> </wbr>标记之间的内容会被强制换行。

第43页

HTML文字与段落格式控制

<body>……
     <i>倾斜文本</i>
     <b>粗体文本</b>
     <u>下划线文本</u>
  <s>删除线文本</s>
     ……</body>
例：016.htm

第44页

确定文字上下标——<sup>/<sub>

基本语法

第45页

设置地址文字<address>

基本语法

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

在HTML文件中，利用成对<address> </address>标记就可以
将网页需要显示的地址文字突出显示。

第46页

预格式化<pre>

基本语法

在HTML文件中，利用<pre>标记不仅可以定义网页文字中的段落，还可以对段落格式进行定义。

第47页

第48页

网页效果

第49页

设置段落缩进<blockquote>

基本语法

<body>
<blockquote>需要缩进的内容</blockquote>
</body>

第50页

语法说明

在HTML文件中，利用成对<blockquote> </blockquote>标记对网页中的文字进行缩进，可以更好地体现网页文字的层次结构。

第51页

第52页

忽略HTML标记<xmp>

基本语法

在HTML文件中，只要是插入在成对的<xmp>…</xmp>标记中的内容，都会将HTML标记忽略，包括标记在内的所有内容都会直接显示在页面上。

第53页

第54页

小实例——文字网页

第55页

接上页

第56页

网页效果

第57页

基本组成部分—HTML注释

HTML文档可以插入注释。注释内容不会在浏览器窗口显示
HTML注释的格式为：<!-- 注释内容 -- ><!--多行注释内容 -- >
或<comment>

例：017.htm

第58页

添加注释<！-->或<comment>

<html>
<head>
<!--请在此添加注释语句！>
<title>添加注释<title>
</head>
<body>
<!--请在此添加注释语句！>
<comment>此处也可以添加注释语句</comment>
</body>
</html>

第59页

文字的对齐

<hn align=#>...</hn> (n=1,2,3,4,5,6)
<p align=#>...</p> (#=left, center, right)

第60页

3.HTML段落与分行控制

居中--- <center>元素
<center>元素是一个独立的使所标记的字符居中的元素。它的作用与使用<p>元素里的align=“center”类似
例如：<center>居中段落</center>
例：018.htm

第61页

3.HTML段落与分行控制

标尺线
<hr size = #>：设定线宽
<hr width=#>：设定线长
<hr align=#>：设定对齐方式 #=left, right
<hr color=#> ：设定线的颜色

例：019.htm

第62页

3. HTML的段落与分行控制

无序列表元素—1列表在HTML的文档里有重要的地位,HTML规定了多种列表元素。列表所起的主要作用是使特定的文本有序化。

第63页

3. HTML的段落与分行控制

无序列表元素—2
无序列表是由<ul>和<li>元素定义的:
<ul>
<li>sports</li>
<li> food </li>
<li> drink </li>
<li> friends </li>
</ul>
例：020.htm

第64页

列表类型

列表类型与标记符号

第65页

插入定义列表<dl>

 <dt>标记定义了组成列表项名称部分，同
时此标记只在<dl>标记中使用；
 <dd>用于解释说明<dt>标记定义的项目名称，此标记也只能在<dl>标记中使用。

第66页

语法说明：

第67页

第68页

网页效果

第69页

插入无序列表<ul>

在HTML文件中，利用成对<ul></ul>标记可以插入无序列表，但<ul>标记之间必须使用成对<li></li>标记添加列表项值。

第70页

第71页

插入目录列表<dir>

基本语法

在HTML文件中，利用成对<dir></dir>标记可以插入目录列表，但<dir>标记之间必须使用成对<li></li>标记添加列表项值。

第72页

第73页

插入菜单列表<menu>

基本语法

在HTML文件中，利用成对<menu></menu>标记可以插入菜单列表，但<menu>标记之间只需要单个<li>标记添加列表项值。

第74页

第75页

插入有序列表<ol>

基本语法

在HTML文件中，利用成对<ol></ol>标记可以插入有序列表，但<ol>标记之间必须使用成对<li></li>标记添加列表项值。

第76页

第77页

有序列表Type属性及说明

第78页

插入有序列表<ol>——在<ol>中输入<type>属性

基本语法

第79页

第80页

4.超级链接—普通超级链接1

超级链接是整个WWW应用的核心和基础。如果没有超级链接的概念，那么，我们现在所有的WWW的应用将不复存在。所以，对超级链接的掌握具有特殊重要的意义。

第81页

4.超级链接—普通超级链接2

超级链接是用锚元素<a>定义的
在<a>元素下，有元素属性href, href的属性值为一个URL地址
如：<a href=“http://www.sict.edu.cn/”>指向学校的超级链接</a>
如：<a href=“29.htm">普通超级链接</a>
例：021.html

第82页

4.超级链接—E-mail超级链接

超级链接可以指向E-mail地址
如：<a href=“mailto:ldd@mail.ecust.edu.cn">指向E-mail地址的超级链接</a>
例：022.htm

第83页

4.超级链接—新开链接窗口

开一个新的(浏览器)窗口 (Target Window)
<a href="URL" target=“_blank"> ... </a>
例：023.htm

第84页

设置绝对路径

绝对路径指文件的完整路径，包括文件传输的协议http、ftp等，一般用于网站的外部链接，例如：
http://www.broadview.com.cn
ftp://219.153.41.160

第85页

设置相对路径

相对路径使用方法

第86页

设置根路径

根路径的设置也适合内部链接的建立，一般情况下不使用根路径。根路径的使用很简单，以“/”开头，后面紧跟文件路径，例如：/download/index.html

第87页

插入外部链接

在HTML文件中，需要使用外部超链接时，插入成对的标记并将href属性的URL值设置为绝对路径。

第88页

插入内部链接

语法说明

在HTML文件中，需要使用内部超链接时，插入成对的标记将href属性的URL值设置为相对路径。

第89页

HTML对图片的控制--1

基本语法:
<img src=“图片名称”>
引用图片必须用<img>元素标志。<img>元素下的基本元素属性是src属性，src的属性值为所引用的图片的URL地址。
src属性是必须的。Src的URL可以是绝对地址，也可以是相对地址

第90页

HTML对图片的控制--2

所谓图片的替代文本，指图片不能显示时在图片所在位置显示的一段文本或当鼠标移到图片上时也会显示替代文本。
定义图片替代文本的方法是：
<img src=“图片名称” alt=“这是一张图片”>
例：024.htm

第91页

HTML对图片的控制--3

图片的显示大小
我们可以指定一幅图片在浏览器窗口里的显示大小。
定义图片的显示大小的方法是：
<img src="sample.jpg" width=100 height=100 >
width指定图片的宽度，height指定高度。它们的属性值可以是象素，也可以是%。
例：025.htm

第92页

HTML对图片的控制--4

图片的边框
我们可以为一幅图片加一个边框以突出显示：
<img src="sample.jpg" border= " 2 " >
border的属性值为象素数
例：026.htm

第93页

HTML对图片的控制--5

图片的对齐方式
图片可以相对于页面或单元格有一个对齐方式。
定义水平对齐方式的方法是：
<img src=“sample.jpg” align=“left” >
<img src=“sample.jpg” align=“right”>
例：027.htm

第94页

设置图像映射

基本语法

第95页

语法说明

  <img>标记表示插入图像文件，src表示插入图像的路径；
  <map>标记表示插入图像映射；
  <area>标记表示图像映射区域；
  rhape属性表示映射区域形状：
      “rect”表示矩形区域；
      “circle”表示椭圆形区域；
      “poly”表示多边形区域；
  cords表示感应区域的坐标。

第96页

第97页

第98页

设置文字标注标记<ruby>

基本语法

<ruby>
被说明的文字
<rt>
文字的标注
</rt>
</ruby>

利用成对的<ruby><rt>…</rt></ruby>标记，可以对网页中的文字进行标注。

第99页

设置等宽文字<tt>、<samp>、<code>、<kdb>

基本语法

<body>
<tt>打字机风格显示</tt>
<code>等宽文字设置内容</code>
<samp>等宽文字设置内容</ samp >
<kdb>键盘输入</ kdb >
</body>

第100页

语法说明

在HTML文件中，利用成对标记就可以对网页中的文字进行等宽设计。
 成对<tt></tt>标记设置打字机显示风格
  <code></code>等宽文字设置
  <samp></samp>等宽文字设置
  <kdb></kdb>键盘输入风格

第101页

实例代码

第102页

设置文字标注标记<ruby>

实例代码

第103页

设置文字标注标记<ruby>

网页效果

第104页

插入特殊符号

基本语法

第105页

插入特殊符号

部分特殊符号与对应代码

第106页

插入特殊符号

语法说明

在HTML文件中，特殊符号对应的代码，在网页中显示的就是该代码对应的特殊符号。

第107页

实例代码

第108页

表格(TABLE)标记--1

<table> 元素：定义一个表格。每一个表格只有一对<table>和</table>，一张页面中可以有多个表格。
<tr>元素：定义表格的行，一个表格可以有多行，所以<tr>对于一个表格来说不是唯一的。
<td>元素：定义表格的一个单元格。每行可以有不同数量的单元格，在<td>和</td>之间是单元格的具体内容。
需要注意的是：上述的三个元素必须、而且只能够配对使用。缺少任何一个元素，都无法定义出一个表格。

第109页

表格(TABLE)标记--2

表格的基本结构
<table>定义表格
<tr>
<th>定义表头</th>
</tr>
<tr>定义表行
<td>…</td>定义单元格
</tr>
</table>

第110页

表格(TABLE)标记--3

表格的属性 –1
width属性：指定表格或某一个表格单元格的宽度。单位可以是%或者象素。
height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素。
border属性：表格边线粗细

第111页

表格(TABLE)标记--2

表格的属性 –1
bgcolor属性：指定表格或某一个单元格的背景颜色。
background属性：指定表格或某一个单元格的背景图片。其属性值为一个URL地址。
align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式。

第112页

表格常用元素标签及说明

第113页

第114页

接上页

第115页

插入表格<table>

1  设置基本表格结构<table>、<tr>、<td>
2  设置表格标题<caption>
3  设置表格表头<th>
4  设置划分结构表格<thead>、<tbody>和<tfoot>

第116页

基本语法

   <table>标记表示插入表格；
  <tr>表示插入一行；
  <td>表示插入一列。

第117页

第118页

设置基本表格结构<table>、<tr>、<td>

  <table>定义表结构；
  <tr>定义行结构；
  <td>定义列结构。

第119页

第120页

接上页

第121页

设置表格标题<caption>

基本语法

<table>
<caption>插入表格标题</caption>
  <tr>
  </tr>
  <tr>
   <td></td>
  </tr>
</table>

在HTML文件中，使用成对<caption></caption>标记给表格插入标题。

第122页

第123页

接上页

第124页

设置表格表头<th>

基本语法

在HTML文件中，要将某一行作为表格文件的表头，只要将该行包含的列标记<td>改为<th>即可。

第125页

第126页

接上页

第127页

设置表格表头<th>

网页效果

第128页

设置划分结构表格<thead>、<tbody>和<tfoot>

基本语法

  <thead></thead>表示定义一组表头行；
  <tbody></tbody>表示定义表格主体部分；
  <tfoot></tfoot>表示为表格添加一个标注。

第129页

第130页

实例代码

第131页

网页效果

第132页

设置表格标记属性

1  设置表格的宽度和高度——width和height
2  设置表格的边框属性——border
3  设置边框的样式——frame、rules
4  设置表格的背景——bgcolor

第133页

设置表格的宽度和高度——width和height

在HTML文件中，<table>标记中的width用于设置表格的宽度，height属性用于设置表格的高度。

第134页

第135页

实例代码

第136页

设置表格的边框属性——border

表格边框属性

第137页

设置表格的边框属性——border

基本语法

 border属性用于设置边框的粗细；

 bordercolor设置表格边框的颜色。

第138页

第139页

接上页

第140页

设置跨行——rowspan

接上页

第158页

7.4.3 设置跨行——rowspan

网页效果

第159页

7.4.4 设置跨列——colspan

基本语法

第160页

7.4.4 设置跨列——colspan

第166页

7.4.5 设置单元格间距——cellspacing

实例代码

第167页

7.4.5 设置单元格间距——cellspacing

接上页

第168页

7.4.5 设置单元格间距——cellspacing

网页效果

第169页

7.4.6 设置单元格边距——cellpadding

基本语法

第170页

7.4.6 设置单元格边距——cellpadding

7.下拉列表
（2）列表框的长度
<select size=**>
（3）允许多选
<select size=** multiple>

第214页

表单(FORM)标记

8.图象域
<input type=image src=url>

第215页

<P>性别: <INPUT Type=Radio Name=sex Value="male" Checked>男
<INPUT Type=Radio Name=sex Value="female">女

第216页

第217页

第218页

第219页

<%
  name = Request("Name")
  If Request("sex")="male"    Then
            appellation = "先生"
  Else   appellation = "小姐"
  End If
  city = Request("City")
  loves =  Request("love")
  Memo = Request("Memo")
  Memo = Replace(Memo, vbCrLf, "<BR>")
%>
<HTML>
  <BODY>
     <FONT face="华文楷体" color="#990033" SIZE=5>
        <CENTER><% =name&appellation&" ：欢迎您!“ %><br>
                <p>您是<%=city%>人<br>
        </CENTER>
        <p>您喜欢的是：
        <UL><%=loves%></UL>
        您的留言是：<br>
        <p><%=Memo%>
     </FONT>
  </BODY>
</HTML>

文件Echo64.asp

ASP文件包括文本、HTML标记、ASP脚本语句（用<% %>界定符标记）。

第220页

第221页

<HTML>
  <BODY>
     <FONT face="华文楷体" color="#990033" SIZE=5>
        <CENTER><% =name&appellation&" ：欢迎您!" %><br>
                <p>您是<%=city%>人<br>
        </CENTER>
        <p>您喜欢的是：
        <UL><%=loves%></UL>
        您的留言是：<br>
        <p><%=Memo%>
     </FONT>
  </BODY>
</HTML>

Name=林琳； appellation=小姐； city= 北京；
loves=体育，音乐，电影
Memo= 你们好！
在哪儿能看到免费电影？

第222页

http://localhost/ w / Echo64.asp