HTML入门基础.docx

33HTML基础HTML简介HTML简介HTML 指的是超文本标记语言 (Hyper Text Markup Language)HTML 不是一种编程语言，而是一种标记语言 (markup language)标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML 文档 = 网页HTML 文档描述网页HTML 文档包含 HTML 标签和纯文本HTML 文档也被称为网页HTML文档编写方法使用各类文本编辑器，存成*.htm或*.html使用可视化HTML编辑器，如Dreamweaver，FrontpageWeb服务器动态生成HTML 标签HTML 标签是由尖括号包围的关键词，比如 HTML 标签包括两种格式：单标签，比如双标签，比如.标签对中的第一个标签是开始标签，第二个标签是结束标签第一个标签内，可以设置标签属性，即标签样式：比如W3C标准网页设计时，尽可能的遵循W3C标准，即网页的三个组成部分，结构（Structure），表现（Presentation），行为（Behavior），规范化是一种趋势。标准WEB浏览器基于Gecko排版引擎： Mozilla Firefox基于WebKit排版引擎：Google Chrome 基于Trident排版引擎：Internet Explorer 9.0或更高版本在设计网页时，尽可能的使用，多款不同架构的标准浏览器进行调试。HTML文档结构文档类型（英文简称DOCTYPE，英文全称 DOCument TYPE ），一个DOCTYPE是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。不是HTML标签，它仅仅提供一项信息（声明），即HTML是用什么版本编写的。1，HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。Strict DTD（严格）如果需要干净的标记，免于表现层的混乱，使用此类型。与层叠样式表（CSS）配合使用： Transitional DTD（过度）可包含W3C所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表（CSS）的浏览器以至于您不得不使用 HTML 的呈现特性时，请使用此类型：Frameset DTD（框架）用于带有框架的文档。除 frameset 元素取代了body 元素之外，Frameset DTD 等同于 Transitional DTD：2，XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。Strict DTD（严格）XHTML与HTML4.1是完全兼容的，如果需要干净的标记，免于表现层的混乱，使用此类型。与层叠样式表（CSS）配合使用：Transitional DTD（过度）XHTML是更严谨更纯净的HTML版本，并且与HTML4.1是完全兼容的，更为严谨的格式要求，可以促进规范化的推广，过度型声明可以植入样式表呈现的属性和元素，支持层叠样式表（CSS），格式要求相对宽松（最常用的文档）Frameset DTD（框架）XHTML与HTML4.1是完全兼容的，希望使用框架时，请使用此 DTD！3，HTML5文档：文档类型声明的格式说明：HTML文档一个HTML文档的开始与结束标识，它包括两部分，即头部部分与文档主体头部部分：用于定义网页文档的头部，它是所有头部元素的容器。其中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。包括，。文档主体：包含浏览器将在页面内，显示的所有内容（比如文本、超链接、图像、表格和列表等等。）URL（统一资源定位地址）URL（Universal Resource Locator）是“统一资源定位地址”的英文缩写，每个站点及站点上的每个网页都有一个唯一的地址，这个地址称为统一资源定位地址，向浏览器输入URL，就可以访问URL指向的网页。URL通信协议：http超文本传输协议/httpsssl加密传输协议target=_blankHTTPS:/ftp文件传输协议1/File本地文件传输协议file:/g:/wamp/www/index.htmltelnet远程登陆服务协议telnet://New网络新闻组协议news:mailto邮件传输协议mailto:Gopher网际Gopher协议（资源查询）gopher:/go.Gophermms流媒体传送协议MMS:/Ed2k文件共享网络协议ed2k:/Flashget网际快车下载链接Flashget:/thunder迅雷下载链接thunder:/目录符号：上一级目录：./当前目录：./根目录：/绝对路径：是指INTERNET网址的完成定位，它包含协议种类，服务器域名，文件路径和文件名。如：/news/news.html 或 file:/g:/wamp/www/index.html相对路径：是指INTERNET上资源相对当前页面的地址，它包含从当前指向目的页面位置的路径。如：./news/news.html 或./www/index.html （对站外的链接，必须使用绝对路径。在站内链接，可以使用相对路径）head头部部分页面上的所有链接规定默认地址或默认目标。通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。使用 标签可以改变这一点。浏览器随后将不再使用当前文档的URL，而使用指定的基本URL来解析所有的相对 URL。这其中包括 、 标签中的 URL。属性值描述hrefURL规定页面中所有相对路径的基URLtarget_blank在新窗口中打开被链接文档。_self在相同的框架中打开被链接文档。_parent在父框架集中打开被链接文档_top在整个窗口中打开被链接文档framename在指定的框架中打开被链接文档例1：设置基URL和链接打开方式W3School提供有关页面的元信息（meta-information），如针对搜索引擎和更新频度的描述和关键词（keywords不要超过100个字符，关键字之间用逗号分割，不要超过7组；description不要超过200个字符）、标记文档的作者、标记页面的解码方式、自动刷新页面。属性值描述ContentSome_text具体定义http-equiv或name的相关元信息http-equivContent-type显示字符集的设定Expires声明了一个网页或URL地址不再被浏览器缓存的时间Refresh设置页面自动刷新Set-cookie设置cookisNameAuthor文档作者description网站内容描述Keywords提供给搜索引擎的关键字Generator用什么工具生成的此HTMLrevisedothersschemeSome_text定义用于翻译 content 属性值的格式例1：定义网页字体编码例2：定义网页作者例3：定义网页关键字和描述例4，设置自动跳转URL例5，设置自动刷新当前页定义文档与外部资源的关系，最常见的用途是链接css样式表。属性值描述charsetcharset定义被链接文档的字符编码HrefURL链接文档的位置HerflangLanguage_code定义被链接文档中字体的语言mediascreen显示器屏幕（默认）Tty电传打字机以及类似的宽字符网格的媒介tv电视机类型设备（低分辨率，有限的滚动能力）Projection放映机Handheld手持设备Print打印机预览模式Braille盲人点子法反馈设备aural语音合成器All所有设备relAlternate文档的替代版本Appendix文档的附录Bookmark相关文档Chapter文档的章Contents文档的目录Copyright包含版权信息的文档Glossary在文档中使用的词汇术语表Help帮助文档HomeIndex文档的索引Next集合中的下一个文档Prev集合中的上一个文档section文档的小节Start集合中的第一个文档Stylesheet文档的外部样式表subsection文档的小节rev值rel相同效果与rel相反target_blank在新窗口中打开被链接文档_self在相同的框架中打开被链接文档_parent在父框架集中打开被链接文档_top在整个窗口中打开被链接文档framename在指定的框架中打开被链接文档typeMIME_type规定被链接文档的MIME类型例1：链接一个外部样式表定义网页的标题，并且浏览器会以特殊的方式来使用标题，通常把它放置在浏览器窗口的标题栏上，当文档加入到用户的链接列表、收藏夹或书签是，标题将成为该文档链接的默认名字（标题长度不要超过80个字符）。属性值描述DirRtl规定内容的文本方向（右方）Ltr规定内容的文本方向（左方）LangLanguage_code规定内容的语言编码Xml:langLanguage_code规定XHTML文档元素的内容语言编码例1：定义一个网页的标题第一个网页定义客户端脚本，可以包含脚本语言，或是通过src属性，指向外部脚本文件。属性值描述TypeMIME-type指示脚本的MIME类型CharsetCharset规定在外部脚本文件中使用的字符编码DeferDefer规定是否对脚本执行进行延迟，直到页面加载为止LanguageScript规定脚本语言SrcURL外部脚本文件的URLXml:spacepreserve规定是否保留代码中的空白例1：定义一个外部引用脚本文件例2：创建一段脚本document.write(Hello World!)用于为HTML文档定义css样式属性值描述TypeText/css规定样式表的MIME类型mediaScreen显示器屏幕（默认）Tty电传打字机以及类似的宽字符网格的媒介Tv电视机类型设备（低分辨率，有限的滚动能力）Projection放映机Handheld手持设备Print打印机预览模式Braille盲人点子法反馈设备Aural语音合成器all所有设备例：h1 color:red;pcolor: blue;body文档主体注释注释可以是用作说明，也可以是用作标示等等，丰富详细的注释，可以提高代码的可读性，便于维护或二次开发，注释的内容，浏览器会自动忽略，并不会显示在页面中。例：标题-*浏览器会自动吧标题的前后添加空行*搜索引擎会使用标题为网页的结构和内容索引。属性值描述IdName_id设置唯一idClassName_class设置类名Titletext鼠标悬停显示注释StyleStyle_definition行内样式DirLtr|rtl元素内容的文本方向LangLanguage_code内容的语言代码Xml:langLanguage_codeXHTML 文档中元素内容的语言代码alignLeft居左Center居中Right居右Justify对行进行伸展例：春晓水平线在 HTML 页面中创建水平线。属性值描述IdName_id设置唯一idClassName_class设置类名Titletext鼠标悬停显示注释StyleStyle_definition行内样式DirLtr|rtl元素内容的文本方向LangLanguage_code内容的语言代码Xml:langLanguage_codeXHTML 文档中元素内容的语言代码AlignCenter居中Left居左Right居右NoshadeNoshade规定元素的颜色是呈现纯色SizePixels高度（厚度）WidthPixels宽度（长度）%以页面的百分比设置长度例：在页面中画一条水平线段落浏览器会自动地在段落的前后添加空行属性值描述IdName_id设置唯一idClassName_class设置类名Titletext鼠标悬停显示注释StyleStyle_definition行内样式DirLtr|rtl元素内容的文本方向LangLanguage_code内容的语言代码Xml:langLanguage_codeXHTML 文档中元素内容的语言代码alignLeft居左Center居中Right居右Justify对行进行伸展例:春晓春眠不觉晓， 处处闻啼鸟。 夜来风雨声， 花落知多少。换行产生一个换行，跳到下一行。属性值描述IdName_id设置唯一idClassName_class设置类名Titletext鼠标悬停显示注释StyleStyle_definition行内样式例：春晓春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。HTML文本格式化文本格式化标签标签描述粗体文本大号字着重文字斜体字小号字加重语气下标字上标字插入字删除字下划线计算机输出标签标签描述定义计算机代码定义键盘码定义计算机代码样本定义打字机代码定义变量预格式文本引用和术语定义标签描述定义缩写定义首字母缩写定义地址定义文字方向定义长的引用定义短的引用定义引用定义一个定义项目图像页面中嵌入元素，用作图片，背景，链接图片等等属性值描述IdName_id设置唯一idClassName_class设置类名Titletext鼠标悬停显示注释StyleStyle_definition行内样式DirLtr|rtl元素内容的文本方向LangLanguage_code内容的语言代码Xml:langLanguage_codeXHTML 文档中元素内容的语言代码Alttext无法显示图片时的替代文本srcURL图片的URLalignTop图像与顶部对齐Bottom图像与底部对齐Middle图像中央对齐Left图像对齐到左边Right图像对齐到右边BorderPixels定义图像边框宽度HeightPixels图像高度%按图像自身的百分比显示高度HspacePixels定义图像左侧和右侧的空白IsmapURL将图像定义为服务器端图像映射LogdescURL指向包含图像描述文档的URL（废属性）UsemapURL将图像定义为客户端图像映射VspacePixels定义图像顶部与底部的空白WidthPixels设置图像的宽度%按图像自身的百分比显示宽度例1：在页面内插入图片，定义宽度和高度，居中例2：将图片设置为网页背景客户端图像映射映射标签在图片中设置特定区域，作为超链接使用，嵌套使用。属性值描述IdName_id设置唯一idClassName_class设置类名Titletext鼠标悬停显示注释StyleStyle_definition行内样式DirLtr|rtl元素内容的文本方向LangLanguage_code内容的语言代码Xml:langLanguage_codeXHTML 文档中元素内容的语言代码Tabindexcharacter设置访问元素的键盘快捷键accesskeynumber设置元素的Tab键控制次序Alttext区域的替换文本Coords坐标圈定区域的坐标HrefURL区域连接的URLNohrefnohref从图像摄影排除某个区域ShapeDefault规定链接的形状，全部区域Rect定义矩形区域Circ定义圆形区域Poly定义多边形区域target_blank在新窗口中打开_parent在父框架中打开_self在相同窗口打开_top在整个窗口打开例:1：在图片内圈定一个区域为超链接 例2:将图片映射为具备坐标能力的地图（可以用GET方式接收到坐标值）链接链接又称超级链接，可以与网络上的一个文档相连，也可以在本地文档相连，或是在通一个文档内跳转到指定位置，链接可以是一个字，一个词，一句话或是一张图片等。通过点击跳转到指定的目标文档或是目标位置。*HTML元素都可以设置为链接*锚的名称可以自定义，可以使用 id 属性来替代 name 属性，命名锚同样有效*将#锚名称添加到URL的末端，就可以直接访问链接目标，命名锚的位置了如，*浏览器如果找不到命名锚，会默认跳转到页面顶端，不会报错属性值描述IdName_id设置唯一idClassName_class设置类名Titletext鼠标悬停显示注释StyleStyle_definition行内样式DirLtr|rtl元素内容的文本方向LangLanguage_code内容的语言代码Xml:langLanguage_codeXHTML 文档中元素内容的语言代码Tabindexcharacter设置访问元素的键盘快捷键accesskeynumber设置元素的Tab键控制次序Charset字符集名称目标URL的字符编码Coords坐标链接的坐标HrefURL链接的目标URLHreflangISO语言代码目标URL的基准语言NameSection_name定义锚的名称RelText规定当前文档与目标URL之间的关系RevText规定目标URL与当前文档之间的关系ShapeDefault规定链接的形状，全部区域rect定义矩形区域circle定义圆形区域poly定义多边形区域Target_blank在新窗口中打开_parent在父框架中打开_self在相同窗口打开_top在整个窗口打开Framename在指定框架中打开typeMIME_type目标URL的MIME类型例1：文字超链接网易例2：页面内使用锚定位a1位置例3：超链接+命名锚组合使用，进行跳转与定位跳转到new页#a1的位置例4：图片超链接例5：电子邮件链接发送邮件表格在页面中嵌入表格*单元格的内容，可以是文本，图片，列表，表格等等。也可以利用表格进行网页布局。*如果不定义边框属性，表格将不显示边框*空的单元格边框没有被显示时，解决方法，在空单元格中添加一个空格占位符 标签功能定义表格表格标题表头的表头表格的行表格的单元表格的页眉表格的主体表格的页脚定义表格列的组细化定义内成员样式表格 属性值描述IdName_id设置唯一idClassName_class设置类名Titletext鼠标悬停显示注释StyleStyle_definition行内样式DirLtr|rtl元素内容的文本方向langLanguage_code内容的语言代码Xml:langLanguage_codeXHTML 文档中元素内容的语言代码alignleft左对齐center居中right右对齐bgcolorrgb(x,x,x)背景颜色，RGB三色模式#xxxxxx6位十六进制码colorname英文颜色单词borderpixels表格边框与单元格边框的宽度cellpaddingpixels单元边沿与内容之间的空白间距%百分比cellspacingpixels单元格之间的空白间距%百分比framevoid不显示外侧边框above显示上不的外边框below显示下部的外边框hsides显示上部与下部的外边框ihs显示左侧的外边框rhs显示右侧的外边框vsides显示左右两侧的外边框box显示四个边上的外边框border在四个边上的显示外侧边框rulesnone行列之间无线groups位于行组合和列组之间的线条rows位于行之间的线条cols位于列之间的线条all位于行和列之间的线条summarytext表格的摘要widthpixels规定表格的宽度%百分比宽度表格标题属性值描述IdName_id设置唯一idClassName_class设置类名Titletext鼠标悬停显示注释StyleStyle_definition行内样式DirLtr|rtl元素内容的文本方向langLanguage_code内容的语言代码Xml:langLanguage_codeXHTML 文档中元素内容的语言代码alignleft标题在表格的左边right标题在表格的右边top标题在表格的上边bottom表格在表格的下边表格表头属性值描述IdName_id设置唯一idClassName_class设置类名Titletext鼠标悬停显示注释StyleStyle_definition行内样式DirLtr|rtl元素内容的文本方向langLanguage_code内容的语言代码Xml:langLanguage_codeXHTML 文档中元素内容的语言代码abbrtext单元格中内容的缩写版本alignleft水平排列，左对齐内容（默认）right水平排列，右对齐内容center水平排列，居中对齐内容justify水平排列，对行进行伸展char水平排列，将内容对准指定字符valigntop垂直排列，上对齐内容middle垂直排列，居中对齐内容（默认）bottom垂直排列，下对齐内容baseline垂直排列，与基线对齐axiscategory_name对单元格进行分类bgcolorrgb(x,x,x)单元格内的背景颜色格式#xxxxxx颜色格式color_name颜色格式charcharacter定义字符来进行内容的对齐charoffnumber定义对齐字符的偏移量colspannumber设置单元格可横跨的列数rowspannumber设置单元格可横跨的行数heightpixels单元格的高度%百分比高度nowrapnowrap规定单元格中内容不自动换行headersidrefs由空格分隔的表头单元格ID列表，为数据单元格提供表头信息scopecol规定单元格的列是表头colgroup规定单元格的列组是表头row规定单元格的行是表头rowgroup规定单元格的行组是表头widthpixels单元格的宽度（列中最宽的宽度，决定本列宽度）%百分比宽度表格行属性值描述IdName_id设置唯一idClassName_class设置类名Titletext鼠标悬停显示注释StyleStyle_definition行内样式DirLtr|rtl元素内容的文本方向langLanguage_code内容的语言代码Xml:langLanguage_codeXHTML 文档中元素内容的语言代码alignleft水平排列，左对齐内容（默认）right水平排列，右对齐内容center水平排列，居中对齐内容justify水平排列，对行进行伸展char水平排列，将内容对准指定字符bgcolorrgb(x,x,x)单元格内的背景颜色格式#xxxxxx颜色格式color_name颜色格式charcharacter定义字符来进行内容的对齐charoffnumber定义对齐字符的偏移量valigntop垂直排列，上对齐内容middle垂直排列，居中对齐内容（默认）bottom垂直排列，下对齐内容baseline垂直排列，与基线对齐表格单元格属性值描述IdName_id设置唯一idClassName_class设置类名Titletext鼠标悬停显示注释StyleStyle_definition行内样式DirLtr|rtl元素内容的文本方向langLanguage_code内容的语言代码Xml:langLanguage_codeXHTML 文档中元素内容的语言代码abbrtext单元格中内容的缩写版本alignleft水平排列，左对齐内容（默认）right水平排列，右对齐内容center水平排列，居中对齐内容justify水平排列，对行进行伸展char水平排列，将内容对准指定字符valigntop垂直排列，上对齐内容middle垂直排列，居中对齐内容（默认）bottom垂直排列，下对齐内容baseline垂直排列，与基线对齐axiscategory_name对单元格进行分类bgcolorrgb(x,x,x)单元格内的背景颜色格式#xxxxxx颜色格式color_name颜色格式charcharacter定义字符来进行内容的对齐charoffnumber定义对齐字符的偏移量colspannumber设置单元格可横跨的列数rowspannumber设置单元格可横跨的行数heightpixels单元格的高度%百分比高度nowrapnowrap规定单元格中内容不自动换行headersheader_cells_id与单元格相关的表头scopecol规定单元格的列是表头colgroup规定单元格的列组是表头row规定单元格的行是表头rowgroup规定单元格的行组是表头widthpixels单元格的宽度（列中最宽的宽度，决定本列宽度）%百分比宽度表格页眉,表格主体,表格页脚属性值描述IdName_id设置唯一idClassName_class设置类名Titletext鼠标悬停显示注释StyleStyle_definition行内样式DirLtr|rtl元素内容的文本方向langLanguage_code内容的语言代码Xml:langLanguage_codeXHTML 文档中元素内容的语言代码alignleft水平排列，左对齐内容（默认）right水平排列，右对齐内容center水平排列，居中对齐内容justify水平排列，对行进行伸展char水平排列，将内容对准指定字符valigntop垂直排列，上对齐内容middle垂直排列，居中对齐内容（默认）bottom垂直排列，下对齐内容baseline垂直排列，与基线对齐charcharacter定义字符来进行内容的对齐charoffnumber定义对齐字符的偏移量表格列的分组,组内细化属性值描述IdName_id设置唯一idClassName_class设置类名Titletext鼠标悬停显示注释StyleStyle_definition行内样式DirLtr|rtl元素内容的文本方向langLanguage_code内容的语言代码Xml:langLanguage_codeXHTML 文档中元素内容的语言代码alignleft水平排列，左对齐内容（默认）right水平排列，右对齐内容center水平排列，居中对齐内容justify水平排列，对行进行伸展char水平排列，将内容对准指定字符valigntop垂直排列，上对齐内容middle垂直排列，居中对齐内容（默认）bottom垂直排列，下对齐内容baseline垂直排列，与基线对齐charcharacter定义字符来进行内容的对齐charoffnumber定义对齐字符的偏移量spsnnumber横跨的列数例1，一个结构相对完整的表格 表格monthsavingJanuary$100february$80sum$180例2：跨列的表格 姓名 电话January130794655252848525february189794655254839596例3：跨行的表格  Januaryfebruary电话