HTML 基本教程.docx
《HTML 基本教程.docx》由会员分享,可在线阅读,更多相关《HTML 基本教程.docx(15页珍藏版)》请在冰豆网上搜索。
HTML基本教程
HTML-初始代码:
Hyunpa
Myfirstd
什么是HTML?
HTML是用来描述网页的一种语言。
∙HTML指的是超文本标记语言(HyperTextMarkupLanguage)
∙HTML不是一种编程语言,而是一种标记语言(markuplanguage)
∙标记语言是一套标记标签(markuptag)
∙HTML使用标记标签来描述网页
HTML标题文本代码
HTML标题(Heading)是通过
-等标签进行定义的。
Thisisaheading1
Thisisaheading2
Thisisaheading3
*
Thisisheading1
Thisisheading2
Thisisheading3
Thisisheading4
Thisisheading5
Thisisheading6
请仅仅把标题标签用于标题文本。
不要仅仅为了产生粗体文本而使用它们。
请使用其它标签或CSS代替。
HTML段落
HTML段落是通过
标签进行定义的。
这是段落。
这是段落。
这是段落。
段落元素由p标签定义。
HTML链接
HTML链接是通过标签进行定义的
Thisisalink
注释:
在href属性中指定链接的地址。
HTML图像
HTML图像是通过标签进行定义的。
注释:
图像的名称和尺寸是以属性的形式提供的。
HTML元素
HTML文档是由HTML元素定义的。
HTML元素
HTML元素指的是从开始标签(starttag)到结束标签(endtag)的所有代码。
开始标签
元素内容
结束标签
Thisisaparagraph
Thisisalink
注释:
开始标签常被称为开放标签(openingtag),结束标签常称为闭合标签(closingtag)。
HTML元素语法
∙HTML元素以开始标签起始
∙HTML元素以结束标签终止
∙元素的内容是开始标签与结束标签之间的内容
∙某些HTML元素具有空内容(emptycontent)
∙空元素在开始标签中进行关闭(以开始标签的结束而结束)
∙大多数HTML元素可拥有属性
嵌套的HTML元素
大多数HTML元素可以嵌套(可以包含其他HTML元素)。
HTML文档由嵌套的HTML元素构成。
HTML文档实例
Thisismyfirstparagraph.
上面的例子包含三个HTML元素。
HTML实例解释
元素:
Thisismyfirstparagraph.
这个
元素定义了HTML文档中的一个段落。
这个元素拥有一个开始标签
,以及一个结束标签
。
元素内容是:
Thisismyfirstparagraph。
元素:
Thisismyfirstparagraph.
元素定义了HTML文档的主体。
这个元素拥有一个开始标签
,以及一个结束标签。
元素内容是另一个HTML元素(p元素)。
元素:
Thisismyfirstparagraph.
元素定义了整个HTML文档。
这个元素拥有一个开始标签,以及一个结束标签。
元素内容是另一个HTML元素(body元素)。
不要忘记结束标签
即使您忘记了使用结束标签,大多数浏览器也会正确地显示HTML:
Thisisaparagraph
Thisisaparagraph
上面的例子在大多数浏览器中都没问题,但不要依赖这种做法。
忘记使用结束标签会产生不可预料的结果或错误。
注释:
未来的HTML版本不允许省略结束标签。
空的HTML元素
没有内容的HTML内容被称为空元素。
空元素是在开始标签中关闭的。
就是没有关闭标签的空元素(
标签定义换行)。
在XHTML、XML以及未来版本的HTML中,所有元素必须被关闭。
在开始标签中添加斜杠,比如
,是关闭空元素的正确方法,HTML、XHTML和XML都接受这种方式。
即使
在所有浏览器中都是有效的,但使用
其实是更长远的保障。
HTML提示:
使用小写标签
HTML标签对大小写不敏感:
等同于
。
许多网站都使用大写的HTML标签。
W3School使用的是小写标签,因为万维网联盟(W3C)在HTML4中推荐使用小写,而在未来(X)HTML版本中强制使用小写。
HTML属性
HTML文档是由HTML元素定义的。
HTML属性
HTML标签可以拥有属性。
属性提供了有关HTML元素的更多的信息。
属性总是以名称/值对的形式出现,比如:
name="value"。
属性总是在HTML元素的开始标签中规定
属性实例
HTML链接由标签定义。
链接的地址在href属性中指定:
Thisisalink
Thisisalink
更多HTML属性实例
属性例子1:
定义标题的开始。
拥有关于对齐方式的附加信息。
TIY:
居中排列标题
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"
"http:
//www.w3.org/TR/html4/loose.dtd">
Thisisheading1
上面的标题在页面中进行了居中排列。
上面的标题在页面中进行了居中排列。
上面的标题在页面中进行了居中排列。
属性例子2:
定义HTML文档的主体。
拥有关于背景颜色的附加信息。
TIY:
背景颜色
请看:
改变了颜色的背景。
属性例子3:
定义HTML表格。(您将在稍后的章节学习到更多有关HTML表格的内容)
拥有关于表格边框的附加信息。
HTML提示:
使用小写属性
属性和属性值对大小写不敏感。
不过,万维网联盟在其HTML4推荐标准中推荐小写的属性/属性值。
而XHTML要求使用小写的属性/属性值。
始终为属性值加引号
属性值应该始终被包括在引号内。
双引号是最常用的,不过使用单引号也没有问题。
在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:
name='Bill"HelloWorld"Gates'
HTML属性参考手册
我们的完整的HTML参考手册提供了每个HTML元素可使用的合法属性的完整列表:
完整的HTML参考手册
下面列出了适用于大多数HTML元素的属性:
属性
值
描述
class
classname
规定元素的类名(classname)
id
id
规定元素的唯一id
style
style_definition
规定元素的行内样式(inlinestyle)
title
text
规定元素的额外信息(可在工具提示中显示)
如需更多关于标准属性的信息,请访问:
HTML标准属性参考手册
HTML标题
在HTML文档中,标题很重要。
HTML标题
标题(Heading)是通过
-等标签进行定义的。
定义最大的标题。
定义最小的标题。
实例
Thisisaheading
Thisisaheading
Thisisaheading
Thisisheading1
Thisisheading2
Thisisheading3
Thisisheading4
Thisisheading5
Thisisheading6
请仅仅把标题标签用于标题文本。
不要仅仅为了产生粗体文本而使用它们。
请使用其它标签或CSS代替
注释:
浏览器会自动地在标题的前后添加空行。
注释:
默认情况下,HTML会自动地在块级元素前后添加一个额外的空行,比如段落、标题元素前后。
标题很重要
请确保将HTMLheading标签只用于标题。
不要仅仅是为了产生粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。
应该将h1用作主标题(最重要的),其后是h2(次重要的),再其次是h3,以此类推。
HTML水平线
标签在HTML页面中创建水平线。hr元素可用于分隔内容。
实例
Thisisaparagraph
Thisisaparagraph
Thisisaparagraph
hr标签定义水平线:
这是段落。
这是段落。
这是段落。
提示:
使用水平线(
标签)来分隔文章中的小节是一个办法(但并不是唯一的办法)。HTML注释
可以将注释插入HTML代码中,这样可以提高其可读性,使代码更易被人理解。
浏览器会忽略注释,也不会显示它们。
注释是这样写的:
实例
--Thisisacomment-->
--这是一段注释。
注释不会在浏览器中显示。
-->
这是一段普通的段落。
注释:
开始括号之后(左边的括号)需要紧跟一个叹号,结束括号之前(右边的括号)不需要。
提示:
合理地使用注释可以对未来的代码编辑工作产生帮助。
HTML提示-如何查看源代码
您一定曾经在看到某个网页时惊叹道“WOW!
这是如何实现的?
”
如果您想找到其中的奥秘,只需要单击右键,然后选择“查看源文件”(IE)或“查看页面源代码”(Firefox),其他浏览器的做法也是类似的。
这么做会打开一个包含页面HTML代码的窗口。
HTML标签参考手册
W3School的标签参考手册提供了有关这些标题及其属性的更多信息。
您将在本教程下面的章节中学到更多有关HTML标签和属性的知识。
标签
描述
定义HTML文档。
定义文档的主体。
to
定义HTML标题
定义水平线。
-->
定义注释。
HTML段落
可以把HTML文档分割为若干段落
HTML段落
段落是通过
标题定义的。
实例
Thisisaparagraph
Thisisanotherparagraph
展开阅读全文
相关搜索