HTML语言

认识HTML语言目录点击添加文本点击添加文本点击添加文本点击添加文本1、课本2、记录本3、不准睡觉4、不准玩手机一、HTML概念：1、HTML概念：（Hypertextmarkuplanguage，超文本标记语言）是一种描述语言。最初由欧洲原子核研究委员会的伯纳斯李（Berners-Lee)发明，后来被Mosaic作为网页解释语言，并随着Mosaic的流行而逐渐成为网页语言的事实标准。现在HTML由W3C组织制定并为各个软件供应商所遵守，虽然各个浏览器之间仍然有一些细微的区别，但离共同的目标越来越近了。注：【了解】NCSAMosaic，或简称Mosaic，是互联网历史上第一个获普遍使用和能够显示图片的网页浏览器。它是由伊利诺伊大学厄巴纳-香槟分校的NCSA组织在1993年所发表，并于1997年1月7日正式终止开发和支持。在当时人气爆发的大受欢迎。Mosaic的出现，算是点燃了后期互联网热潮的火种之一。注：浏览器网页就是一个纯文本的文件，但是有一定的格式（规定格式组织的文本），也就是HTML语言定义的格式，由于HTML被译为超文本标记语言，因此网页文件也被称为“超文本文件”。浏览器用来读取文件的内容，并将信息的格式进行处理，将内容以一定的方式呈现在屏幕上。1、网页的执行环境—浏览器。万维网将所有Internet上的信息（包括用户愿意加进去的本地信息）组织成“超文本文件”的形式，用户只需要用浏览器读取适当的“超文本文件”即可。浏览器是一个程序（就像我们用过的WPS一样，不同的程序软件处理不同的文件，有专门的扩展名），它读取在因特网上找到的超文本文档（和其他类型的文件）并解释和显示网页。2、不可不知的浏览器发展史（1）Navigator浏览器Mosaic的一名工程师在风险投资商的资助下成立了网景公司，该公司很快就推出了名为Navigator的浏览器，并迅速普及。（2）IE浏览器20世纪90年代中期，网景的Navigator浏览器曾经一度主导网络浏览器市场。后来，微软开始进入浏览器市场，退出了IE浏览器，并在Windows操作系统中捆绑，且免费使用，网景的浏览器市场开始大量流失。于是在1998年年底被美国在线（AOL）并购。目前，网景浏览器的全球市场占有率已经极地，而它的竞争对手微软的IE浏览器市场占有率则一度高达95%以上，在全球浏览器市场稳居主导地位。（3）Firefox浏览器近两年来新崛起的浏览器时Firefox（中文简称“火狐”），市场份额在不断扩大，它是免费的，可以自由下载。（4）Opera浏览器：欧朋浏览器，它虽然很少再桌面计算机中出现，但是目前大多数移动设备都配置了该浏览器。（5）谷歌浏览器：是因特网巨擘（bo）Google新近开发的浏览器，借助Google强大的网络资源，这款浏览器正日益走进用户。它是免费的。（6）Safari浏览器：是运行在苹果公司计算机上的一款主流浏览器，目前它也有Windows版。上面的6款浏览器占有绝大多数的市场份额。注：URL地址：每一个网页在因特网上都有一个唯一的URL地址，URL是Internet上用来指定一个位置或者一个网页的标准方式，只有知道了网页的URL地址才能访问该网页。URL的语法格式如下：协议名称://主机名称[:端口号/存放目录/文件名称]例如：:：协议名称（默认协议）：主机名称（主机名+域名共同组成）intro：存放目录lawfirm.html：文件名称•该网址也能打开百度首页，注意使用了默认的80端口和加上了主页index.php.注：除了http协议外，还有如下的网络协议：（1）Telnet：远端登录协议telnet://bbs.nasa.edu.ca（2）ftp：文件传输协议，通过因特网传送文件ftp：//ftp.microsoft.com（3）file:存取硬盘文件的协议file://c:/Inetpub/•说明：–HTML是用来描述网页的一种语言。–HTML指超文本标记语言（HyperTextMarkupLanguage）。–HTML文件是包含一些标签的文本文件。–这些标签告诉WEB浏览器如何显示页面。–HTML文件必须使用html作为文件扩展名。–HTML文件可以通过简单的文本编辑器来创建。•注：HTML程序代码是由HTML标签组成的描述性文件，HTML标签可以说明文字、图形、动画、声音、表格、连接等。•HTML源代码看起来与网页在浏览器上显示的很不相同，在浏览器中看到的是对HTML文档的解释。•在浏览器中，文本被一定的格式显示出来；•图片及其他多媒体文件则通过HTML文档中所标识的路径被调用。浏览器从HTML代码中读取图像的位置，并经浏览器解释后显示出来，其他的多媒体格式也是如此。•图像和其他的多媒体格式文件不是HTML文档的一部分—他们是独立的文档，因万维网是面向文件的。2、HTML编辑器：任何文本编辑器都可以编辑HTML源代码。网页就是一个HTML语法格式的纯文本文件，HTML是网络所基于的标准的格式化语言。但随着技术的发展，出现了专门的图形化用户界面的可视化编辑软件，如FrontPage、Dreamweaver等。3、HTML的基本结构htmlheadtitle/title/headbody/body/html举例：用txt文本进行编辑，然后把后缀名改成html，然后打开查看效果，写代码注意缩进。（活用EditPlus工具）显示效果：例子解释：html……/html：这个标签告诉浏览器这个HTML文件的开始点。文件中最后一个标签是/html。这个标签告诉您的浏览器，这是HTML文件的结束点。head…/head：位于head标签和/head标签之间的文本是头信息。头信息不会显示在浏览器窗口中。title…/title：标签中的文本是文件的标题。标题会显示在浏览器的标题栏。body…/body:标签中的文本是将被浏览器显示出来的文本。4、查看网页源代码：（任何网页都可以查看）对着浏览器中网页的空白处，点击右键—“网页源代码”（查看源文件）：•查看到的源代码：•知识拓展：.htm还是.html文件后缀？当您保存HTML文件时，既可以使用.htm也可以使用.html文件后缀。因为过去的很多软件只允许三个字母的文件后缀，但是现在的.html应用的也很广泛，所以我们用html二、HTML常用标签1、标签：HTML使用标签来标记内容，也是用标签来标明文本的意义。标签使用“”(小于号）和“”（大于号）包围，像html/html这样，用两个标签标识一个HTML文件。标签的分类：双标签（成对出现的标签）和单标签（单独出现的标签）2、标签特点如下：通常要用两个角括号括起来:和都是闭合的(闭合就是标签的最后要有一个/,来标示结束.),但不一定是成对出现的,比如body和/body一对标签.(body是开始标签,/body是结束标签,在开始和结束标签中可以有内容),比如br/就是单独的.(注意要在最后加上/,以标示其是独立的)标签与大小写无关的,body跟BODY表示的意思是一样的.标准推荐使用小写标签可以同时有多个属性3、HTML标签语法HTML标签（两种形式，成对或不成对（单标签））标签名内容/标签名标签名/4、什么是元素？标签是为一种元素的开始和结束作标记。网页内容是由元素组成的。一个元素通常由一个开始标签、内容、其他元素及一个结束标签组成。比如：headtitle第一个网页/title/head是一个元素，title第一个网页/title也是一个元素。5、什么是属性？与元素相关的特性称为属性，可以为属性赋值（每个属性对应一个属性值，称为“属性/值”对）。“属性/值”对出现在元素开始标签的最后一个“”之前，通过空格分隔。“属性/值”数量不限，顺序不限。属性值尽量使用英文单引号（''）或英文双引号（)包围，但不是必须的。•注意：html中标签名和属性名都是不区分大小写的，例如下面标签效果是相同的：headHEADHeaD但是建议用户书写时都使用小写，这是未来html发展的方向，并且XHTML（比HTML规范、严格）规定标签和属性必须是小写的。此处说的是名字不区分大小写，但是值有时却是区分大小写的，比如class和id属性的值。6、标题标题使用h1至h6共6个标签进行定义。h1定义最大的标题。h6定义最小的标题。h1Thisisaheading/h1h2Thisisaheading/h2h3Thisisaheading/h3h4Thisisaheading/h4h5Thisisaheading/h5h6Thisisaheading/h6显示效果如下：•特点：这些元素将内容显示为黑体字，并且会自动插入一个空行，不必用p标签再加空行，因此在一行中也无法使用不同大小的字体。7、物理字体b/b:b标记用来以粗体的形式来显示文本，对于大多数的web浏览器来说，b和strong都表示为黑体i/i：以斜体来显示文本u/u:表示为文本加上下划线sup/sup：sup标记指示以上标的形式来显示文本。sub/sub:标记以下标方式显示文本s/s:表示在文本正中央画一条删除线strike/strike作用和s/s相同。例子：效果如下：8、段落段落使用p标签进行定义。p这是一个段落/pp这是另外一个段落/pHTML会自动在段落前后添加一个额外的空行。举例：效果：9、常用的简单标签：有的标签是单独存在的（单标签）(1)br:换行符当你打算结束一行，而又不想开始一个新段落时，br标签就派上用场了。无论你将它置于何处，br标签都会产生一个强制的换行。br标签是空白标签，由于关闭标签没有任何意义，因此它没有类似/br的终止标签。注：在xhtml的规范中规定任何标签都必须有结束标签，所以br统一写成br/•举例：结果：（2） ；空格空格是HTML中最普通的字符实体。通常情况下，HTML会裁掉文档中的空格。假如你在文档中连续输入10个空格，那么HTML会去掉其中的9个。如果使用 ，就可以在文档中增加空格。•举例：效果：（3）水平线。对页面进行划分hr/水平线的属性：width：设置分割线的宽度，值可以是相对值也可以是绝对值。size：设置分割线的高度，值只能是绝对值。align：设置水平分割线的页面对齐，值为left、center、right，默认值center。color：改变水平分割线的颜色。noshade：取消分割线的阴影，无须赋值。10、html的注释：我使用注释给某些段落添加注释，注释不会被浏览器显示出来，但是通过浏览器可以查看到HTML源文件及其注释内容。注释有助于合作者更好地理解创作者所编写的文档，并且便于以后对文档进行修改，从而提高工作效率!--注释的内容--在开始标签!和--中间不能添加空格，--和可以。举例：浏览器显示：通过浏览器查看源码：作业：在一个页面中写三首唐诗，要求标题使用h#标签，正文每一首一个段落，每一句换行。不同的诗之间使用分割线，可以随意对正文使用加粗、倾斜、加下划线、删除线等。11、meta（1）设置页面内容使用的编码：问题：网页中出现乱码，这个时候我们应该如何用代码来消除乱码，使其正常显示？方法：metahttp-equiv=Content-Typecontent=text/html;charset=gb2312其中charset=值，为设置的编码，常用的有UTF-8、GBK、GB2312。•举例：注：