计算机基础(10)-HTML简介和基本标记

HTML&CSS知识结构拓扑图本次课知识拓扑图课程安排第一讲HTML简介和文字、段落标记第二讲列表、图片、多媒体第三讲版面设计之表格第四讲表格嵌套及超链接第五讲表单第六讲样式表CSS第七讲CSS高级应用本次课内容HTML的概念HTML的基本结构HTML的文字标记HTML的段落标记本次课知识点的作用本次课是HTML课程的基础，通过学习HTML的基本结构、语法及文字标记，形成对HTML语言及代码规范的基本认识，学习完后可进行文字静态页面的制作。教学目标1.掌握HTML的概念和语法特点。2.掌握HTML的基本结构及文字、段落标记。教学重难点重点：HTML的语法特点及文字、段落标记难点：HTML的语法特点本次课教学目标与重难点工作任务是一种超文本标记语言。超文本标记语言HyperTextMarkupLanguage超文本：包含有链接关系的文本，且包含多媒体对象的文件。什么是HTML？美女标记HTML标记的格式•元素-标识标记•属性-描述标记•值-分配给属性的内容ELEMENTATTRIBUTE=value标识标记属性=“值”HTML文档的基本结构HTML部分文档标题部分正文部分HTMLHEADTITLE欢迎进入HTML世界/TITLE/HEADBODY这会是一种很有趣的体验/BODY/HTML作用:定义页面中的信息,能够提供文档的关键字,作者等多种信息。1.获得文档作者的姓名metaname=“Author”content=“韦小宝”元信息标记Meta2.指定搜索引擎的关键词metaname=“KEYWORDS”content=“MP3,音乐”应用：提高搜索引擎搜索的质量3.自动跳转页面metahttp-equiv=Refreshcontent=10;url=应用：如网上实时新闻报道。metahttp-equiv=Content-Typecontent=text/html;charset=gb23124.设定字符集1.背景颜色属性bgcolor语法:bodybgcolor=color_value注意:颜色值可以是英文颜色名称和十六进制值2.背景图象属性background语法:bodybackground=“img_file_url”img_file_url指的是图片文件所在的路径.HTML主体标记Body3.上边距属性topMargin(内容和浏览器上部边框之间的距离)语法:bodytopmargin=“value”4.左边距属性leftMargin(内容和浏览器左侧边框之间的距离)语法:bodyleftmargin=“value”标题标记HHTMLHEADTITLEHTML简介/TITLE/HEADBODYH1HTML简介/H1H2HTML简介/H2H3HTML简介/H3H4HTML简介/H4H5HTML简介/H5H6HTML简介/H6/BODY/HTML可显示六种大小的标题，即H1到H6，H1为最大，H6为最小字体属性face中文网页尽量对汉字使用宋体或黑体fontface=“宋体”…/font字号属性size取值范围从1到7，或者从+1到+7,从-1到-7。fontsize=“5”…/font颜色属性colorfontcolor=“#000000”…/fontFONT---属性常用字符级标记B.../B粗体文本I.../I倾斜文本SUP.../SUP上标文本SUB.../SUB下标文本空格： (一个 代表一个字符)注释文字:!--这些文字不会在页面中显示出来--特殊字符与注释文字段落标记phtmlheadtitle欢迎使用HTML/title/headbodybgcolor=lavenderp面对敌人的严刑拷打/pp我只有三个字/pp我都说/p/body/html注:P标记可以成对使用,也可以单独使用.P---对齐属性HTMLHEADTITLE学习HTML/TITLE/HEADBODYBGCOLOR=lavenderPalign=right这会是一种很有趣的体验/P/BODY/HTML运行结果右对齐Left：左对齐Center：居中Right：右对齐换行标记br基本语法:br它只有开始标记，没有结束标记。htmlheadtitle欢迎使用HTML/title/headbodybgcolor=lavender面对敌人的严刑拷打br我只有三个字br我都说br/body/html本次课课程总结1HTML的概念2HTML基本结构3文字、段落相关标记作业布置与要求1、练习本次课学习的内容2、完成一个页面的制作下次课内容图片标记2列表标记31多媒体标记33