ch2_HTML基础知识

第二章HTML基础知识主讲：学习目标掌握HTML标签的使用规则理解HTML文档结构标签掌握META标签的含义及用法掌握标题标签hn的使用掌握font、p、br、pre标签的使用掌握hr水平分隔线、img图像标签的使用HTML标签的使用规则-1HTML标签对英文字母的大小写是不敏感的，html、Html与HTML这三个标签都是一样的。HTML标签一般由开始标签和结束标签组成,并以“”与“”符号标识标签名称。标签名称属性1＝“值1”属性2=“值2”…结束标签一定没有属性，其使用方式为：/标记名称在HTML文档中某个组件的完整定义语法如下：标签名称属性1＝“值1”属性2=“值2”…组件资料/标签名称当利用HTML标签编写HTML文档时，不同标签之间不可以相互交错，否则将造成错误。下面就是一个错误的示例：h1一号标题标签b粗体显示标签/h1!--标签交错错误--/bh1一号标题标签/h1b粗体显示标签/b应改为HTML标签的使用规则-2当利用HTML标签编写HTML文档时，不同标签可以嵌套使用bodybHelloWorld!/b/body注意，当嵌套使用标签时，标签之间也不可以相互交错，否则将出错bodybHelloWorld!/body/b注释内容必须放在“!--”与“--”标签之间：!--注释内容--HTML文档结构标签-1HTML文档结构标签主要有html、head、title、body等标签。html标签是HTML文档的开始标签，即整个HTML文档是以html标签开始的，并以/html结束标签来结束。head标签一般不放置网页的任何内容，它一般用来放置那些关于该HTML文档的描述信息，如文档的标题、文档编写者姓名以及文档所采用的字符集等。title标签位于head标签中，主要用来标识该HTML文档的标题名称与主题内容。HTML文档结构标签-2body标签构成了HTML文档的主体部分。body标签属性功能描述bgcolor设置网页的背景颜色background设置网页的背景图片text设置网页文字的颜色topmargin设置网页的上边距leftmargin设置网页的左边距META标签-1META标签主要用来提供有关网页的描述信息，该标签所提供的描述信息包括网页的作者、关键字、网页文档的类型及字符集等，市面上大多数的搜索引擎（如百度、google等）就是靠这些信息来进行搜索的。meta标签放置在文档的头部(head与/head之间)，meta标签完全由属性组成，它不包含任何内容，且没有结束标签。meta标签常用的属性有name、content、http-equiv三个属性：name属性：提供了由meta标签定义的名称/值对中的名称：metaname=“Authors”content=“张三”metaname=“keywords”content=“html标签，URL”META标签-2content属性：提供了名称/值对中的值，content属性始终要和name属性或http-equiv属性一起使用。http-equiv属性：在HTML文档中，如果meta元素没有提供name属性，那么名称/值对中的名称将会采用http-equiv属性的值：metahttp-equiv=“content-type”content=“text/html;charset=gbk/metahttp-equiv=“expirescontent=1Dec2007metahttp-equiv=refreshcontent=“5metahttp-equiv=refreshcontent=“5;url=标题标签的使用标题标签主要用来标明网页中的标题文字：＜hn＞标题文字＜/hn＞HTML中提供了六级标题，所以n的范围为1~6，依次为h1、h2、h3、h4、h5、h6。align属性值功能描述left标题左对齐center标题居中对齐right标题右对齐font——文本格式标签font字体标签：用来控制文字的字体、大小与颜色：fontface=“值l”size=“值2”color＝“值3”＞要控制的文字＜/font＞font标签属性功能描述face设置文字字体，如宋体、楷体等size设置文字大小，其范围为1~7，最大为7号字，最小为1号字color设置文字颜色pbrpre—文本格式标签p标签：主要用来将网页中的内容划分为一个个的段落，所以p与/p标签就叫段落标签。可以忽略第一段开始的p标签，以及每一段末尾的/p标签，浏览器可以根据文档中的其他标签推断出这两个标签来。大多数浏览器对新的段落都会自动使用左对齐，如果要改变这种行为，可以利用p标签的align属性，它控制段落以左对齐（left）、右对齐（right）、居中对齐（center）方式显示文本内容。br标签：主要用来控制文本结束一行的输出，以便开始新一行的输出，所以br标签就叫换行标签。pre标签：用pre与/pre标签定义的一段文本，浏览器将完全按照在源文档中编好的格式来显示该文本，即pre标签用来显示预先已定义好格式的文本，所以pre就叫预格式化标签。特定文本格式标签在HTML中有一些标签可以设置文字以特定的格式进行显示。下表将列出一些常用的特定文本格式标签。特定文本格式标签功能描述粗体字b/b文字以粗体的方式显示斜体字i/i文字以斜体的方式显示下划线u/u文字以添加了下划线的方式显示删除线s/s文字以添加了删除线的方式显示放大big/big文字以放大字体的方式显示缩小small/small文字以缩小字体的方式显示上标sup/sup文字以上标的方式显示下标sub/sub文字以下标的方式显示hr水平分隔线标签hr标签可以在网页上画出一条横跨网页的水平分隔线，以分隔不同的文字段落，hr标签只有开始标签，没有结束标签。hr标签属性功能描述size设置水平分隔线的粗细，以pixel（像素）为单位。width设置水平分隔线的宽度，宽度既可以用pixel(像素)为单位来设置，也可以用相对于屏幕的百分比来设置。align设置水平分隔线的对齐方式：left（左对齐）、center（居中对齐）、right（右对齐）。color设置水平分隔线的颜色，颜色既可以用英文名称(如：blue)来设置，也可以用十六进制数(如：#ff0000)来设置。noshade设置水平分隔线不显示3D阴影，即以2D的效果显示水平分隔线。img图像标签-1img标签用来往网页中插入图片，该标签没有结束标签，浏览器支持GIF、JPG、PNG等格式的图片文件。利用img标签插入图片文件的语法为：imgsrc=图片文件的路径及名称imgsrc=“Computer.jpg”hspace=“50”vspace=“30”border=“5”align=“top”img标签属性功能描述src指定图片文件的存放路径与名称。height有三种方式设置图片的高度：默认情况下为图片的原始高度、以pixel（像素）为单位来设置图片高度、以相对于屏幕的百分比来设置图片高度。img图像标签-2width有三种方式设置图片的宽度：默认情况下为图片的原始宽度、以pixel（像素）为单位来设置图片宽度、以相对于屏幕的百分比来设置图片宽度。border设置图片边框宽度：以pixel（像素）为单位来设置图片边框宽度，若设为0则代表不显示边框，这与未设置此属性的效果相同。hspace设置图片左右两边水平方向的空白区域宽度：以pixel（像素）为单位来设置水平空白宽度。vspace设置图片上下垂直方向的空白区域高度：以pixel（像素）为单位来设置垂直空白高度。align设置图片相对于周围文字的对齐方式：top(上对齐)、middle（居中对齐）、bottom（下对齐）、left（左对齐）、right（右对齐），默认为bottom下对齐。alt设置图片的取代文字：当浏览器不能显示所指定的图片时，它将显示一段说明该图片的文字，alt属性就是用来设置这一段说明文字的。HTML中的特殊字符HTML文档中的特殊字符由以下三部分组成：&符号实体名称；分号特殊字符编码特殊字符编码空格 逻辑与（&）&小于号()<人民币符号(￥)¥大于号()>版权号(©)©引号()"注册商标（®）®乘号(x)×英镑符号(￡)£小结标签的定义是不区分大小写的，HTML标签一般由开始标签和结束标签组成HTML文档中的注释其语法为!--注释内容--HTML文档结构标签主要有html、head、title、body等标签META标签主要用来提供有关网页的描述信息，如网页的作者、关键字、网页文档的类型及字符集等HTML中提供了六级标题，依次为h1、h2、h3、h4、h5、h6在HTML中常用的文本格式标签有font、p、br、prehr水平分隔线标签用来在网页中绘制水平分隔线，以分隔不同的文字段落img标签用来往网页中插入图片，浏览器支持的图片格式有GIF、JPG、PNG等