HTML 01 简介和基本标记

1HTML简介和基本标记2目标•描述互联网•描述HTML•编写简单的HTML文档•使用META标记•在HTML文档中使用基本标记•在HTML文档中创建超链接3互联网简介•互联网是由成千上万个能彼此通信的设备组成的网络，是世界上最大的计算机网络，它基于TCP/IP协议实现TCP/IP就是传输控制协议/网际协议(TransmissionControlProtocol/InternetProtocol)的缩写，是供已连接因特网的计算机进行通信的通信协议，它定义了电子设备如何连入因特网，以及数据如何在它们之间传输的标准•TCP/IP由很多协议组成，不同类型的协议被放在不同的层，其中位于最上面一层是应用层。应用层的协议有：FTP、SMTP、Telnet、HTTP等•只要应用层使用HTTP协议的应用，就称为万维网（WorldWideWeb）缩写成：超文本传输协议（HypertextTransferProtocol）://用户从浏览器获得资源INTERNET输入地址请求HTTP传输5HTML简介•HTML是HypertextMarkupLanguage的英文缩写，即超文本标记语言•使用HTML语言可以：–控制页面和内容的外观–发布联机文档–插入的链接检索联机信息–创建联机表单，收集用户的信息、执行事务等等–插入动画–开发帮助文件标记语言：一种将文本以及与文本相关的信息结合起来，用特殊的标记进行标识来展现出文档的结构及其数据细节处理的文字编码。6浏览器和编辑器Mozilla的FirefoxMicrosoft的InternetExplorer•浏览HTML文件的工具•编辑HTML文件的工具MacromediaDreamweaver记事本……7HTML语法示例1：HTMLHEADTITLE欢迎学习HTML/TITLE/HEADBODYH3我的第一个HTML文档/H3/BODY/HTML运行结果8HTML文档的结构HTML部分文档头部分正文部分HTMLHEADTITLE欢迎进入HTML世界/TITLE/HEADBODYP这会是一种很有趣的体验/P/BODY/HTML基本结构：运行结果9HTML中的标记HTML中标记的格式组成：HTML.../HTMLHTML标记用于标记HTML文档的开始和结束•元素-标识标记•属性-描述标记•值-分配给属性的内容ELEMENTATTRIBUTE=value10使用特殊字符和注释200>189200189号20<18920189号"ABCD"ABCD双引号x>y&x=120xy&x=120＆与符号©CopyRight版权所有©版权符号!--HTML注释--注释20 <18920189空格®CSUINFO®注册商标11HEAD标记HEADTITLE……/TITLEMETAHTTP-EQUIV=Content-LanguageCONTENT=zh-CNLINKREL=stylesheetTYPE=text/cssHREF=a.cssSCRIPTSRC=b.js/SCRIPT/HEADHEAD标记中可以说明文档的一些公共属性(元数据)HEAD标记中可以向浏览器发出指令12使用META标记2-11.提供关于网页的信息METAname=Copyrightcontent=...METAname=Authorcontent=GrahamBrowneMETAname=Keywordscontent=...METAname=Descriptioncontent=...对网页的描述根据关键词生成响应获得文档的作者名称2.设置网页在缓存中的过期时间3.禁用缓存METAhttp-equiv=Expirescontent=Fri,12Jan201218:18:18GMT”METAhttp-equiv=Pragmacontent=No-cache134.自动刷新页面METAhttp-equiv=Refreshcontent=10;url==Content-Typecontent=text/html;charset=GB2312应用：如网上实时新闻报道。应用：如在不同浏览器上正确显示中文。使用META标记2-26.说明网页所使用的语言METAhttp-equiv=Content-Languagecontent=zh-CN14BODY标记BODY标记的一些属性body这里面是在浏览器主窗口中显示的内容/bodyBODY标记用于标记HTML文档的主体部分bodyalink=redlink=bluevlink=maroontext=blackbgcolor=background=alink：当前激活的超链接的文字颜色，默认为红色link：超链接的文字颜色，默认为蓝色vlink：浏览过的超链接颜色，默认为栗色text：网页内文字的颜色，默认为黑色bgcolor：网页的背景颜色background：网页的背景图片15HTML基本标记标题标记H1-H6水平标尺标记HR段落标记换行标记块标记字符级标记列表标记字体标记FONT图像标记IMG16标题标记HTMLHEADTITLEHTML简介/TITLE/HEADBODYH1HTML简介/H1H2HTML简介/H2H3HTML简介/H3H4HTML简介/H4H5HTML简介/H5H6HTML简介/H6/BODY/HTML可显示六种大小的标题，即H1到H6，H1为最大，H6为最小17水平标尺HTMLHEADTITLE欢迎使用HTML/TITLE/HEADBODYH3我的第一个HTML文档/H3HRnoshadesize=5align=centerwidth=50%HRsize=15align=leftwidth=80%HRP这将会是一种很有趣的体验/BODY/HTMLHR水平标尺标记用于在页面上绘制一条水平线。可借助于下列属性控制水平线。它只有开始标记，没有结束标记，且不包含任何内容。18段落标记：PHTMLHEADTITLE欢迎使用HTML/TITLE/HEADBODYBGCOLOR=lavenderP这会是一种很有趣的体验/PP另一个段落元素/P/BODY/HTML运行结果19换行标记BRHTMLHEADTITLE欢迎使用HTML/TITLE/HEADBODYBGCOLOR=lavenderP这会是一种很有趣的BR体验P另一个段落元素/BODY/HTML运行结果20使用对齐属性HTMLHEADTITLE学习HTML/TITLE/HEADBODYBGCOLOR=lavenderPalign=right这会是一种很有趣的体验/P/BODY/HTML运行结果右对齐Left：左对齐Center：居中Right：右对齐21块标记DIV、SPANDIV…/DIV可以定义跨段落的内容块；SPAN…/SPAN定义段落内的内容块HTMLHEADTITLE学习HTML/TITLE/HEADBODYDIV第1部分P元素用于组织元素PDIV通常用于块级元素/DIVDIValign=right第2部分P这是第二部分BRH2您觉得有意思吗？/H2/DIVP第二部分向右对齐。SPANSTYLE=font-size:25公共格式/SPAN应用于这一部分中的所有元素/BODY/HTML22字符级标记B.../B粗体文本I.../I斜体文本U.../U下划线文本STRONG.../STRONG特别强调文本（默认为粗体）EM.../EM强调文本（默认为斜体）SUP.../SUP上标文本SUB.../SUB下标文本DEL.../DEL删除线23字符级标记（示例）HTMLHEADTITLE字符级标记示例/TITLE/HEADBODYPALIGN=centerB字符级标记示例/B/PP圆的面积=π*rSUP2/SUP/PP水的化学符号：HSUB2/SUBO/PPEM这是一种很有趣的体验/EM/P/BODY/HTML24列表无序列表有序列表25无序列表HTMLHEADTITLE学习HTML/TITLE/HEADBODYULLI星期一LI星期二LI星期三LI星期四LI星期五/UL/BODY/HTML无序列表是一种“项目符号列表”。其中的项目都带有项目符号前缀。该列表包含在无序列表标记UL../UL内。列表中的每个项目都使用列表标记LI进行标记，其中LI表示ListItem（列表项）。关闭标记/LI是可选的。UL和LI可设置TYPE属性：disc|circle|square26有序列表HTMLHEADTITLE学习HTML/TITLE/HEADBODYOLLI星期一LI星期二LI星期三LI星期四LI星期五/OL/BODY/HTML有序列表包含在OL../OL标记内。有序列表也显示列表项目。它与无序列表的区别在于有序列表项前面的编号是可设置的有序编号。OL和LI可设置TYPE属性：1|A|a|I|i27自定义编号大写罗马数字LITYPE=I小写罗马数字LITYPE=i大写字母LITYPE=A小写字母LITYPE=a从第n个值开始编号OLSTART=nHTMLHEADTITLE学习HTML/TITLE/HEADBODYULLI星期一OLLITYPE=i简介HTMLLITYPE=i创建列表/OLLI星期二OLLITYPE=a创建表LITYPE=a插入图像/OLLI星期三LI星期四LI星期五/UL/BODY/HTML28使用FONT标记HTMLHEADTITLE欢迎使用HTML/TITLE/HEADBODYH3FONTSIZE=3COLOR=HOTPINKFACE=隶书我的第一个HTML文档/FONT/H3P这FONTCOLOR=BLUESIZE=6将会/FONT是一种很有趣的体验/BODY/HTMLFONT标记用于控制文本在网页上的显示。可以指定size（大小）、face（字体）、color（颜色）等属性。29添加颜色HTMLHEADTITLE学习HTML/TITLE/HEADBODYBGCOLOR=lavenderH2FONTCOLOR=LIMEGREEN欢迎使用HTML/FONT/H2PFONTCOLOR=RED这是一种很有趣的体验/FONT/P/BODY/HTML可以为页面和页面上的元素添加颜