HTML语言的基础理论知识.doc

HTML语言的基础理论知识HTML简述：整个html是一个文档，他由成对和不成对的标签组成，标签里还有相应的属性。打个比方：一个图书馆就相当于一个网站，图书馆里有很多图书组成的，而网站是由很多的网页组成的，每个图书的基本单位是家庭，而每个网页则是由元素构成的，家庭中有爸妈，就像文档中有成对的标签一样，爸妈的下面有许多的孩子，就像标签下面也包含了许多的属性一样图书馆图书章节内容网站网页元素标签HTML框架：这是一个NLP网站举例() 一、HTML注释在html中注释的语法：，他不显示在页面中，在源代码中以注释标签的方式出现，浏览器不予阅读，但自己可以添加注释标签，以方便之后对代码的阅读和修改例子：这里介绍NLP的相关内容二、HTML标签HTML为于文档的最前面，在的前面，主要作用是向浏览器说明该HTML文档使用的文档类型，是没有闭合标签的三、HTML 标题 HTML标题是用.这六个成对的标签表示的，显示的标题最大，以此往下，显示出的标题最小例子：中国中国四、HTML 元素HTML元素是指从开始标签到结束标签中的所有代码，一个html文档中包含许多的元素，比如:这是一个链接，请点击，此句“这是一个链接，请点击”就是一个元素，这样的很多元素就组成了html文档，除此之外还有没有内容的元素，就是空的 HTML 元素，在HTML的标签中没有内容，称作空元素，空元素通常在开始标签中加“/”，就是关闭空元素的正确方法，如（换行）、（水平线），在HTML、XML中所有的元素都要关闭例子：看完漂亮的图片后，可点击此图片，还有更大的惊喜等着你哦 5、 html文本格式化 Html可以定义很多经过格式化输出的元素，比如加粗，斜体等（具体标签见html辅资料1、2、3点）例子：addWWW在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。六、HTML 属性 HTML标签可以含有属性，属性为标签提供了很多的信息，属性是由属性名和属性值组成，属性是在开始标签中定义的，属性值要始终被英文下的双引号包围，如中国，这个元素中定义的属性意思就是“中国”这个标题的位置在页面的右边显示例子：这是头标题这是中标题这是尾标题七、HTML标签 HTML段落是用成对标签定义的，文字位于标签的中间，显示在页面中，用以表示文字或是图片是否在同一个段落，用以分段的例子：这是第一段这是第二段段落元素是由P标签定义八、HTML 标签 HTML标签定义的是链接，他是通过成对标签 进行定义的，href属性值是链接的URL（uniform resource lac），句型：显示出链接的文字或是图片例子：这是中国NLP培训网网站可以点击此图片，你将得到不一样的惊喜啊九、HTML水平线 在HTML页面中的作用是插入水平线，可实现内容的分隔，不是成对出现的标签，位于内容的最后例子： 看完漂亮的图片后，可点击此图片，还有更大的惊喜等着你哦 十、HTML标签 在网页中插入图片时图片的路径应该是一级跟着一级往下写（从头到尾 巴），如：(这种情况是图片就在某一个盘下，没有往下的文件夹)； (这种情况是图片在某一个盘下，并且其图片上面还有很多相应的文件夹)例子： 这是一幅美丽的图片，请欣赏 这是一幅美丽的图片，请欣赏 十一、HTML 标签中alt属性：Alt属性是位于img中的一个属性，他的作用是当你想要显示的图片因为网速不好、路径不对等多种原因无法显示你的图片时，可显示该图片的名称，以便读者可以知道自己看不到的图片是什么例子：这是一幅美丽的图片，请欣赏十二、HTML页面中添加背景图片： 在HTML里添加背景图片时的语句跟插入图片的语句不一样，插入图片的语句是，而添加背景图片的语句是例子：这是一幅美丽的图片背景，请欣赏十三、页面背景颜色 ；【bgcolor属性值可以是RGB值rgb:(0,0,0)、十六进制数#000000、颜色名black】例子：bkjdehfkdsh十四、HTML中文字和图片的排列方式 在HTML中文字位于图片的上方 在HTML中文字位于图片的中间 在HTML中文字位于图片的下方 Bottom是默认的对齐方式，即是下方例子：（效果见HTML学习中的DIY）这是一幅漂亮的图片十五、HTML中图片浮动在段落的左边或是右边 图片位于段落的右边 一段文字 图片位于段落的左边 一段文字例子：（效果见HTML学习中的DIY）这是一幅漂亮的图片这是一幅漂亮的图片这是一幅漂亮的图片这是一幅漂亮的图片这是一幅漂亮的图片这是一幅漂亮的图片【还有文字可设置在图片的top、middle、bottom显示】十六、HTML链接的target属性 在HTML中链接语句中target属性作用是指打开的链接文档将在何处显示，命名target语法：NLP培训，其中的文字或是图片是被作为超级链接来显示的，_blank的意思是链接的方向将是以新的窗口形式显示,没有此属性的链接打开时显示在当前的浏览器的窗口，有此属性的链接打开是以新的窗口出现，之前的窗口仍然可以看见例子：中国NLP培训网论坛张翔NLP十七、HTML链接的name属性（内容足够多才能现在在最上端） 在html的链接中还有一个name属性，他的书写语法：文本等，他的作用是命名了一个锚，锚的作用就是相当于一本书的书签，当一个网页有很多内容的时候，你想赶快寻找你想了解的内容时，此时的锚就起到把你带到你想赶快知道的那个地方去，锚的名称是由自己取的，根据自己的喜好，光有锚的名称是不行的，还要有链接锚的链接才能真正实现锚的作用，这就是链接锚的链接语法：文本等，锚的链接在文档的上部定义例子：创建指向本网页的锚所能看到空间111kkkkkffffffffff111ffffffffffsafdefdgfdgfdhgdfshgdfbdvgdrtgerffffffffffkkkkkffffffffff十八、HTML的电子邮箱链接 在网页中创建电子邮箱的链接，前提是机子有安装邮箱客户端程序软件才可以，他的语法跟链接的基本语法一样，不一样的地方是链接要填写的内容，其中用%20表示空格例子：此处是邮箱链接处：邮箱链接十九、HTML表格、边框、表头、空表格的相关属性 在HTML中，用这样的一对标签来定义表格，用来定义表格的行，用来定义表格单元，表格的内容可以使文本、图片、表格、水平线、段落、表单、列表；边框的大小仍然由border属性定义，在表格的开始标签中定义；表格的表头由一对标签定义；空的单元格如果没有内容显示，则单元格的边框不显示，为了显示没有内容的单元格的边框，可在空的单元格里添加空格占位符“ ”此处的分号是英文下的格式。例子：名称格式小小鸟小小鸟1,21,2 二十、HTML表格相连标签、属性 在HTML的表格中，还有很多有关表格的详细操作，比如跨行、跨列、表格的标题等；1 html的表格中跨行和跨列的属性用rowspan和colspan定义，即是合并几行或是几列显示一个信息（合并单元格），跨行和跨列的语法可以在标签里添加，也可以在标签里添加，记得不能在标签里添加，标签里添加可实现居中，如果想在也实现的话，可输入align属性即可；同时跨行或是跨列可在很多单元格里实现操作，注意的是如果想是跨行的操作，rowspan属性要写在实现跨行的第一个标签里2 在html的表格中cellpadding属性意思是：表格的边框与内容的距离，即是文字离边框的边距，文字所占据的大小没变，变的是表格大小；cellspacing属性意思的是：单元格与单元格之间的间距3 在html的表格中还有表格的标题标签，这样的一对标签即是，位于开始标签的下面4 在html的表格中frame属性的意思是如何显示边框，属性值有：box（显示所有的边框）、above(显示上边框)、below(显示下边框)、hsides(显示上下边框)、vsides(显示左右边框)例子：表格的标题123456123456287980123456987287980123456555h354324654二十一、HTML标签 在HTML表格中，有一个标签的作用是实现整列整列单元格的各种格式的变化，不需要对一个一个单元格进行操作了，这个标签就是,这个标签只有在table元素中使用，其中span是定义跨多少列的属性例子：ISBNTitlePricedsfdrewewgvwe4324dsfdrewewgvwe4324二十二、HTML有序列表、无序列表 HTML列表是一些项目的列表，这些项目的列表可以是有序的，也可以是无序的，因此有序的项目列表用成对标签定义，项目的前面是数字进行标记，无序的项目列表用定义，项目用的是小黑点标记，其中的项目用进行定义，同时项目不仅可以使文本，也可以是段落、图片、换行符、链接、列表等等例子1（有序列表）：咖啡巧克力面包例子2（无序列表）：咖啡巧克力面包二十三、HTML自定义列表 HTML列表中还有可以自己定义的列表，一对标签就是定义自定义列表的标签，标签定义的是列表中的列项，标签是描述列表中的列项，而定义列表项的内容形式也可以是很多类型的例子：一个自定义的列表：咖啡好喝的牛奶不好喝二十四、HTML不同类型的无序列表符号 属性值disc定义的无序列表符号是圆；属性值circle定义的无序列表符号是圆圈；属性值square定义的无序列表符号是方块例子：一个项目符号是圆的列表：4356745574一个项目符号是圆圈的列表：4245784245一个项目符号是方块的列表：7857245245二十五、HTML不同类型的有序列表符号 属性值A定义是大写字母项目符号；属性值a定义的是小写字母项目符号；属性值I定义的是罗马字母项目符号；属性值i定义的是小写罗马字母项目符号(在列表中可以实现项目符号不一样，但顺序是递增的)例子：一个项目符号是数字的有序列表：4356745574一个项目符号是字母的有序列表：4245784245一个项目符号是小写字母的有序列表：7857 245245一个项目符号是罗马字母的有序列表：7857245245一个项目符号是小写罗马字母的有序列表：7857245245二十六、HTML嵌套列表例子：一个嵌套列表：咖啡茶红茶绿茶中国绿茶非洲绿茶牛奶二十七、表单的各种类型 在HTML中用表单标签定义各种表单，语法为：【显示内容】，inptut属性是表单属性中常用的属性，type定义了输入的类型，输入类型有：1 文本域（text fields,输入可以有文本、数字等）2 单选按钮（radio buttons）3 复选框（checkboxes）4 下拉列表框(每个选项的名称)5 文本域（textarea，可以输入多行的文本）6 创建按钮7 为表单创建一个带有标题的框框例子：姓名：密码：malefemale【创建单选框】咖啡茶【创建复选框】玫瑰花栀子花桂花【创建下拉列表框】【创建可以输入很多行的文本域】【创建按钮】健康信息身高：体重：【为表单的周围建立一个带有标题的框框】二十八、HTML标签1 为html文档定义样式信息，type属性也是style标签必须带有的，他为style标签表达的意思是样式以怎样的类型呈现，通常赋予的是text/css属性值，此样式信息都在head中定义，比如：pcolor:red信息2 同时style有时也代替废弃的一些属性、标签来表达原有的信息旧的表达背景颜色的语法：新的表达背景颜色的语法：旧的表达字体排列的语法：新的表达字体排列的语法：表达字体系列的语法：二十九、HTML块标签标签 division的中文意思是分割、区域、分组，他是将文档中的内容有意的放在一起，并做一定的样式变化，而class和di属性是使div标签中内容套用一些样式，样式是在中style定义例子：.newsbackground-color:yellow;text-align:center;color:blackNEWS WEBSITEsome text. some text. some text.News headline 1刘文华文华大系统News headline 2some text. some text. some text.三十、Html的class属性 class此属性的意思“类”，他的属性值是“类名”，可以为元素定义很多类，很多类之间用空格隔开即可，而此类名大多数是用于指向样式表中的定义的类例子：.mcolor:blue.nbackground-color:red;text-align:center我是中国人我是中国人我是中国人三十一、Html的id属性 id定义元素的唯一id，只能定义一个id，他的语法与class不一样，且不能定义很多id，只能定义一个id例子：#mcolor:white;background-color:blue;text-align:center我是中国人三十二、HTML块标签span标签 Html标签的作用是组合文档中行内的元素，可以对组合内的元素进行一些格式化，使用的属性有class和id，但他的语法没有固定的，可以在span标签中添加，也可以在他的父标签中添加属性更改span组合内元素的格式，最好的情况是在标签中定义class属性值的时候，将span名带上，然后在主体中直接在span的父元素中引用class即可：.【p.m span.】例子：（效果见html的DIY）.m background-color:red.n spancolor=green中国人中国人中国人中国人中国人中国人中国人中国人三十三、HTML布局 在html中可以通过使用div元素和table元素实现像报纸上那种格式化的分栏，将内容放入很多的列中1 例子：中国人中国人民解放军中国人民解放军中国人民解放军中国人民解放军中国人民解放军中国人民解放军中国人民解放军中国人民解放军中国人民解放军中国人民解放军中国人民解放军中国人民解放军中国人民解放军中国人民解放军中国人民解放军中国人民解放军中国人民解放军2 例子：(效果见DIY)div#containerwidth:500pxdiv#headerbackground-color:#aabbcc;div#menubackground-color:#dddddd; width:100px; height:200px; float:left;div#contentbackground-color:#aaaaaa; width:400px; height:200px; float:left;div#footerbackground-color:#aabaaa;h1margin-bottom:0;我是中国人我是中国人我是中国人我是中国人三十四、html框架 在Html中可以通过html代码实现在一个页面中划分很多的页面窗口，使用的标签是，表示的意思是框架集，属性用cols和rows表示将要在浏览器的页面中划分的窗口大小，在划分的窗口中，可看到显示的边框线，这个边框线是可以通过手动改变各个窗口的大小的，但是这样不好，可以用noresize属性实现窗口中的边框线不改变。还要注意的是标签和两者是不能同时出现的，除了一些情况例子：(混合框架结构)三十五、HTML标签 在页面中创建框架，使用的标签是,中间的路径也可以是网页地址例子：三十六、HTML字体 在以后的html中，字体标签即将被废弃,取而代之的是使用样式来设置文字的字体、文字的尺寸、文字的颜色，比如：文字的字体：times、verdana、courier文字的尺寸：50、50%文字颜色：red、#ff0000、rgb(255,0,0)三十七、HTML样式(CSS层叠样式表单)1 是当很多网页需要同一种样式时，通过外部样式表进行插入将是一个理想的选择，可以通过更改一个文件实现整个站点的外观的更改。语句是在中插入，如： ；2 是当只有单个网页需要样式的插入时，使用的是内部样式表，该语法是在中使用标签进行定义内部样式表，语法是：body background-color:redp margin-left:20px；3 是当一些特殊的样式需要运用到个别的元素上时，使用的是内联样式，采用的是style样式属性在元素中定义要插入的样式，语法：我是中国人三十八、html标签1 标定义的是文档与外部资源的关系，他只在样式表的链接上使用；2 标签是个空的标签，他只有一些属性；3 只在部分中出现，且出现的次数不定；4 在html中没有闭合标签，在xhtml中一定要加上闭合标签；语法：例子：三十九、HTML标签的rel属性 rel属性定义的是当前的文档与被链接的文档之间的关系，他的语法是：link rel=value ，如rel=stylesheet的意思是表示被链接的文档是个样式表，除了stylesheet属性值外被所有的浏览器支持，还有部分属性值被浏览器支持，如：alternate 文档的替代版本（比如打印页、翻译或镜像）。 stylesheet 文档的外部样式表。 start 集合中的第一个文档。 next 集合中的下一个文档。 prev 集合中的上一个文档。 contents 文档的目录。 index 文档的索引。 glossary 在文档中使用的词汇的术语表（解释）。 copyright 包含版权信息的文档。 chapter 文档的章。 section 文档的节。 subsection 文档的小节。 appendix 文档的附录。 help 帮助文档。 bookmark 相关文档。 四十、HTML标签 标签定义的是html文档中元信息，是head标签的辅助标签，标签有两个属性，分别是http-equiv属性和name属性1. name属性及参数 Name属性主要是描述网页的一些信息，便于机器人进行网页内容的查找和分类，与name属性想对应的是content属性值，name属性还有一些参数，他的语法格式：，下面是一些参数的介绍：1 Keywords（关键字）参数:主要是让搜索引擎知道你网页的关键字是哪些 例子：2 Description（描述）参数：主要是让搜索引擎知道你网页主要内容 例子：3 机器人向导：主要是让搜索引擎知道哪些页面需要索引，哪些页面时不需要索引的,content参数有all,none,index,noindex,follow,nofollow；例子：4 作者，主要是标记网页的作者的，例子： 5 发电机，发生器，主要是标记文档编辑使用的软件，例子6 经过修订的，主要是标记文档是怎么呈现的，例子2. http-equiv属性http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。 meta标签的http-equiv属性语法格式是： ；其中http-equiv属性主要有以下几种参数： 1 Expires(期限) 说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。 用法： 注意：必须使用GMT的时间格式。 2 Pragma(cache模式) 说明：禁止浏览器从本地计算机的缓存中访问页面内容。 用法： 注意：这样设定，访问者将无法脱机浏览。 3 Refresh(刷新) 说明：自动刷新并指向新页面。 用法：(注意后面的引号，分别在秒数的前面和网址的后面) 注意：其中的2是指停留2秒钟后自动刷新到URL网址。例子： 对不起。我们已经搬家了。您的 URL 是 4 Set-Cookie(cookie设定) 说明：如果网页过期，那么存盘的cookie将被删除。 用法： 注意：必须使用GMT的时间格式。 5 Window-target(显示窗口的设定) 说明：强制页面在当前窗口以独立页面显示。 用法： 注意：用来防止别人在框架里调用自己的页面。 6 content-Type(显示字符集的设定) 说明：设定页面使用的字符集。 用法： G、content-Language（显示语言的设定） 用法：四十一、HTML脚本 HTML脚本使得页面更加的生动和具有交互性1 标签语法：. Type属性值是脚本的编辑