html教程课件讲义.ppt

网页前端课程 主讲人: 曾平 qq: 2213314555 第1章 HTML+CSS+JS 什么是HTML+CSS+JS呢? HTML、CSS、JS是做网页前台设计的标准套装，html是一些网页控件，css是美化这些控件的代码（层叠样式表），js（javascript）是一种增强表现力的脚本语言，可以做出很多动态及交互性较强的效果。 第2章 HTML语言 2.1 HTML简介 2.1.1 什么是HTML？ HTML(Hyper Text Markup Language，超文本标记语言)是一种用于网页制作的排版语言，是Web最基本的构成元素。 HTML 是一种标记语言 (markup language) HTML 使用标记标签来描述网页 2.1.2 HTML的主要功能 1．格式化文本。如设置标题、字体、字号、颜色；设置文本的段落、对齐方式等。 2．建立超链接。只需用鼠标单击，就可达任何一处。 3．创建列表。把信息用一种易读的方式表现出来。 4．插入图像。使网页图文并茂，还可设置图像的各种属性，如大小、边框、布局等。 5．建立表格。表格为浏览者提供快速找到需要信息的显示方式，还可以用表格来设定整个网页的布局。 6．加入多媒体播放的时间和次数。可在网页中加入音频、视频、动画，还能设定。 7．交互式表单、计数器等。 2.1.3 HTML基本结构 2.1.4 HTML的编辑环境 任何文本编辑器都可用来制作网页，包括记事本、 Dreamweaver、notepad++等编辑程序。 若要看到用户自己设计的网页效果，就需要安装一个浏览器，如 Internet Explorer，firefox等 2.2 HTML文件结构的格式 2.2.1 HTML的基本语法 1 了解HTML的标记 HTML文件是由标记和内容组成 格式为： 〈标记〉内容〈／标记〉 标记的属性。标记需要通过属性制作各种效果。 格式为： 标记 属性1＝属性值 属性2＝属性值…〉内容〈／标记〉 font size=4 color=red内容 /font 注意： 使用时属性之间没有顺序。对同一段内容，可以用多个标记来共同作用，产生一定的效果。 HTML也有注释标记。“!--”和“-- ”之间的部分为注释内容,可以插入内容的任何地方。 标记和属性不区分大小写。 2 .HTML的基本结构 HTML文件以html开头,以/html结尾。 HTML文件包括头部head和主体body。 HTML文件扩展名为.html或者.htm 基本结构为： html head title 网页标题 /title /head body 网页内容 /body /html ?html 与 /html 之间的文本描述网页 ?body 与 /body 之间的文本是可见的页面内容 课堂练习：写一个html网页 HTML 文件开始 HEAD 标头区开始 TITLE.../TITLE 标题区 /HEAD 标头区结束 BODY 本文区开始 本文区内容 /BODY 本文区结束 /HTML 文件结束 HTML 网页文件格式。 HEAD 标头区 : 记录文件基本资料，如作者、编写时间。 TITLE 标题区 : 文件标题须使用在标头区内，可以在浏览器最上面看到标题。 BODY 本文区 : 文件资料，即在浏览器上看到的网站内容 !-- -- HTML注释 br hr link img frame input bgsound meta base P12-13 html 释义 最顶层元素（top element） html元素为HTML最顶层元素，也称为根元素 html~标签内容~/html P12-13 head 释义 文件标头信息的包含元素（document head element） head元素为文件标头信息的包含元素，它包含关于文档的概要信息，也称为元信息（meta-information） head 属性=属性值~标签内容~/head P12-13 title 释义 文件标题信息（document title） title 属性=属性值~标签内容~/title P12-13 meta 释义 文档的元信息（meta