HTML.docx
- 文档编号:491009
- 上传时间:2023-04-29
- 格式:DOCX
- 页数:56
- 大小:51.48KB
HTML.docx
《HTML.docx》由会员分享,可在线阅读,更多相关《HTML.docx(56页珍藏版)》请在冰点文库上搜索。
HTML
3.1.HTML语法
HTML语法非常简单,组成HTML语法的元素只有HTML标签与HTML属性.
HTML文档(页面)[国家]--->HTML元素[家庭]--->HTML标签[重要成员,男人女人]--->HTML属性[其它成员,比如孩子]
3.2.HTML标签
HTML标签是HTML语言中最基本的单位,HTML标签是HTML语言最重要的组成部分.
∙通常要用两个角括号括起来:
<和>.
∙都是闭合的(闭合就是标签的最后要有一个/,来标示结束.),但不一定是成对出现的,比如
和一对标签.(是开始标签,是结束标签,在开始和结束标签中可以有内容),比如就是单独的.(注意要在最后加上/,以标示其是独立的)
∙标签是大小写无关的,
跟表示的意思是一样的.标准推荐使用小写.HTML标签语法
HTML标签(两种形式,成对与不成对):
<标签名>内容标签名>
<标签名/>
示例
表格的开始标签与结束标签
单独出现的换行标签
常用HTML标签
∙html标签--定义HTML文档.
∙body标签--定义HTML文档的内容.
∙p标签--定义段落.
∙h1-h6标签--定义标题.
∙html注释--定义注释内容.
3.3.HTML属性
HTML属性--一般都出现在HTML标签中,HTML属性是HTML标签的一部分
∙标签可以有属性,它包含了额外的信息.属性的值一定要在双引号中
∙标签可以拥有多个属性
∙属性由属性名和值成对出现
∙引用网址:
HTML属性语法
<标签名属性名1="属性值"属性名2="属性值"...属性名N="属性值">标签名>
示例
标签是超链接标签.使用href属性,可以定义链接的位置(URI)代码: 标签 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文档首先要声明一个文档类型,也就是上面例子第一行,定义了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--一般属性 示例 说明 ∙此标签只能在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"> 强调 斜体 5.4.HTML按标题显示 示例 上面是六个标题标签,是从大到小的顺序的,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"> 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"> 大于> 小于< 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页面. 示例 HTML链接示例--可以尝试编辑 ∙HTMLa标签示例 梦之都HTML教程,a标签示例. 使用绝对链接,访问 使用相对链接,访问html教程 上面内容对应下面代码 DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN""http: //www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> ∙HTML链接到指定位置示例 梦之都HTML教程,HTML指定位置的链接示例. 链接到页面下部 链接到页面上部 链接到Math函数与属性使用语法 上面内容对应下面代码 DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN""http: //www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> ∙HTML邮件链接示例 梦之都HTML教程,HTML邮件链接示例. 给我写邮件 上面内容对应下面代码 DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN""http: //www.w3.org/TR/xhtml11/DTD/xhtm 如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。是表格标签.使用border属性,定义没有边框的表格.使用summary属性定义表格的简短描述
标题1
标题2
标题3
标题4
标题5
标题6
标题1--一个页面只能有一个
标题2
标题3
标题4
标题5
标题6