HTML基础知识.ppt
HTML基础知识教学篇
• </HTML>
第13页，共42页。
4. 水平线标记<HR> • <HR>标记用于在文档中添加一条水平线，以分开文档的两个部
分。该标记有以下属性： • (1) ALIGN：指定线的对齐方式，取值为left（左对齐）、center
• <FONT COLOR = "#00FF00">电子商务网页设计</FONT>
第18页，共42页。
实例2.6 使用字体标记来设置文本的字体、字号和颜色，源代码如下所示------ 2-06.htm ------
<HTML> <HEAD> <TITLE>设置字体、字号和颜色</TITLE>
</HEAD>
（居中对齐）或right（右对齐），默认值为center。 • (2) COLOR：指定线的颜色。
• (3) NOSHADE：若指定该项，则显示一条无阴影的实线。
• (4) SIZE：指定线的宽度，以像素为单位。 • (5) WIDTH：指定线的长度，单位可以是像素或百分比（占页面
宽度的百分比）。
第14页，共42页。
1. HTML标记<HTML>
• <HTML>…</HTML>是全部文档内容的标记，分别在网页的第一个标记和最 后一个标记，其他所有的代码都位于这两个标记之间。可选的。
2. 首部标记<HEAD>
• <HEAD>… </HEAD>用语提供与WEB页相关的各种信息。
网页制作基础知识
4．制作工具的选择
可使用FrontPage、DreamWeaver等网页制作软件。在本案例中，将使用 DreamWeaver MX进行“网页制作学习园地”网站的创建。
1.2 理论知识
1.2.1 HTML语言
在Web的发展历史中，HTML技术是优秀而核心的Web技术之一。目前计算机上包含互 联网在内的大部分应用程序在交互操作上的核心原理都来自于HTML的链接设计思想。
<h#>...</h#> <b>...</b> <i>...</i> <u>...</u> <sup>...</sup> <sub>...</sub> <tt>...</tt> <cite>...</cite>
<em>...</em>
<address>...</address> <strong>...</strong> <pre>...</pre>
<font size=" ">
<font face=" ">
<font color=" ">
设置文字的颜色
2 . 文本样式标记
文本样式标记用于设置网页中文字格式化为特殊的形式，如加粗、倾斜等。
文本样式标记如下表：
标 记 说 明
定义标题级别，黑体字显示。"#"=1～6。<h1>显示的字号最大、<h6>最小。 设置粗体字 设置斜体字 设置下划线 设置文本为上标格式 设置文本为下标格式 设置打字机风格字体的文本 以引用或参考的形式格式化文本，通常显示为斜体。
网页设计与制作课件第1章
1.1.2 Web浏览器基本结构原理
知识点评
中文名称：网络浏览器或网页浏览器，简称浏览器 （Web Browser）。 浏览器是显示网页服务器或文件系统内的HTML文件，并让用户与这些文件 互动的一种软件。个人计算机上常见的网页浏览器包括Microsoft Internet Explorer、Opera和Netscape等。浏览器是最常用的客户端程序。 网页浏览器主要通过HTTP协议连接网页服务器而取得网页，HTTP容许网页 浏览器送交数据到网页服务器并且获取网页。网页的位置以URL（统一资源定位 符）指示，此乃网页的地址，以HTTP: //开始的便是通过HTTP协议登录。 网页通常使用HTML（超文本标记语言）文件格式，并在HTTP协议内以 MIME内容形式来定义。大部分浏览器均支持许多HTML以外的文件格式，例如 JPEG、PNG和GIF图像格式。在HTTP协议和URL内容结合下，网页设计者便可 以把图像、动画、视频、声音和多媒体包含在网页中，或让浏览者透过网页而浏 览它们。
上一页 下一页 返回
知识点评
Dreamweaver另外还提供了许多面板、检查器或窗口。若要打开Dreamweaver 面板、检查器或窗口，可以使用【窗口】菜单进行选择，如下图所示。
【窗口】菜 单项所包含 的内容
上一页 返回
1.3.2 创建本地虚拟站点
在本地创建虚拟站点，如下图所示。
目标案例
下一页 返回
步骤7：系统显示刚对网站的设置内容，如果要对设置不满，可以单击“上 一步”按钮更改设置。
上一页 下一页 返回
知识点评
7．“属性”检查器
用于显示网页中各个元素的相关属性，用户可以设置“属性”面板中的 各选项参数，对网页中的各个属性作设置和修改。如下图所示。
No1 网页设计基础知识
基本术语扫盲 网站的规划 DW CS4工作环境
HTML语言概览
HTML HTTP
CSS WebSite
JavaScript WebPage
URL WWW
FTP
DNS
DOM
HyperText
Markup Language 超文本标记语言
专门用于在Web上传递信息
或
index.html
◦ <HTML> <HEAD>
<title></title> <meta>
</HEAD> <BODY>
HTML 文件的正文
</BODY> ◦ </HTML>
<html>...</html> <head>...</head> <body>...</body> 是HTML语言的基本部分 元素总是成对出现，每一对元素一般都有一 个开始的标记（如<body>），也有一个结 束的标记（如</body>）。 元素的标记要用一对尖括号括起来，并且结 束的标记总是在开始的标记前加一个斜杠。
插入面板提供“常用”等8组面板视图，可以快 速插入各种对象。
（注意） 有些命令按钮旁 边有黑色小箭头，如 图像按钮 ，则该类 别下还包含子菜单项， 直接单击这类按钮会 执行该按钮的默认操 作，默认操作即最近 一次使用该按钮时的 选项。
属性面板用于显示或者修改所选对象的各种属性， 当选择不同的对象时属性面板也会随之改变。
HTML 文档描述网页 HTML 文档包含 HTML 标签和纯文本 HTML 文档也被称为网页 Web 浏览器的作用是读取 HTML 文档，并 以网页的形式显示出它们。浏览器不会显 示 HTML 标签，而是使用标签来解释页面 的内容。
html基础知识
HTML 基础知识培训一、HTML入门HTML英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。
用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。
自1990年以来HTML就一直被用作World Wide Web 的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage 的连结信息。
使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。
所谓超文本，因为它可以加入图片、声音、动画、影视等内容，因为它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。
过HTML可以表现出丰富多彩的设计风格图片调用：<img src="路径/文件名">文字格式：<font size="+5 " color="00FFFF">文字</font>通过HTML可以实现页面之间的跳转页面跳转：<a href="" title="" target="_blank">超级链接</a>通过HTML可以展现多媒体的效果音频、视频、动画上面我们在示例超文本特征的同时，采用了一些我们在制作超文本文件时需要用到的一些标签。
所谓标签，就是它采用了一系列的指令符号来控制输出的效果，这些指令符号用“<标签名属性=”值”></标签名>”来表示。
二、HTML的基本结构超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。
<html><head>头部信息</head><body>文档主体，正文部分</body></html>其中<HTML>在最外层，表示这对标记间的内容是HTML文档。
HTML基础知识
2.4 HTM L标记
2.图像标记<IMG>
在HTML中，使用IMG标记在网页中加入图像。它具有 两个基本属性src和alt，分别用于设置图像文件的位置和替 换文本。
上一页 下一页 返回
2.4 HTM L标记
2.4.6超链接标记
1.相对地址与绝对地址 URL 统一资源定位符，也被称为网页地址，是表示互联
上一页 下一页 返回
2.4 HTM L标记
2.4.3文本标记
1.<FONT> <FONT>标记用于控制网页上文字的字体，大小和颜色。
控制方式是利用属性设置得以实现的。 2.特殊符号
某些字符在HTML中具有特殊意义，如小于号(<)即定 义HTML标记的开始。这个小于号是不显示在最终看到的网 页单的。那如果希望在网页中显示一个小于号，该怎么办呢? 要在浏览器中显示这些特殊字符，就必须在HTML文档中使 用字符实体。
在<TD>和<TH>标记内使用colspan的取值表示水平 方向上合并的列数。
上一页 下一页 返回
2.4 HTM L标记
2.4.8表单标记
1.表单元素 <FORM>标记：用于在网页中创建表单区域，属于一
个容器标记，表示其他表单标记需要在它的包围中才有效。 其属性介绍如下。 action用来设置接收和处理浏览器递交的表单内容的服务器程 序的URL。 method：此属性告诉浏览器如何将数据发送给服务器，它指 定向服务器发送数据的方法(用POST方法还是用GET方法)。
上一页 下一页 返回
2.4 HTM L标记
2.4.10脚本标记
有时，网页中的一些特殊效果击要加入脚本语言才能够 实现，脚本语言是一种简化的编程语言，它可以生成许多的 网页特效，如滚动的文字、雪花效果、波浪效果等。‘常用 的脚本语言有3种，分别是JavaScript， VBScript和 Jscript。其中JavaS cript是IE不II Navigator都完全 支持的脚本语言，所以使用得最广泛。
HTML基础知识及应用
位置控制
通过ALIGN属性可以选择文字或图片的对齐 方式，LEFT表示向左对齐，RIGHT表示向右 对齐，CENTER表示居中。基本语法如下：
<DL> <DT>第一项 <DD>叙述第一项的定义 <DT>第二项 <DD>叙述第二项的定义 <DT>第三项 <DD>叙述第三项的定义
</DL> 查看例子
TABLE表格 表格
表格的基本结构 表格的标题 表格的尺寸设置 表格内文字的对齐、 表格内文字的对齐、t;DIV ALIGN=#> #＝left／right／center
另外，ALIGN属性也常常用在其它标签中， 引起其内容位置的变动。 如：<P ALIGN=#>
<HR ALIGN=#> <H1 ALIGN=#〉 #＝left／right／center
列表
无序号列表 序号列表 定义性列表
<caption align=top> ... </caption>
设置标题位于表格下方：
<caption align=bottom> ... </caption>
表格尺寸设置 表格的大小
一般情况下，表格的总长度和总宽度是根 据各行和各列的总和自动调整的，如果我们 要直接固定表格的大小，可以使用下列方式： <table width=n1 height=n2> width和height属性分别指定表格一个固定 的宽度和长度，n1和n2可以用像素来表示， 也可以用百分比（与整个屏幕相比的大小比 例）来表示
HTML初级知识点总结,最详细的总结
HTML超文本标记语言，一种规范预定义,已经定义好的各种标记，只需要我们把对应的标记放到合适的位置一. HTML基本语法与基本结构(重点）标记的使用1、标记一般成对出现，包含开始标记和结束标记2、标记可以嵌套使用，但是不能交叉使用3、标记不区分大小写属性的使用（属性控制内容的格式,额外的格式）1、书写位置在开始标记中2、格式：属性名=“属性值",多个属性之间使用空格分割3、不同的标记属性可能相同也可能不同4、属性使用的标记中,只能对本标中的内容记产生影响5、属性不冲突时，效果叠加，属性冲突时，就近原则html的基本结构〈html>-—--声明网页〈head〉———-网页的头部信息<title〉标题〈/title〉—---网页的标题</head><body〉—---网页的主体，网页内容主要展示的部分网页的主要内容</body>〈/html〉二. 文本格式的应用1、标题标记<hn>,n的取值1-6,1级标题最大效果:加粗显示，带有自动换行属性:align控制标题的对齐方式，取值left（左对齐，默认值）|center(居中）｜right （右对齐）2、段落标记<p〉效果:把内容分段展示，自动换行属性:align，控制段落内容的对齐方式,取值left（左对齐，默认值）|center（居中）｜right(右对齐）3、换行符〈br /〉，单标记，不需要结束标记，换行但不分段空格符号: 表示一个空格强制换行符：<br /〉4、水平线标记<HR />，单标记效果：水平线,默认是一个粗细为2px（像素）的线条属性：size 控制水平线的粗细，取值为整数，单位为像素（px）width 控制水平线的长度,取值可以是像素单位,也可以是百分数（相对于浏览器窗口百分比)noshade设置水平线不带有阴影，该属性不需要取值color 设置水平线的颜色，取值可以是英文的颜色值，也可以是十六进制的颜色代码align 控制水平线的对齐方式，取值left(左对齐）｜center(居中，默认值）|right(右对齐）5、分节标记<div〉效果：把内容设置为一节，前后带有自动换行属性：align控制div中内容的对齐方式,取值left（左对齐，默认值）｜center（居中）|right（右对齐）6、居中标记符<center>效果：把center标记中的内容居中显示7、文本控制标记<font>效果:控制字体的各种显示样式属性：size 控制字体的大小，取值为绝对值时，1--7，数字越大字体越大，取相对值时,参考的是默认字体（3号），取值在-2-—+4之间color 控制字体的颜色face 控制字体的字体，取值可以是多个值，多个值之间使用逗号分割,取值时从左往右依次取值，找到合适的值为止，假如都不支持，使用默认格式显示8、字体的物理样式加粗：<b>斜体：〈i>下划线:〈u〉删除线：<s〉上标:<sup〉下标：〈sub>1、常用逻辑字符〈ADDRESS〉网页设计者或维护者的信息,通常显示为斜体<CITE> 表示文本属于引用,通常显示为斜体<CODE〉• 表示程序代码,通常显示为固定宽度字体<DFN> • 表示定义了的术语，通常显示为黑体或斜体〈EM> 强调某些字词，通常显示为斜体〈KBD〉表用户的键盘输入,通常显示为固定宽度字体〈SAMP> 表示文本样本,通常显示为固定宽度字体〈STRONG〉特别强调某些字词，通常显示为粗体<VAR> 表示变量，通常显示为斜体2、列表标记1、有序列表,〈ol〉，需要配合〈li>标记使用一个<li>标记对应一个选项ol的属性：type 控制列表的符号样式，取值1|A|a｜i|I，默认是1start 控制列表的起始值，取值为任意的整数li的属性:type控制选项自身的符号样式，取值1|A｜a|i|Ivalue控制选项本身的起始值，取值为任意整数，但是修改自身起始值之后,会对同一个列表中本选项之后的同级<li〉标记产生影响2、无序列表，<ul>，配合<li>标记使用一个<li>标记对应一个选项ul的属性:type 控制所有选项的符号样式，取值disc(实心圆，默认值）｜circle（空心圆）｜square（方块）li的属性：type控制选项本身的符号样式li标记用在ol中，type属性的取值跟ol的type属性取值走，用在ul中，跟着ul的type属性取值走3、定义列表，<dl〉，完成对定义列表的声明<dt>，术语标记，可以理解为类似于列表选项的标题使用〈dd>,描述标记，可以理解为类似于列表的选项使用三. 在网页中使用图片标记：〈img>,单标记，不需要结束标记属性: src 引入图片资源的路径绝对路径：资源在服务器上的位置，该位置是从盘符出发相对路径：资源在服务器上的相对位置，从网页本身出发.。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2.1.1 HTML简介
• HTML(Hyper Text Markup Language )即“超 文本标记语言”，是用特殊标记来描述文档结构 和表现形式的一种语言。
• 目前，HTML已经发展到了4.0版本。 • 严格地说，HTML并不是一种程序设计语言，它
只是一些由标记和属性组成的规则，这些规则规 定了如何在页面上显示文字、表格、超链接等内 容。
• 标记在使用时必须用尖括号“<>”括起来，而且 大部分都是成对出现的，起始标记无斜杠，终止 标记有斜杠,当然也有少数标记是单独出现的。
• 起始标记和终止标记之间的部分，连同标记在内， 称为HTML的元素 。
2.2.2 标记属性
• 所谓标记属性，是指为了明确元素功能，在标记 中描述元素的某种特性的参数及其语法。
<ul type="Square"> <li>列表项
</ul>
• 排序列表 ：与符号列表不同，每个列表项目前面都是 一个编号字符，可以是数字也可以是字母。具体用法 如下：
<ol type="1" start="1"> <li>列表项
</ol>
2.3.3 图像
• 在HTML中，用<img>标记插入图片。这是一个单 独标记，用法如下：
• 标记的语法格式为：<标记名 属性名＝“属性值” 属性名＝“属性值”……> …… <／标记名>。
• 在HTML标记中，可以有多个属性，中间用空格 隔开即可。另外，不同的标记一般有不同的属性，
但也有一些属性是通用的 。
2.2.3 文档头部
• 文档头部就是包含在<head>和</head>之间的 所有内容，它不显示在页面中，但它会告诉浏览 器要如何处理文档主体内的内容 。
background、text 、leftmargin 等），用来设
置网页背景、文字、页边距等。
2.2.5 注释语句
• 注释语句又称为注释标记，这些标记在浏览网页 时不会显示，只是在编辑文件时可以看到。适当 使用注释语句，可以让网页的维护和更新变得十 分方便。
• 注释语句的格式： – <!—这中间是注释的内容-->
第2章 HTML基础知识
《网络程序设计-ASP》配套课件 支持网站：
本章内容简介
2.1 •什么是HTML 2.2 •HTML基本语法 2.3 •HTML基本元素 2.4 •HTML高级元素 2.5 •其他元素 2.6 •本章小结
2.1 什么是HTML
• 2.1.1 HTML简介 • 2.1.2 Web浏览器 • 2.1.3 HTML开发工具 • 2.1.4 制作一个简单的HTML文件
• 我们仍然推荐使用1.3节讲过的EditPlus软件 。
2.1.4 制作一个简单的HTML文件
• 新建、保存和浏览HTML文件的方法和ASP文件的方 法是完全类似的 。
• 输入如下图中的代码，然后保存到文件夹 C:\inetpub\wwwroot\asptemp\chapter2中，最 后在IE浏览器中输入 http://localhost/asptemp/chapter2/2-1.htm 即可访问该HTML文件。
• 常用的文字处理标记 ：
–<p>和</p>标记 –<br>标记 –<pre>和</pre>标记 –<hn>和</hn>标记 –<font>和</font>标记 –文字样式标记(如<b>以使用符号列表或排序列表标记，以 使得文档更具有条理性。
• 符号列表：符号列表又称为无序列表，每一个列表项 目的前面可以是空心原点、实心方块或实心圆点等符 号。具体用法如下：
2.1.2 Web浏览器
• 用户浏览网页实际上是通过Web浏览器实现的。 • 目前主流的浏览器有微软公司的IE（Internert
Explorer）和开源的Firefox以及遨游、腾讯TT 等浏览器。 • 我们以IE 6.0为例。
2.1.3 HTML开发工具
• HTML文件和ASP文件一样，实际上也是文本文 件，因此可以使用记事本、FrontPage、 Dreamweaver等任何文本编辑器编辑，编写完毕 后保存成扩展名为.htm或.html的文件就可以了。
• 主要标记 ： –<title>与</title>标记 –<bgsound>标记 –<meta>标记 –其他标记（比如<link>和<style>标记 ）
2.2.4 文档主体
• 文档主体是指包含在<body>和</body>之间的所 有内容，它们将显示在浏览器窗口内 。
• 文档主体可以包含文字、图片、表格等各种标记 。 • 在文档主体中还可以添加许多属性（如
–<img src="flower.jpg" width="270" height="167" border="1" alt="鲜花" align="left" >
• 在HTML中最常用的图像文件类型主要有JPG文件 和GIF文件，其他文件类型有的也可以用，但由于 文件太大或者显示效果不好，一般在网页设计中不 采用。
2.3.4 表格
• 表格有两个主要功能：
–一是用来展示文字或图像等内容；二是用来实现版面 布局，使网页更规范更美观。
• 表格是可以嵌套使用的。
表格的标记(1)
• <table>与</table>标记
– <table>标记用来声明表格，<table>和</table> 标记之间就是整个表格的内容。
2.2 HTML基本语法
• 2.2.1 HTML标记 • 2.2.2 标记属性 • 2.2.3 文档头部 • 2.2.4 文档主体 • 2.2.5 注释语句
2.2.1 HTML标记
• 在HTML文档中，标记（tag）实际上就是规定了 各种内容的显示方式，例如有标记<html>、 </html>、<head>、</head>、<body>.
2.3 HTML基本元素
• 2.3.1 文字 • 2.3.2 列表 • 2.3.3 图像 • 2.3.4 表格 • 2.3.5 超链接 • 2.3.6 字符实体
2.3.1 文字
• 文字设置：
–一般包括文字格式和文字样式的处理，文件格式即文 字的位置、段落等属性，文字的样式指文字的颜色、 字体大小等 。