搜索
第二章HTML基础内容01HTML概述02文本内容描述03图像与链接描述04表格描述05列表06表单与多媒体第一节HTML概述一、HTML简介HTML（HypertextMarkupLanguage）即超文本描述语言，用于描述网页内容。•HTML最初由CERN（EuropeanOrganizationforNuclearResearch，欧洲粒子物理研究所）的TimBerners-Lee提出•HTML是SGML（StandardGeneralizedMarkupLanguage，标准化通用标记语言）的子集。•对HTML的编辑可以用文本编辑器完成，也可以使用可视化设计软件来完成。•随着HTML标准版本的升级，HTML不仅仅是增强了图文版本功能，还加引入了语义、样式、行为等概念，将内容、样式以及行为进行分离，通过JavaScript脚本语言来增强客户端的动态交互等功能。•2015年5月，HTML的最新版本HTML5.0正式发布，让HTML的发展进入了一个新的阶段。二、HTML基本语法简单来讲，HTML主要由元素（Element）和属性（Attribute）组成。元素用于描述网页中的对象，标记的属于用于描述该对象的特征。元素与标记每个元素（Element）代表一个文档结构或者内容，每个元素通常由3个部分组成：开始标记（StartTag）、内容、结束标记（EndTag）开始标记内容结束标记h1这是一级标题/h1在HTML4中一共有约90个元素，涵盖了文档结构、文本、列表、表格、超链接、图像、对象、表单等方面。元素名称大多是英语单词的简写，也有的是全称，因此在学习的时候可以与其英语单词结合起来记忆。标记属性每个元素的起始标记中可以包含指定的属性及其属性值，用于指定该元素的某方面特征。属性与属性值之间用“=”连接，属性值需要用引号引起来。h1id=section1align=center第一部分内容/h1在HTML4中大约有120个属性，但并不是每个标记都可以使用所有的属性。有的标记规定包含多个属性，有的标记规定只有少数几个属性。注释为了增强HTML代码的可维护性、提高代码可读性，特别是为了便于与他人合作，需要在网页中加入适当注释。!--注释内容--HTML字符参考由于HTML标记、属性语法中用到了一些特殊符号，在HTML中采用了一种特殊符号组合来表示，这就是字符参考。HTML中的参考字符有两种形式：•基于数字（Numeric）的字符参考。语法为“&#D;”或者“&#H;”，D为一个十进制数，H为一个十六进制数。•基于实体（Entity）的字符参考。采用一个特殊的英语名称来代替数字。例如“<”表示“”，“lt”是lessthan的意思；“>”表示“”，“gt”是greaterthan的意思。字符说明实体字符参考助记英语单词数字字符参考小于号<Lessthan<大于号>Greaterthan&62;“引号"Quotes"半角空格 No-breakspace &And符号&Ampersand&©版权所有©Copyright©®注册商标®Registered®™商标™Trademark™¥元符号¥Yen¥HTML中颜色与长度表示在网页中需要设置各标记的背景、边框、字体等内容的颜色，我们通过color属性来实现，color属性的取值需要用到颜色的表示方法。在网页有两种表示颜色的方法：基于颜色名的表示方法和基于RGB颜色分量的表示方法。Black=#000000Silver=#C0C0C0Gray=#808080White=#FFFFFFMaroon=#800000Red=#FF0000Purple=#800080Fuchsia=#FF00FFGreen=#008000Lime=#00FF00Olive=#808000Yellow=#FFFF00Navy=#000080Blue=#0000FFTeal=#008080Aqua=#00FFFF在HTML中主要有两表示长度的单位：基于像素值和基于百分比，后者也要相对长度，相对于容器宽度的百分比。tablewidth=80%border=1trtdwidth=150学号/tdtd姓名/tdtd性别/td/tr/table三、HTML文档结构标记简单来讲，HTML主要由元素（Element）和属性（Attribute）组成。元素用于描述网页中的对象，标记的属于用于描述该对象的特征。一个HTML文档由3个部分组成：•HTML文档类型声明。说明HTML的文档版本、使用语言等，其标记为!DOCTYPE。•用HEAD元素引导的头部。在头部中会放置标题、文档编码等元信息，以及样式表、JavaScript代码等。除了标题会在浏览器窗口标题栏显示外，其它信息并不会在网页中显示，只是用于指明网页的基本信息。•用BODY元素引导的文档正文。所有需要在浏览器页面窗口中显示的信息都放置于BODY元素中。!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01//EN!/BODY/HTML文档类型声明HTML文档第一行为文档类型声明，指明该文档为HTML文档，其文档标准以可参考地址“”中的规定。在HTML4.01中有3种文档标准：•严格标准只允许严格使用HTML4.01所规定的元素和属性，不能使用标记为不赞成（Deprecated）的标记和属性，文档定义格式如下：!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01//EN•过渡标准允许使用HTML4.01所规定的元素和属性，包括标记为不赞成（Deprecated）的标记和属性，文档定义格式如下：!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01//EN•框架标准在过渡标准的基础上，还包含了框架相关标记和属性，文档定义格式如下：!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01//EN在HTML5中文档类型声明得到了大大简化，只需要如下一行语句即可：!DOCTYPEhtml头部信息文档头部信息中包含了当前文档的一些重要信息，例如文档标题、文档编码、用于搜索引擎使用的文档关键字等，所有头部信息都包含在HEAD元素中。头部信息主要包含以下元素：•TITLE，文档标题。文档标题是HTML文档必须的头部信息，用于指定该网页的标题，其内容会出现在浏览器标题栏中，这也是搜索引擎使用的重要信息。•META，元信息。文档元信息用于指定文档的一些属性，用于浏览器、服务器软件进行识别或者相应操作。•其它元素。在头部信息还包含ISINDEX、BASE、NEXTID、LINK、SCIPRT等与链接和样式表、脚本语言等相关的元素。headmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/metahttp-equiv=Refreshcontent=5;url==expirescontent=2July2015/head正文正文由BODY和/BODY进行标注，该元素内容包含了Web页面中的具体内容，包括文字、表格、图像、超链接、视频等，这些内容会按需要显示在浏览器窗口中。属性名称HTML4状态功能与说明bgcolor正常设置网页背景色。style正常设置内联样式表。background不赞成设置网页背景图。text不赞成设置网页文本颜色。link不赞成设置尚未被访问的超链接文本的颜色，默认为蓝色。vlink不赞成设置已被访问的超链接文本的颜色，默认为紫色。alink不赞成设置正被访问的超链接文本的颜色，默认为红色，即点击链接时的颜色。leftmargin不赞成设置页面左边的空白，单位为像素。网页正文内容与窗口边框间默认是有距离的，有时设计网页里需要去掉此间隔，可以设置为0。topmargin不赞成设置页面顶端的空白，单位为像素。BODY主要属性htmlheadtitlebody标记属性/titlemetacharset=utf-8/headbodybgcolor=#ACFF11style=margin:30px;font-size:16pt这是正文内容，试着更改上面的bgcolor、margin和font-size值看网页有什么变化？/body/html•在正文中的内容有“块”级和“内联”两种类型，块级元素在网页中占居一个块状区域，每一个块级元素都由一个新行开始；内联级元素象文本一样，一个新的内联元素会接在前一个内联元素之后。例如段落就是一个块级元素，而文字则是内联级元素。在块级元素里可以包含新的块级元素或者内联元素，在内联元素里只能包含内联元素。•用于分节的元素DIV和SPAN。有时要给正文分出不同部分来，以让文档有更好的结构，可以用这两个元素来实现，DIV中可以包含块级内容，SPAN中只能包含内联内容。•为了让文档正文有更好的语义结构，在HTML5中引入了更多的表示结构的元素。属性名称功能与说明SECTION表示文档中的一个小节，可以与Hn一起使用。ARTICLE表示文档中的一个独立片断，例如一篇博客、一篇文章等。ASIDE表示该部分内容只是与当前文档相关，通常放置在页面两侧。HEADER头部信息。注意与HEAD元素不同，这里通常指页面顶部内容。FOOTER底部信息，包括作者、版权、联系方式等，通常放置于页面底部。NAV页面中的导航部分。DIALOG用于标注对话。FIGURE用于标注一段需要标题的内嵌内容，例如图片或者视频。!DOCTYPEhtmlhtmlheadmetacharset=utf-8titleHTML中提供了更好的文档结构元素/title/headbodyheader页面顶部/headernav导航条，由文字或者图片链接组成/navarticlesection文章第一部分/sectionsection文章第二部分/section/articleaside侧边栏，通常在左右两侧/asidefooter页脚信息，放作者、版权、联系信息等/footer/body/html第二节文本内容描述一、文本标题网页中的长段文本的内容可以分成多个部分，每个部分都用标题Hn来引导。在HTML中一共有6级标题，一级标题用元素H1表示，二级标题用元素H2表示，以此类推六级标题用元素H6表示。属性名称HTML4状态功能与说明align不赞成设置标题对齐方式，取值有：left、center、right、justify，分别为左对齐、居中对齐、右对齐和两端对齐。注意当前justify属性在主流的浏览器中并未实现，以默认的left代替。对于从左向右的文字方向言语，如简体中文，默认的对齐方式为左对齐。Hn主要属性!DOCTYPEhtmlhtmlheadmetacharset=UTF-8title这是多级标题的例子/title/