是表格标签.使用border属性,定义没有边框的表格.使用summary属性定义表格的简短描述3.4.HTML元素
HTML元素是构建网页的一种单位,是由HTML标签和HTML属性组成的,HTML元素也是网页中的一种基本单位.
引用网址:
示例
尽情学习
这是一个HTML链接元素.
这是我的第一个网页,在这里
尽情学习
吧!
这是一个HTML段落元素,它包含了一个HTML链接元素.
3.5.HTML文档
HTML文档就是HTML页面,也就是网页,是由HTML元素组成的
引用网址:
互联网的所有内容都是由一个个HTML文档体现的
3.6.HTML注释
HTML注释,我们经常要在一些代码旁做一些HTML注释,这样做的好处很多,比如:
方便查找,方便比对,方便项目组里的其它程序员了解你的代码,而且可以方便以后你对自己代码的理解与修改等等.
HTML注释的开始使用
--,结束使用-->
引用网址:
HTML注释语法
--注释的内容-->
示例
--到梦之都XHTML教程的链接-->
学习XHTML
吧!
--链接结束-->
3.7.用一个例子来学习HTML语法
示例
--这些都是HTML的基础呀,要好好学.-->
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN""http:
//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
欢迎来到梦之都--链接到梦之都.-->
这是我的第一个网页,在这里
分析一下HTML语法示例中的内容
和是一对标签,而这是我的第一个网页,在这里
是HTML的主体元素
和是一对标签,而欢迎来到梦之都则是HTML的标题元素
和是一对标签,而
则是HTML的链接元素
此HTML元素以开始标签开头,内容是尽情学习,以结束标签中止
此标签中有一个属性href,属性的值为
猴子提示:
上面覆盖了XHTML程序中98%的语法,很简单吧:
)
4.1.HTML骨架--解剖一下HTML
其实本节的标题,应该叫HTML框架(就是描述HTML文件的结构),可惜HTML中有一种元素就叫框架,所以我在这里使用骨架
HTML骨架示例
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN""http:
//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML文件标题HTML头信息
HTML内容信息
上面这个框架应该够清晰了
引用网址:
说明
∙HTML文档首先要声明一个文档类型,也就是上面例子第一行,定义了XHTML1.1文档类型(文档类型是为了说明这个页面使用了何种HTML规则,或者结构,这个在将来的教程中会详细介绍)
∙和是HTML文档的开始与结束,也是HTML文档的根元素
∙除了文档类型外的所有页面内容,都包括在html元素
∙HTML文件中主要分为头信息head与内容信息body
文档head信息
∙头信息head可以容纳文档的HTML相关信息,比如标题title,页面的语言与文字类型,css样式,javascript代码,简短描述,关键词等内容,是用户无法直接看到的
文档body信息
∙内容信息body包括用户可以看到的全部内容,比如段落,链接,表格等
∙同学们还要注意一点,编写代码时一定要有层次感,head标签和body标签都是在html标签中的,所以我向后挫了一个tab键的距离,而HTML头信息又比head标签后挫了一个tab键的距离
上面就是html最基本的框架,而我们将来要学习的内容多数在body元素中,还有一少部分在head元素中
猴子推荐:
使用tab键产生HTML代码的层次感,可以使代码更清晰,更容易扩展.
4.2.HTMLhtml标签
html标签--代表HTML文档的开始
∙html标签是成对出现的,以开始,结束
∙引用网址:
∙属性
oCommon--一般属性
oxml:
lang--国际化属性
oxmlns--代表xml命名空间
odir--定义元素(文字)的对齐方式
示例
lang="zh-CN"dir="ltr">
说明
∙xmlns=""代表使用做为命名空间
∙xml:
lang="zh-CN"代表使用中文作为页面文字
∙dir="ltr"代表左到右(left-to-right)的文字对齐方式
4.3.HTMLhead标签
head标签--代表HTML文档的头信息
∙head标签是成对出现的,以
开始,结束
∙引用网址:
∙属性
oCommon--一般属性
说明
∙头(head)包含了当前文档的一些信息,例如标题信息,meta信息等,正常情况下头信息是不会显示在HTML文档中的.
∙head元素包含的标签:
otitle标签
obase标签
olink标签
ostyle标签
oscript标签
ometa标签
4.2.1HTMLtitle标签
title标签--代表HTML文档的标题
∙title标签是成对出现的,以
开始,结束∙引用网址:
∙属性
oCommon--一般属性
示例
XHTMLtitle标签事例说明
∙此标签只能在head标签内出现
∙title的内容通常在浏览器的标题栏中显示
∙浏览器中收藏夹内书签的名称是title的内容
∙title的内容可以方便搜索引擎索引页面
∙从搜索引擎搜索到的内容的标题往往是网页title的内容
∙title通常体现了网页的主体内容,所以记得一定要加上:
)
使用技巧
比如"关于我们"这个页面,title内容的写法通常是"梦之都--关于我们"
比如网站的"首页",title内容的写法通常是"首页--介绍网站建设知识(HTML教程,CSS教程)"
猴子提示:
title的内容要和网站本身有关联性,不能是独立的.
4.5.HTMLbody标签
body标签--代表HTML文档的主体
∙body标签是成对出现的,以
开始,结束∙引用网址:
∙属性
oCommon--一般属性
说明
∙HTML文档的所有内容应该全部放在此标签中.比如浏览器所能表现的文字,图像,链接等
5.有趣的试验
5.1.HTML分段显示
5.2.HTML换行
5.3.HTML强调与斜体
5.4.HTML按标题显示
5.5.HTML大于与小于
5.6.HTML空格
好,你已经掌握HTML的基本骨架了,现在我们来做几个小试验
5.1.HTML分段显示
大家应该发现一个问题,在文本编辑器里编辑的代码无论怎样给文字换行,在浏览器里显示的都是一行.大家可以试试下面两个例子
在这里开始学分段!
恩?
不好用?
我们可以把上面的代码复制到文本编辑器中,文本编辑器中的代码虽然换行了,但是实际页面并没有换行,这是因为浏览器并不认识记事本里的空格与回车,所以只有加一个标签,让浏览器知道
示例
在这里
开始学分段!
啊!
可以了!
p标签是paragraph的缩写,是段落的意思.由
与
组成的元素可以显示成一个段落.5.2.HTML换行
前面我们学会了分段显示.可是怎样在一个段落中换行呢?
答:
使用br标签
在这里
开始学换行!
再换行
5.3.HTML强调与斜体
可以把文字加重(强调)或斜体显示
示例
强调
斜体
HTML强调与斜体示例--可以尝试编辑
∙HTML强调与斜体示例
HTML教程强调与斜体示例
强调
斜体
上面的内容对应着下面的代码;
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN""http:
//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML强调与斜体示例强调
斜体
5.4.HTML按标题显示
示例
标题1
标题2
标题3
标题4
标题5
标题6
上面是六个标题标签,是从大到小的顺序的,h1最大,h6最小
猴子提示:
h1标签在一个页面中只能使用一次(它就是页面的主标题,这相当于一篇文章不会有很多主标题一样),但是h2到h6标签可以使用多次,从h1到h6应该是大到小的顺序.
HTML按标题显示示例--可以尝试编辑
∙HTMLh标签示例
"HTML教程h标签示例
标题1--一个页面只能有一个
标题2
标题3
标题4
标题5
标题6
上面内容对应下面代码:
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN""http:
//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTMLh标签示例标题1--一个页面只能有一个
标题2
标题3
标题4
标题5
标题6
5.5.HTML大于与小于
3<4
上面这个表达式怎么显示?
如果原封不动的写入HTML文件中是不会正常显示的.因为小于号是一个HTML实体(HTML实体:
键盘无法表示的符号,或者HTML本身要用的符号,比如HTML标签的开始<,与结尾>,还有属性值需要使用的"引号等
遇到这种情况时需要使用HTML实体来显示(参见HTML实体)
<可以显示<小于号>可以显示>大于号
所以上面的3<4的式子,要这样表示:
示例
3<4
HTML大于与小于示例--可以尝试编辑
∙HTML大于与小于示例
HTML教程大于与小于示例
大于>
小于<
上面内容对应下面代码
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN""http:
//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML大于与小于示例大于>
小于<
5.6.HTML空格
如何在网页中插入HTML空格?
通常在网页中插入一个空格的时候可以使用普通的空格。
示例
空格
上面的示例中空格两个字中间有一个空格,但是如果有多个空格在网页中将显示为一个,同学们可以自己试一下。
HTML空格实体插入多个空格
可以使用 表示是一个空格。
这种编码称为HTML实体。
示例
空 格
上面的代码插入了5个空格。
6.1.HTML链接--a标签--把我和世界连起来
目录
1.a标签
2.链接语法
3.链接a标签说明
4.延伸阅读
链接是超级链接的缩写,英文是hyperlink。
HTML中的H就是hypertext的缩写,超文本的意思。
超文本链接语言(网页)的精髓就是链接,通过链接才可以把世界各地的网页链到一起,成为互联网。
a标签
a标签--代表HTML链接
∙a标签是成对出现的,以开始,结束
∙引用网址:
∙属性.
oCommon--一般属性
oaccesskey--代表一个链接的快捷键访问方式
ocharset--指定了链接到的页面所使用的编码方式,比如UTF-8
ocoords--使用图像地图的时候可以使用此属性定义链接的区域,通常是使用x,y坐标
ohref--代表一个链接源(就是链接到什么地方)
ohreflang--指出了链接到的页面所使用的语言编码
orel--代表文档与链接到的内容(href所指的内容)的关系
orev--代表文档与链接到的内容(href所指的内容)的关系
oshape--使用图像地图的时候可以使用shape指定链接区域
otabindex--代表使用"tab"键,遍历链接的顺序
otarget--用来指出哪个窗口或框架应该被此链接打开
otitle--代表链接的附加提示信息
otype--代表链接的MIME类型
∙a,是anchor(锚)的第一个字母
链接语法
显示的文字
链接a标签说明
∙a--是链接的标签
∙href--是链接的属性,告诉浏览器链接到的网址(URI)
∙url--是我们要链接到的网页或者文件。
url可以是一个绝对的网页,如:
∙
o如:
dreamdu.html,学习相对路径和绝对路径
ourl除了是网页外,还可以是其它的文件(如文本文件,pdf文件等).
ourl还可以是指向HTML文件中的一个位置.
ourl还可以是Email地址.
∙显示的文字--是我们想要显示的文字,浏览者点击'显示的文字'就会连接到url页面.
示例
点击链接到--梦之都XHTML教程
HTML链接示例--可以尝试编辑
∙HTMLa标签示例
梦之都HTML教程,a标签示例.
使用绝对链接,访问
使用相对链接,访问html教程
上面内容对应下面代码
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN""http:
//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTMLa标签示例使用相对链接,访问html教程
∙HTML链接到指定位置示例
梦之都HTML教程,HTML指定位置的链接示例.
链接到页面下部
链接到页面上部
链接到Math函数与属性使用语法
上面内容对应下面代码
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN""http:
//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML链接到指定位置示例链接到页面下部
链接到页面上部
链接到Math函数与属性使用语法
∙HTML邮件链接示例
梦之都HTML教程,HTML邮件链接示例.
给我写邮件
上面内容对应下面代码
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN""http:
//www.w3.org/TR/xhtml11/DTD/xhtm
展开阅读全文
相关搜索