计算机基础10 html简介和基本标记.ppt

* * * * * HTMLCSS 知识结构拓扑图 本次课知识拓扑图 课程安排 第一讲 HTML简介和文字、段落标记 第二讲 列表、图片、多媒体 第三讲 版面设计之表格 第四讲 表格嵌套及超链接 第五讲 表单 第六讲 样式表CSS 第七讲 CSS高级应用 本次课内容 HTML的概念 HTML的基本结构 HTML的文字标记 HTML的段落标记 本次课知识点的作用 本次课是HTML课程的基础，通过学习HTML的基本结构、语法及文字标记，形成对HTML语言及代码规范的基本认识，学习完后可进行文字静态页面的制作。 教学目标 掌握HTML的概念和语法特点。 掌握HTML的基本结构及文字、段落标记。 教学重难点 重点：HTML的语法特点及文字、段落标记 难点：HTML的语法特点 本次课教学目标与重难点 工作任务 是一种超文本标记语言。 超文本 标记 语言 HyperText Markup Language 超文本：包含有链接关系的文本，且包含多媒体对象的文件。 什么是HTML？ 美女标记 HTML标记的格式 元素 - 标识标记 属性 - 描述标记 值 - 分配给属性的内容 ELEMENT ATTRIBUTE = value 标识标记 属性=“值” HTML 文档的基本结构 HTML 部分 文档标题部分 正文部分 HTML HEAD TITLE欢迎进入 HTML 世界/TITLE /HEAD BODY 这会是一种很有趣的体验 /BODY /HTML 作用: 定义页面中的信息,能够提供文档的关键字,作者等多种信息。 1.获得文档作者的姓名 meta name=“Author” content=“韦小宝” 元信息标记Meta 2.指定搜索引擎的关键词 meta name=“KEYWORDS” content=“MP3,音乐” 应用：提高搜索引擎搜索的质量 3. 自动跳转页面 meta http-equiv=Refresh content=10; url=http://yourlink 应用：如网上实时新闻报道。 meta http-equiv=Content-Type content=text/html; charset=gb2312 4. 设定字符集 1.背景颜色属性bgcolor 语法:body bgcolor=color_value 注意:颜色值可以是英文颜色名称和十六进制值 2.背景图象属性 background 语法: body background=“img_file_url” img_file_url指的是图片文件所在的路径. HTML主体标记Body 3.上边距属性topMargin (内容和浏览器上部边框之间的距离) 语法:body topmargin=“value” 4.左边距属性leftMargin (内容和浏览器左侧边框之间的距离) 语法:body leftmargin=“value” 标题标记 H HTML HEAD TITLEHTML简介/TITLE /HEAD BODY H1HTML 简介/H1 H2HTML 简介/H2 H3HTML 简介/H3 H4HTML 简介/H4 H5HTML 简介/H5 H6HTML 简介/H6 /BODY /HTML 可显示六种大小的标题，即H1到H6， H1为最大，H6为最小 字体属性face 中文网页尽量对汉字使用宋体或黑体 font face=“宋体”…/font 字号属性size 取值范围从1到7，或者从+1到+7, 从-1到-7。 font size=“5”…/font 颜色属性color font color=“#000000”…/font FONT---属性 常用字符级标记 B . . . /B 粗体文本 I . . . /I 倾斜文本 SUP . . . /SUP 上标文本 SUB . . . /SUB 下标文本 空格： nbsp;(一个nbsp;代表一个字符) 注释文字: !-- 这些文字不会在页面中显示出来 -- 特殊字符与注释文字 段落标记p html head title欢迎使用 HTML/title /head body bgcolor = lavender p面对敌人的严刑拷打 /p p我只有三个字 /p p我都说/p /body /html 注:P标记可以成对使用,也可以单独使用. P---对齐属性 HTML HEAD TITLE学习HTML/TITLE