html笔记

第一天HTML【教学内容】HTML基本标签Html介绍文件标签排版标签块标签字体标签清单标签图形标签链接标签表格标签HTML表单标签Form标签Input种类Select与option标签Textarea标签HTML框架及特殊字符框架标签其它标签与特殊字符【教学总结】【第一阶段】【学习目标】1.了解html常用标签2.掌握html中的表格标签3.理解综合案例4.掌握超链接标签【内容：html基本标签】Html介绍1.什么是html?Html是用来描述网页的一种语言。HTML指的是超文本标记语言(HyperTextMarkupLanguage)HTML不是一种编程语言，而是一种标记语言(markuplanguage)标记语言是一套标记标签(markuptag)HTML使用标记标签来描述网页2.Html的作用？Web浏览器的作用是读取html文档，并以网页的形式显示它们。浏览器不会显示html标签，而是使用标签来解释页面上的内容.简单说，html就是用于展示信息的。3.Html书写规范a)Html标签HTML标记标签通常被称为HTML标签(HTMLtag)。HTML标签是由尖括号包围的关键词，比如htmlHTML标签通常是成对出现的，比如b和/b标签对中的第一个标签是开始标签，第二个标签是结束标签绝大多数的标签都具有属性,建议属性值使用引号引起。例如:bodytext=”red”大多数标签是可以嵌套的b)Html创建Html文件可以直接使用文本编辑器来创建，保存时，后缀名为html或htm整个文件是在html与/html标签之间在html标签间有head与body子标签。例如:c)空的html标签没有内容的HTML元素被称为空元素。空元素是在开始标签中关闭的。br就是没有关闭标签的空元素（br标签定义换行）。在开始标签中添加斜杠，比如br/，是关闭空元素的正确方法，HTML、XHTML和XML都接受这种方式。即使br在所有浏览器中都是有效的，但使用br/其实是更长远的保障。d)Html大小写不敏感HTML标签对大小写不敏感：P等同于p。许多网站都使用大写的HTML标签。W3School使用的是小写标签，因为万维网联盟（W3C）在HTML4中推荐使用小写，而在未来(X)HTML版本中强制使用小写文件标签1.html标签整个文件都处于html标签中.HTML用以声明这是HTML文件，让浏览器认出并正确处理此HTML文件。在HTML文件有两部分head与body2.head标签head用于加载一些重要的资讯它的内容不会被显示，只有body的内容才会被显示3.title标签title只能出现于head中。它代表的是标题4.body标签body中的内容会被显示。常用属性:text:用于设定文字颜色background：用于设定背景图片bgcolor:用于设定背景色5.关于html中颜色取值颜色由红色、绿色、蓝色混合而成有三种取取值方式:1.rgb(0,0,0)值是在0-255之间2.#000000#ff0000#00ff00#0000ff#ffffff3.redgreenblue排版标签1.注释在html中注释是!--注释--在html中使用注释的目的与java中一样。2.p标签p标签是段落标签，可以将html文档分割为若干段落。浏览器会自动在段落前后添加空格。p标签常用属性align:用于设定对齐方式可选值leftrightcenter默认值是left.3.br标签br标签是换行标签。因为浏览器会自动的忽略空白与换行，因此br标签成为了我们最常用的标签。4.hr标签hr标签会生成一条水平线。常用属性:align:设置水平线对齐方式可选值leftrightcentersize:设置水平线厚度以像素为单位。默认为2width:设置水平线长度.可以是绝对值或相对值。默认为100%color:设置水平线颜色.默认为黑色5.关于html中数值单位Html的数值默认单位为像素(px).在有些位置可以使用百分比来设置。例如:hrsize=’3’这个就代表水平线厚席为3px.hrwidth=’30%’这个就代表水平线长度为总长度的30%.块标签1.div标签用于在文档中设定一个块区域。常用属性：align:leftcenterright2.span标签用于在行内设定一个块区域。Html中绝大多数元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始。例如divp等内联元素在浏览器显示时，通常不会以新行来开始。span字体标签1.fontfont标签用于规定文本的字体，大小，颜色。常用属性:face:规定文本的字体size:规定文本的大小color:规定文本的颜色2.h1-h6h1-h6标签用于定义标题.h1最大标题h6最小标题列表标签1.ulul标签表示的是一个无序列表。常用属性:type:规定列表的项目符号类型,可取值disc,square,circle.默认值为disc2.lili标签表示的是一个列表项常用属性:type:这个属性只适用于无序列表，用于设定项目符号，默认值为discvalue:这个属性只适用于有序列表，用于设定列表的项目数字3.olol表示的是一个有序列表。常用属性:type:这个属性规定列表中使用的标记类型。可取值1AaIi.start:这个属性规定列表的起始值图形标签1.imgimg是一个图片标签，用于在页面上引入图片.常用属性：src:用于设定要引入的图片的urlalt:用于设定图像的替代文字width:用于设定图片的宽度height:用于设定图片的高度border：图片边框厚度align:用于设定图片的文字的对齐方式链接标签1.aa标签用于定义超连接，用于从一个页面链接到另一个页面。常用属性:href:用于设定链接指向页面的url.name:用于设定锚的名称target:用于设定在何处打开链接页面。表格标签1.tabletable标签用于定义表格常用属性:align:用于设定表格的对齐方式bgcolor:用于设定表格的背景颜色。border:用于设定表格边框的宽度width:用于规定表格的宽度。2.trtr标签用于定义表格的行,包含一个或多个th或td元素。tr常用属性:align:用于设定表格中行的内容对齐方式。bgcolor:用于设定表格中行的背景颜色。3.tdtd标签用于定义表格单元td元素中的文本一般显示为正常字体且左对齐。td常用属性:align:用于设定单元格内容的对齐方式。bgcolor:用于设定单元格背景颜色。height:用于设定单元格的高度。width:用于设定单元格的宽度。colspan:用于设定列合并rowspan:用于设定行合并。4.captioncaption用于定义表格标题caption标签必须紧随table标签之后，一个表格只能有一个标题。通常这个标题会被居中于表格之上。5.thth标签用于定义表格的表头，th内部的文本通常呈现为居中加粗文本。Html表格中有两种类型的单元格：表头单元格th:包含表头信息。标准单元格td:包含数据。6.theadthead标签用于定义表格的页眉thead标签用于组合HTML表格的表头内容。thead元素应该与tbody和tfoot元素结合起来使用。注意:thead内部必须有tr标签。7.tbodytbody标签用于定义表格的主体tbody标签用于组合HTML表格的主体内容。8.tfoottfoot标签用于定义表格的页脚tfoot标签用于组合HTML表格中的表注内容。综合案例1-显示商品信息案例分析与实现整个页面分成五个部分，这五个部分分别是head,menu,search,content,fott我们使用五个div来控制1.head部分head部分有两块内容，一个是左边logo,一个是右边的连接，我们可以使用table来描述，使用一个一行两列的table,左边列显示logo,右边处理这些连接。分析图代码如下:divid=headtabletrtdalign=leftimgsrc=images/logo.gif/tdtd                                                                                                imgsrc=images/cart.gifa购物车/a|a帮助中心/a|a我的帐户/a|a新用户注册/a|/td/tr/table/div我们使用了 ，它代表的是空格，我们使用它来控制列与列之间内容的间隔。后续我们学完css，会有更好的办法来解决间隔问题。2.menu部分menu部分我们使用一个一行一列的table来控制，在td中我们使用a标签来描述所有的菜单，并且设置td的背景色及居中对齐，对于超连接中的文本我们使用font标签来控制文字颜色。分析图:代码如下:divid=menutablewidth=100%trtdalign=centerbgcolor=#1c3f09afontsize=4color=white文学/font/a  afontsize=4color=white生活/font/a  afontsize=4color=white计算机/font/a  afontsize=4color=white外语/font/a  afontsize=4color=white经管/font/a  afontsize=4color=white励志/font/a  afontsize=4color=white社科/font/a  afontsize=4color=white学术/font/a  afontsize=4color=white少儿/font/a  afontsize=4color=white艺术/font/a  afo