HTML的基础知识.ppt

1、第2章 HTML基础,陈飞,2020/8/15,2.1 HTML语言,起源：1991年英国Tim-Berners Lee 研制开发的,2,它是描述某个事物应该如何显示在计算机屏幕上。,HTML就是以特殊的标记形式存储为通常的文本文件。,是一种专门用于格式化Web数据的语言。,HTML: HyperText Markup Language的缩写，中文称为“超文本标记语言”。,3,HTML是一种标记语言,计算机所能理解的记号就是我们所说的标记，用于指明文档中数据的显示格式或数据意义。,标记语言就是使用标记来界定和描述这些数据的语言。,用来赋予电子文件除了内容之外的其他特殊含义。,HTML文件,根据

2、HTML语法所写出来的文件称为HTML文件。在保存HTML文件时，需保存为纯文本文件，并用.html或.htm作为扩展名。,4,可以使用文本文件编辑软件（如记事本）打开或编辑HTML文件。而要把HTML文件显示出来，则必须借助浏览器。,HTML优越性,HTML使用的标记是固定的，预先定义好的元素标记，用来标识一般用途的网页元素。 虽然HTML原始文件为纯文本文件，没有图片和动画等多媒体组件，但却包含了指向这些多媒体组件的指针。 HTML文件的优点是其跨平台性。即任何可以运行浏览器的计算机都能阅读并显示HTML文件，不管其操作系统是什么，并且显示结果相同。,5,认识网页-一个HTML文件,打开一

3、个网页（如） 点击浏览器菜单“查看”“源文件”菜单，弹出一个记事本文件。 不管网页多么复杂，都是由这些写在记事本中的HTML代码写成的。,6,7,8,HTML的缺点,在输入语句时，常常需要反复输入一些相同的格式，浪费大量时间和精力。 在编辑期中无法准确知道网页在浏览器中显示的样子。为此需要反复调试，非常繁琐。 无法对多个网页进行管理，更无法知道网页中的链接是否正确,9,HTML语言结构,HTML网页是由标记和文本两部分组成的。 标记： 标记本身不在网页中显示出来，用于组织文件的内容和指导文件的输出格式的作用。,10,文本在起始链接签和结尾链接签中间的部分是元素体就是文本，将显示于网页的主体上面

4、。,绝大多数标记是“容器”， 即它有起始标记和结尾标记。一般用“括起来。,如,标记的种类,单标记,11,有些标记单独使用就能发号施令，控制网页的效果。 如“ ”就是一个最常用的单标记，它表示换行。,双标记,大部分标记必须成对使用，由“始标记”和“尾标记”两部分构成。,如“ 和就是一对成对出现的双标记，缺一个标记就无法执行。,标记的种类,始标记 尾标记,12,告诉web浏览器从此处开始执行该标记所表示的功能。,告诉web浏览器在这里结束该功能。执行一般结束标记的形式是在开始标记前面加上一斜杠。,13,标记属性 每一个标记的开始标记都有名称和可选择的属性，标记的名称和属性都在起始链接签内标明。 属

5、性语法： ,如“ ,标记”表示在文档当前位置画一条水平线。,在里面加上一些属性来控制水平线的样式， 如“ size = 3 ”表示水平线的粗细为 3 像素， “align = left ”表示对齐方式为左对齐。,14,编写HTML语言应注意的规范,所有标记都要用括起来。,成对出现的标记，最好同时输入起始标记和结束标记。,代码不区分大小写，如与都可以。,标记中不要有空格，否则浏览器可能无法识别 与 不一样。,标记的属性可以用“”引起来，也可以不引。 或,15,HTML文件的构成,网页的代码逻辑上可以分成两部分： 头部信息 头部信息放在“ ”与“/head ”标记之间。,放置关于此HTML文件的信

6、息，如提供索引，定义CSS样式等。,头部内容不在网页中直接显示，通过其他方式显示。,主体部分 这部分内容是网页中的正文部分，直接显示在网页页面中。 用双标记： “ ”和“/body ”把这一部分标记出来。,16,这两部分代码都包含在“ ”与“/html ”之间，以表示该标记里的内容为 HTML 。,17,18,编写自己的第一个网页 打开记事本，输入一下内容： 欢迎光临我的第一个网站！ 这是我的第一个网页！ 文件 保存，输入文件名1.htm或者1.html 从资源管理器中找到这个文件，双击打开,XHTML与HTML的区别,19,20,2.5 HTML 文件的头部内容, ,设置当前文档的url全称

7、（基底网址）,设置页面标题,定义元信息,定义外部文件的链接,表明该文档是一个可用于检索的网关脚本,设定CSS层叠样式表的内容,设定页面中程序脚本的内容,21, 设置基底网址 基本语法： href： 设置的是网页的绝对路径,Dreamweaver: 【插入】|【常用】|【文件头标记】|【基础】,22, 定义元信息 基本语法 ,Dreamweaver: 【插入】|【常用】|【文件头标记】|【meta】,name 属性 页面的描述性信息，用于描述网页的。,name=”author” content=” ” 表示name显示作者，以及content显示作者的名字,作者信息的设置 【插入】|【常用】|【

8、文件头标记】|【meta】,23,24,name的关键字： name=“keywords” content=” ”,关键字的输入不要过多，之间用逗号 Dreamweaver 【插入】|【常用】|【文件头标记】|【关键字】,name=“description” 代表描述。 搜索引擎限制说明文字的字数，所以内容要尽量简明 扼要 Dreamweaver 【插入】|【常用】|【文件头标记】|【说明】,name=“Copyright ” - 标注版权 content=”版权说明”,25,Name=“build” -网站建设时间 content=”输入日期”,26,http-equivlent,http-

9、equivlent =“Content-Type” 设定页面使用的字符集，用以说明主页制作所使用的文字已及语言，浏览器会根据此来调用相应的字符集显示page内容。,http-equivlent =“Refresh” 指定浏览器在一定时间后自动刷新页面，即重新载入页面或转到相同的页面。,27,网页标题的设置,标记“title”定义网页标题。 其内容在网页标题栏显示,28,页面属性的设置,29,Dreamweaver ：修改|页面属性可修改各个属性值。,30,HTML文件的主体定义于标记中，设置标记内的属性，可控制整个页面的显示方式。 格式 ,设定网页背景和文字的颜色,说明 bgcolor属性可以改变网页的背景颜色 text属性用于指定网页内文字的颜色,31,background 设置页面的背景图象,bgproperties 设定页面的背景图象为固定，不随页面的滚动而滚动,topmargin、 l