Chapter2-HTML

管理科学与工程学院刘政敏[e-mail]2本章主要内容1、HTML概述2、HTML文档结构3、HTML基本语法4、HTML主要标签Page3一、HTML概述1、HTML:超文本标记语言(HyperTextMarkupLanguage)，是用来描述网页的一种语言。2、HTML不是一种编程语言,而是一种标记语言(markuplanguage),是一套标签(tag),使用标签描述网页。3、用HTML编写的超文本文档称为HTML文档/网页，后缀名为.htm,.html。Web浏览器负责读取HTML文档，并以网页的形式显示出它们。4、编辑器:可用文本编辑器(Notepad,EditPlus等）或专门可视化编辑器（Dreamweaver,Frontpage,vs等）5、HTML的版本从1.0到目前的4.0,5.0Page4*.htm或*.html无空格规范命名,一般为英文、数字，无特殊符号(例如&符号),但可以有下划线“_”。区分大小写首页文件名默认为:index.htm/index.htmldefault.htm/default.htmlHTML文件命名注意Page5二、HTML文档结构HTMLHeadtitle文档的标题/title....//头部其他标签/HeadBody...//正文部分/Body/HTML文档开始文档头,包含描述文件的基本信息文档体,包含整个文档的主要内容文档结束Head与Body为两个独立部分，不能相互嵌套Page6三、HTML基本语法htmlheadtitle北京欢迎您！/title/headbodyh1MyFirstHeading/h1pMyfirstparagraph./p/body/html一个小例子Page7基本语法-续HTML标签标签一般成对出现,由开始标签和结束标签构成标签...标签内容.../标签标签属性=“值”...标签内容.../标签标签/(没有标签内容的直接在开始标签中关闭,比如br/img/)例如，fontcolor=“red”size=“10”face=“宋体”北京欢迎您！/font（html5中已经取消该标签！）Page8注意事项：Html标签不区分大小写,但建议用小写(HTML4推荐用小写,而在未来(X)HTML版本强制使用小写)属性以值对形式出现,无顺序之分,用空格隔开,属性值始终包括在引号(单双引号均可)内;标签可以嵌套,但要按顺序嵌套;一定不要忘记结束标签,成对出现的,称为开始标签和结束标签。在目前的一些浏览器中,不写结束标签虽然很多情况下可以正常显示,但也有可能出现很多意想不到的错误；注释的表示方式为：!--内容--Page9四、HTML主要标签1、结构标签2、字体与页面控制标签3、链接标签4、表格标签5、表单标签6、框架标签7、其他标签8、相关基础知识相对重要些！Page10(一)、结构化标签1、html.../html:表示这是一个HTML文档的开始和结束；2、head../head:描述文件的整体信息,大部分内容不会出现在浏览器中，其内部只能包含base、title、meta、link、script等几个标签。3、body../body:文档主体,定义文档的主要内容，其内部的所有内容经浏览器解释后显示在浏览器中。Page11结构化标签-续元素描述title文档标题(唯一必须的)meta有关页面的元信息(meta-information)base为页面上的所有链接规定默认地址或默认目标。link定义文档与外部资源的关系，最常见的用途是链接样式表。script用于定义客户端脚本style为HTML文档定义样式信息。Head部分主要标签Page12Header部分主要标签(1)title：设置文档标题,同时当把文档加入用户的收藏夹时，title将成为默认名称。例如：title山东经济学院/title提示：title是head中唯一要求必须包含的东西！(2)base：标签为页面上的所有链接规定默认目标。例如，basetarget=_blank/Page13Header部分主要标签-续(3)meta:提供有关页面的元信息(meta-information)meta标签分两大部分：Http标题信息(http-equiv)和页面描述信息(name)。meta标签的属性定义了与文档相关联的名称/值对。属性取值作用nameauthor/descriptionKeywords/generator把content属性关联到一个名称http-equivcontent-type/expires/refresh/set-cookie把content属性关联到HTTP头部。contentsometext定义与http-equiv或name属性相关的元信息Codename:用于描述网页,没有指定任何预先定义的name,通常情况下,可以自由使用对自己和源文档的读者来说富有意义的名称。例如:meta标签但,Keywords和Description的使用非常重要：可让搜索引擎准确的发现你,吸引更多人访问你的站点：搜索引擎机器人检索页面中的keywords和description，加入到其数据库中。http-equiv:使用带有该属性的meta标签时,服务器将把名称/值对添加到发送给浏览器的内容头部,告诉浏览器一些有用的信息,以帮助正确和精确显示网页内容.比如：meta标签这样发送到浏览器的头部就应该包含：Page16meta最常用的就是Keywords和Description的设定!如果没有？搜索引擎可能无法检索！html中没有结束标签,xhtml中标签必须被正确地关闭。content:作为name和http-equiv的值;Page17METAname=descriptioncontent=淘宝网-亚洲最大、最安全的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值…2亿优质特价商品，同时提供担保交易(先收货后付款)、先行赔付、假一赔三、七天无理由退换货、数码免费维修等安全交易保障服务，让你全面安心享受网上购物乐趣！METAname=keywordscontent=淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺Page18METAname=keywordscontent=开心网,开心网001,SNS交友,社交网站,社交网,争车位,朋友买卖,花园,菜地,开心农场,鱼塘,钓鱼METAname=descriptioncontent=开心网是一个在线社区,通过它您可以与朋友、同学、同事、家人保持更紧密的联系,及时了解他们的动态;与他们分享你的照片、心情、快乐。Page19body主要属性Page201、标题标签hn(n从1至6）作用：设置各种不同大小标题,h1定义最大的标题。h6定义最小的标题。用法：h1..../h1。。。h6../h6说明：n为标题的等级，HTML提供了6个等级的标题，n越小，标题越大。(二)、字体与页面控制标记Page21字体与页面控制标记-续2、段落处理标记：(1)段落标记p作用：显示一个段落。用法：p.../p(2)强制换行标记br/,作用：使后面的文本、图片等从下行显示.用法：br/说明：当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。Page22字体与页面控制标记---续3、分区标记div作用：该标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具。一般用div作为容器，其内部可以放置pullispan等其他标签;用法：div..../div与其他标签相比,如p,h1,img等相比,没有语义！Page23字体与页面控制标记---续4、列表标签：包括有序列表和无序列表。带有序号标志的为有序列表，否则就是无序列表。oltype=start=li列表项1/lilistart=“”列表项2/li.../oltype取值：1、A、a、I、i(默认为数字)（1）有序列表Code(ListDemo)Page24列表标签-续（2）无序列表ultype=li列表项1/lilitype=“”列表项2/li.../ultype取值：circle(空心圆点)、disc(实心圆点)、quare(实心正方形）无序列表应用Page26（三）、链接标签超级链接标记：a(锚，anchor)作用：创建连接另一个文档的链接，可以指向网络上的任何资源：一个页面，一幅图像，一个声音或视频文件等等。用法：aname=href=target=文字或图片/aPage27超级链接标签---续href：用于定位需要链接的文档,路径表示方法如下(1)相对路径表示法同一个目录的文件引用:直接用文件名即可。上级目录的文件引用:../表示源文件所在目录的上一级目录，../../表示上上级目录，类推。引用下级目录的文件:直接写下级目录文件路径即可，文件夹名/文件名即可。(2)绝对路径表示法:完整URL规定文件的准确位置ahref=山东经济学院/aCode一定不要忘记写Http协议Page28链接标签---续Target属性:定义被链接的文档在何处显示。例如:ahref==_blank山东经济学院/a值描述_blank在新窗口中打开被链接文档。_self默认。在相同的框架中打开被链接文档。_parent在父框架集中打开被链接文档。_top在整个窗口中打开被链接文档。framename在指定的框架中打开被链接文档。Page29超链接a几种具体使用1、用文本做超链接ahref=“index.htm”target=“_blank”首页/a2、用图像做超链接ahref=“”target=“”imgsrc=“images/in.jpeg”title=“返回首页”border=“0”//a3、电子邮件链接ahref=“mailto:[e-mail]”发送邮件/a4、锚链接：链接到页面中某个指定位置定义锚点:aname=“xxx”../a跳转到锚点:ahref=“#xxx”../aahref=“../index.htm#xxx”../aPage30（四）、表格标签表格标签：table、tr、td8月8日主要城市气温表格table标题caption行tr列td表头thPage31表格基本结构tablecaption..标题../caption(可选)trth..表头../th(可选)(可选)…./trtrtd..单元格内容../td…../tr/tableCode实现上页中的表格！Page32table属性取值作用width百分比/像素表格宽度height同上表格高度bgcolor颜色值表格背景色border像素表格边框宽度cellspacing百分比/像素单元格之间的空白cellpadding百分比/像素单元边与内容之间的空白体验cellspacing与cellpadding区别！Codetable定义表格,包含若干行tr,每行被分为若干单元格td,单元格可包含文本、图片、列表、段落、表单、水平线、表格等等。Page