第1章HTML基础讲解.ppt

网页设计与制作教程（HTML+CSS+JavaScript）;1.1 HTML简介 1.2 HTML编写规范 1.3 网页文件的创建过程 1.4 搭建支持HTML5的浏览器环境 1.5 文字与段落排版 1.6 超链接 1.7 图像 1.8 表格 1.9 列表; HTML是HyperText Markup Language（超文本置标语言）的缩写，是一种为普通文件中某些字句加上标签的语言，其目的在于运用标签（tag）对文件达到预期的效果。 1.1.1 HTML发展历史 ;1.1.2 HTML5的特性及元素 (1) 实现Web应用程序 HTML5用于实现Web应用程序的功能如下： ? 绘画的Canvas元素，该元素就像在浏览器中嵌入一块画布，程序可以在画布上绘画。 ? 更好的用户交互操作，包括拖放、内容可编辑等。 ? 扩展的HTMLDOM API（Application Programming Interface，应用程序编程接口）。 (2) 更好地呈现内容 基于Web表现的需要，HTML5引入了更好地呈现内容的元素 ? 用于视频、音频播放的video元素和audio元素。 ? 用于文档结构的article、footer、header、nav、section等元素。;1.2.1 HTML文档结构 1．标签 HTML文档由标签和被标签的内容组成。标签能产生所需要的各种效果。其功能类似于一个排版软件，将网页的内容排成理想的效果。其格式为： 标签 受标签影响的内容 /标签 2．标签的属性 每个标签都有一系列的属性。标签通过属性来制作出各种效果，格式为： 标签 属性1=属性值1 属性2=属性值2 … 受标签影响的内容 /标签;1.2.2 HTML代码规范 1．标签和属性的规范 2．元素的嵌套 3．不推荐使用的标签 在HTML中，某些标签不推荐使用，例如，b、strong、i、em、dfn、code、samp、kbd、var、cite等标签。 4．代码的缩进 在编写HTML代码时要注意使用代码缩进来提高程序的结构性和层次性。;1.2.3 使用HTML语法编写HTML5文档 !doctype html html head meta charset=gb2312 title文档标题/title /head body 网页内容 /body /html ;① 打开记事本。单击Windows的“开始”按钮，在“程序”菜单的“附件”子菜单中单击“记事本”命令。 ② 创建新文件，并按HTML语言规则编辑。在“记事本”窗口中输入HTML代码，具体的内容如图1-2所示。 ③ 保存网页。打开“记事本”的“文件”菜单，选择“保存”命令。此时将出现“另存为”对话框，在“保存在”下拉列表框中选择文件要存放的路径，在“文件名”文本框输入以.html或.htm为后缀的文件名，如welcome.html，在“保存类型”下拉列表框中选择“文本文档（*.txt）”项，最后单击“保存”按钮，将记事本中的内容保存在磁盘中。 ④ 在“我的电脑”相应的存盘文件夹中双击welcome.html文件启动浏览器，即可看到网页的显示结果。; 目前，Microsoft的IE系列（仅有IE9及其以上版本）浏览器，以及Opera Software的Opera与Google的Chrome浏览器。由于Windows XP操作系统下不能安装IE9，因此本书所有的应用实例，主要执行的浏览器为Opera，其对应的版本号为11.62。如果读者需要运行本书中的实例，则要安装该版本的Opera浏览器。 【演练1-1】制作简单的HTML5文档检测浏览器是否支持HTML5。 ;1.5.1 注释标签!--…-- 注释标签的格式为： !-- 注释内容 -- 1.5.2 强制换行标签br / 强制换行标签的格式为： 文字 br / 1.5.3 段落标签p…/p 段落标签的格式为： p align=left|center|right 文字 /p ;1.5.4 定位标签div…/div 定位标签的格式为： div align=left|center|right 文本、图像或表格 /div 1.5.5 水平线标签hr / 水平线标签的格式为： hr align=left|center|right size=横线粗细 width=横线长度 color=横线色彩 noshade= noshade / 其中，属性size设定线条粗细，以像素为单位，默认值为2。 ;1.5.6 标题文字标签h#…/h# 标题文字标签的格式