《HTML教程》-第1部分 基础知识_第1页
《HTML教程》-第1部分 基础知识_第2页
《HTML教程》-第1部分 基础知识_第3页
《HTML教程》-第1部分 基础知识_第4页
《HTML教程》-第1部分 基础知识_第5页
已阅读5页，还剩42页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1.1什么是HTML？

HTML（HyperTextMarkupLanguage）是一种用于制作网页的超文本标记语言。我们看到的丰富多彩的网页都是（实际上，不全是。要制作丰富的网页离不开CSS和JavaScript。）用它来制作的。在实际应用中：HTML负责制作网页的内容，也就是网页的可见部分；CSS用于制作网页的样式，也就是网页内容看起来是什么样子，比如字体大小、颜色等；JavaScript用于控制网页的动作，如发起一个请求，接收来自服务器的消息，还可以动态在网页上添加元素和内容。那么什么是HTML5呢？根据W3School的说法，包含如下内容[1]：HTML5是最新的HTML标准。HTML5是专门为承载丰富的web内容而设计的，并且无需额外插件。HTML5拥有新的语义、图形以及多媒体元素。HTML5提供的新元素和新的API简化了web应用程序的搭建。HTML5是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。1.1.1HTML网页结构

HTML的文档结构与清单1-1所示。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Titleofthedocument</title></head><body>Contentofthedocument......</body></html>1、HTML结构

可以看到，HTML文档结构分为两部分：文档类型声明和文档。文档类型声明相比于以前（HTML4.01）有了很大的简化，HTML5的文档类型只需要简单的声明如下：<!DOCTYPEhtml>这里需要说明的是，它与HTML的要求相同，即不区分大小写，也就是说<!doctypehtml><!DOCTYPEHTML><!DoctypehTml>都表示相同的文档类型，没有任何区别。第二部分是文档部分。可以看到文档的根标记是<html>，其下有两个标记分别是<head>和<body>。<head>是HTML所有头元素的容器，在1.1.2节中，我们将详细介绍这一标记。2、HTML标记HTML由一系列标记组成，如清单1-1中的<html>和<body>，即由标记名（如html）和一对尖括号组成。在XHTML（ExtensibleHTML，即更严格更纯净的HTML）中规定：任何标记都必须有开始标记（如<html>）和结束标记（</html>）组成。可以看出结束标记是在开始标记名称之前加“/”符号构成的。有一些HTML标记如<br>（回车换行标记），按照规定也必须书写为<br/>，后面的“/”不能省略，表示这个标记即是开始标记，也是结束标记，这一点需要注意。HTML是由一系列标记组成的，标记之间只能相互嵌套，不能相互交叉。如：<html><body></body></html>一定不能写成：<html><body></html></body>因为后者是标记之间相互交叉，违反HTML的规定。虽然浏览器对于后者也不会报语法错误，甚至还能正常显示，但这并不意味着这样写就是合法的。这样的写法只会给别人造成逻辑上的混乱。到底需不需要HTML结构？其实，对于浏览器来讲，有没有HTML的结构并不重要。只要是HTML标记浏览器就能正常解释。如下面的HTML内容：<imgsrc="images/flower.jpg"/>注意，这里仅有一个img标记（图像标记，后面详细介绍）。但这是一份合格的HTML文档，只要当前目录images下有flower.jpg文件，该网页就能正常显示。既然HTML结构并不重要，我们还要按要求的格式编写HTML吗？回答是肯定的。无论是从整体逻辑上来讲，还是从完整性上来讲，编写符合HTML结构的网页是必须的，不能只图方便，而忽略HTML的结构，更不能编写错误的结构！3、HTML属性

属性用于说明标记某些方面的特征。如清单1-1中的<metacharset="UTF-8">charset=”UTF-8”就是一个属性，它表示网页使用的编码方式。属性由名/值对构成，格式为：

属性名=”属性值”当然，HTML中也有一些属性只有属性名的，这种情况既可以只用属性名，也可以写成名/值对的形式。如：<inputtype=”text”required/>也可以写作：<inputtype=”text”required=”required”/>都是正确的。HTML有一些全局属性，这些全局属性可以出现在绝大多数的HTML元素（标记）中，学习这些属性对于后续学习CSS和JavaScript有很大帮助。表1-1列出了HTML的全局属性。表1-1HTML全局属性属性说明备注accesskey指定激活元素的快捷键，以Alt+指定的字母激活该元素。

class指定元素的类别名称，可引用CSS类别选择器。

contenteditable指明元素的内容是否可以进行编辑。HTML5新属性contextmenu指定元素的上下文菜单，元素被激活时显示。HTML5新属性data-*存储页面或应用程序的私有定制数据。HTML5新属性dir指定元素中内容的文本方向。

属性说明备注draggable指明元素是否可以拖动。HTML5新属性dropzone指明在元素上拖动数据时，是否拷贝、移动或链接被拖动数据。HTML5新属性hidden指定元素是否可见，为布尔属性。HTML5新属性id指定元素的唯一id。可引用CSS的ID选择器。

lang指定元素内容的语言。不常用spellcheck指定是否对元素进行拼写和语法检查。HTML5新属性属性说明

备注style指定元素的行内CSS样式。由于“内容、样式和动作相分离的原则”，该属性不常用。

tabindex指定元素的tab键次序。

title指定有关元素的额外信息。如鼠标悬停在图像上时出现的提示。

translate指定是否应该翻译元素内容。HTML5新属性1.1.2HTML头元素head

Head标记是HTML中十分重要的一个标记。虽然它承载的是网页中不可见的部分，但它包含了脚本、样式和网页的元信息。这些信息对于网页本身起到了至关重要的作用，比如决定网页的显示风格、网页交互处理、网页编码方式，以及网络搜索引擎能否有效的搜索到你的网页！head中可出现的标记如表1-1所示。表1-2head中可以出现的标记标记说明<title>用于定义文档的标题。<base>（1）指定网页中所有链接的默认地址；（2）指定网页中所有链接的显示目标。<link>用于连接网页的外部资源。<meta>用于定义HTML文档的元数据。<script>用于定义网页中执行的脚本。<style>用于指定网页的显示样式。这里我们对title、base和meta标记进行介绍link和style在第二部分CSS中进行介绍script在第三部分JavaScript中进行介绍。1、title标记

仅仅知道title标记规定HTML文档的标题还是不够的，还要知道这个标题会用在什么地方。它可以规定：★浏览器窗口标题栏的标题；★网页被放入收藏夹时显示的标题。★显示搜索引擎显示的网页标题。了解这些对我们来说是十分必要的，它即可以显示在标题栏中，也可以显示在收藏夹中，还可以显示在搜索结果中。一些有意义的，好听的名字可以引起使用者的注意，有利于网页的推广。2、base标记

现在你已知道base有两个作用：（1）指定网页中所有链接的默认地址；（2）指定所有链接的显示目标。这听起来有些抽象，让我们以一个具体的例子来说明。<!DOCTYPEhtml><html> <head> <basehref="../images/"/> <basetarget="_blank"/> </head> <body>

<imgsrc="flower.jpg"/>

<ahref="">百度一下</a> </body></html></body>上述代码说明如下：在上述代码中，我们通过base的href=“../images/”指明了当前网页中所有链接的默认地址。所以在imgsrc=“flower.jpg”中就无需再指定图片的路径了，但实际上src的完整路径为“../images/flower.jpg”这里需要注意的是路径中最后的路径分割符“/”是不能省略的。网址的打开位置是新的浏览器窗口，而不是当前链接（即<a>标记）所在的窗口。因为<basetarget=“_blank”/>指定了当前网页中所有链接的打开都在新窗口中完成。3、meta标记

Meta标记定义了HTML文档的元信息，如文档信息（编辑者，编码方式等）和搜索引擎有关的关键词。这部分内容虽然用户不能看到，但对于网页制作者而言却是十分重要的。Meta标记中包含以下属性：

▲content；▲name；▲http-equiv；▲scheme。其中，content是必选属性，其他三个是可选属性。这些属性的意义如表1-2所示。表1-3meta标记属性属性值说明content文本定义与http-equiv或name属性相关的元信息。必须与http-equiv或name属性一起使用。nameauthordescriptionkeywordsgeneratorrevisedothers把content属性关联到一个名称。http-equivcontent-typeexpiresrefreshset-cookie把content属性关联到HTTP头部。还可以指示服务器在发送实际文档内容之前，先发送MIME文档头信息（以名/值对表示）。scheme文本定义用于翻译content属性值的格式。这些元信息可以作为HTTP请求头的内容发送到服务器，发送时是以名/值对的形式发送的，这对于服务器端编程是非常重要的。Meta标记的主要用途有三个，分别是文档描述、文档关键字和文档重定向。下面分别举例说明这三个用途。（1）文档描述可以添加文档作者、修订者和文档产生器等信息，如清单1-3所示。清单1-3meta标记文档描述<html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="author"content="cjh"><metaname="revised"content="xc,5/1/17"></head><body><p>该文档用meta标记说明了文档的创建者和修订者。</p></body></html>代码说明如下图（2）文档关键字文档关键字对于搜索引擎发现网页是非常有用的。搜索引擎根据网页中提供的关键字对网页进行分类，正确的关键字可以帮助搜索引擎发现你的网页，从而使你的网页更具有人气！meta中指定关键字的方法如清单1-4所示。清单1-4meta指定文档关键字<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<metaname="keywords"content="HTML,CSS,JavaScript,Ajax"/>

</head>

<body>

<p>该文档使用keywords描述了网页的关键字，利用搜索引擎发现网页。</p>

</body></html>代码说明如下图（3）文档重定向这是一项非常实用的技术。比如需要用户登录的网站中，用户登录后自动重定向到刚才访问的网页，这样会增加网站用户的友好性。文档重定向的实现方法如清单1-5所示。清单1-5meta实现网页重定向<!D

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论