html学习笔记汇总.docx
- 文档编号:11529180
- 上传时间:2023-03-18
- 格式:DOCX
- 页数:15
- 大小:26.32KB
html学习笔记汇总.docx
《html学习笔记汇总.docx》由会员分享,可在线阅读,更多相关《html学习笔记汇总.docx(15页珍藏版)》请在冰豆网上搜索。
html学习笔记汇总
Html学习笔记汇总:
1.简介
HTML是“HyperTextMark-upLanguage(超文本标记语言)”的缩写。
XHTML(可扩展超文本标记语言)
2.主要语法及常用元素属性
A.标签中的字母应该大写还是小写?
大多数浏览器不介意标签是大写还是小写,或者混合大小写。
所以、或在浏览器上的显示效果都一样。
但是,正确的写法是采用小写字母来书写标签。
所以,要养成用小写字母书写标签的习惯。
B.HTML文档有两个部分:
头部(head)和主体(body)。
你在头部(head)提供关于网页的信息,你在主体(body)部分提供网页的具体内容。
C.如果你要指定HTML文档的网页标题(title)(它将显示在浏览器窗口顶部),你就要
在头部(head)提供有关信息。
用title元素来指定网页标题:
即在首标签
Eg.
网页标题(title)尤其重要,因为搜索引擎(比如Google)要用它来索引网页,并显示在搜索结果里。
提示:
好的设置与描述可以提高页面在搜索引擎的排名.
信息标记:
Meta标签
基本语法:
使用meta设置页面列表:
搜索设置
关键字设置
页面编码设置(utf-8)
页面描述设置
作者设置
Eg.
企业信息化系统
帮助企业管理内部信息."name=description> Meta的http-equiv属性详解 顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。 meat标签的http-equiv属性语法格式是: <metahttp-equiv="参数"content="参数变量值">;其中http-equiv属性主要有以下几种参数: 1、Expires(期限) 说明: 可以用于设定网页的到期时间。 一旦网页过期,必须到服务器上重新传输。 用法: <metahttp-equiv="expires"content="Wed,20Jun200722: 33: 00GMT"> 注意: 必须使用GMT的时间格式。 2、Pragma(cache模式) 说明: 禁止浏览器从本地计算机的缓存中访问页面内容,这样设定,访问者将无 法脱机浏览。 用法: <metahttp-equiv="Pragma"content="no-cache"> 注意: 这样设定,访问者将无法脱机浏览。 3、Refresh(刷新) 说明: 自动刷新并指向新页面。 用法: <metahttp-equiv="Refresh"content="2;URL= 注意: 其中的2是指停留2秒钟后自动刷新到URL网址。 4、Set-Cookie(cookie设定) 说明: 如果网页过期,那么存盘的cookie将被删除。 用法: <metahttp-equiv="Set-Cookie"content="cookievalue=xxx;expires=Wednesday,20-Jun-200722: 33: 00GMT;path=/"> 注意: 必须使用GMT的时间格式。 5、Window-target(显示窗口的设定) 说明: 强制页面在当前窗口以独立页面显示。 用法: <metahttp-equiv="Window-target"content="_top"> 注意: 用来防止别人在框架里调用自己的页面。 6、content-Type(显示字符集的设定) 说明: 设定页面使用的字符集。 用法: <metahttp-equiv="content-Type"content="text/html;charset=gb2312"> 7、Pics-label(网页等级评定) 用法: 说明: 在IE的internet选项中有一项内容设置,可以防止浏览一些受限制的网站,而网站的限制级别就是通过meta属性来设置的。 还有Page_Enter、Page_Exit…… 补充: 设定进入页面时的特殊效果 设定离开页面时的特殊效果 Duration的值为网页动态过渡的时间,单位为秒。 Transition是过渡方式,它的值为0到23,分别对应24种过渡方式。 如下表: 0盒状收缩1盒状放射 2圆形收缩3圆形放射 4由下往上5由上往下 6从左至右7从右至左 8垂直百叶窗9水平百叶窗 10水平格状百叶窗11垂直格状百叶窗 12随意溶解13从左右两端向中间展开 14从中间向左右两端展开15从上下两端向中间展开 16从中间向上下两端展开17从右上角向左下角展开 18从右下角向左上角展开19从左上角向右下角展开 20从左下角向右上角展开21水平线状展开 22垂直线状展开23随机产生一种过渡方式 (1)h1、h2、h3、h4、h5及h6元素的作用是显示标题(这里的h是“标题(heading)”的意思)。 其中h1是一级标题,字体最大;h2是二级标题,字体比一级标题略小;而h6是六级标题,它是最后一级标题,字体也最小。 (2)这句话应显示为粗体。 (3)换行标签: (4) 哇! 这是我的第一个网站。
标签
里的p是“段落(paragraph)”的意思,也就是一个文本段落。
(5)通过用和把文本括起来,把文本设为斜体。
没错,这里的“i”是“斜体(italic)”的意思。
例1:
这句话应显示为斜体
(6)可以用small标签把文本设为小字体:
例2:
这句话应显示为小字体
例3:
既是粗体又是斜体
注意上面的空元素
:
它没有尾标签,并且在首标签名称的后面加了空格和斜杠。
另一个空元素是
,它的作用是画一条水平线。
这里的“hr”是“水平线(horizontalrule)”
的意思。
(7)HTML中的空元素还包括ul、ol和li,这三个元素用于制作列表。
ul代表“无序列表(unorderedlist)”,它的作用是为每个列表项显示一个粗点。
ol代表“有序列表(orderedlist)”,它的作用是显示每个列表项的序号。
用
eg
- 无序列表项1
- 无序列表项2
- 无序列表项1
- 无序列表项2
显示效果如下:
∙无序列表项1
∙无序列表项2
1.无序列表项1
2.无序列表项2
元素的属性:
属性应写在元素的首标签上。
具体写法是:
属性名称(attributename)后紧跟一个等号(“=”),后面写上用双引号括起来的属性值(attributevalue)。
对于style属性的值,可以用分号(“;”)来分隔多个样式指令
#ff0000;">红色背景 #cccccc;">灰色背景 白色: #ffffff 黑色: #000000 十六进制代码由“#”打头,后面跟六位数字或字母。 除此以外,对于一些最常用的颜色(比如白色、黑色、红色、兰色、绿色及黄色等),你还 可以使用它们的英语名称。 例3: red;"> red;">看看是什么背景颜色的标题red 3)bgproperties=fixed bgproperties=fixed使背景图片成水印效果,即图片不随着滚动条的滚动而滚动。 (4)text text属性标志HTML文档的正文文字颜色。 如: text=“#FF6666”。 Text元素定义的颜色将应用于整篇文档。 (5)超级链接颜色 link、vlink、alink分别控制普通超级链接、访问过的超级链接、当前活动超级链接颜色。 (6)leftmargin和topmargin 设置网页主体内容距离网页顶端和左端的距离如: leftmargin="20"topmargin="30“ 网页之间做链接: 做链接也是通过元素(element)实现的。 做链接只需一个元素和一个属性就行了: 例1: 元素a代表“链接(anchor)”;属性href代表“超文本引用(hypertextreference)”,它用于指定链接指向何处——通常是一个因特网地址或者一个文件名。 在上例中,属性href的值为“”,这是网站的完整地址,也被称作URL(统一资源定位符)。 注意,在URL里必须包含“http: //”。 “这是一个指向的链接”是这个链接在浏览器中显示出来的文本。 记得在元素结尾处写上。 如果你要在同一网站的不同网页间做链接,那就不必拼写出网页的完整URL。 举个例子, 假如你有两个网页(比如说page1.htm和page2.htm),而且它们被存放在同一个文件夹中, 那么你在做链接的时候,只要写出文件名就行了。 这样,page1.htm到page2.htm的链接将 如下所示: 例2: 如果page2.htm被放在下一级文件夹中(比如“subfolder”),那么链接将是这样: 例3: 反过来,从page2.htm(在下级文件夹中)到page1.htm的链接将是这样: 例4: 你还可以为e-mail地址做链接,方法跟为网页做链接差不多: 例6: nobody@">给nobody@发电子邮件 与指向网页的链接的唯一区别在于: 指向e-mail地址的链接必须以mailto: 开头,然后紧接 着写e-mail地址。 当点击这个链接的时候,缺省的e-mail程序将新建一封邮件,其中的收 件人地址为链接中指定的e-mail地址。 注意: 这一功能仅当你的计算机安装了e-mail程序 后才起作用。 创建链接总要用到href属性。 另外,你也可以在链接上使用title属性: 例7: title属性用于为该链接输入一个简短描述。 当你把鼠标光标停留在该链接上(别点击它)时,提示文字“上网站学习HTML”便会出现。 网页中嵌入图片: •GIF(GraphicsInterchangeFormat,图形交换格式) •JPG或JPEG(JointPhotographicExpertsGroup,联合图像专家组) •PNG(PortableNetworkGraphics,可移植网络图像) 一般来说,GIF是图形和图画的最佳格式,而JPEG格式则更适合存放照片。 原因有二: 第一,GIF格式只支持256色,而JPEG格式支持数百万色;第二,GIF格式擅长于压缩简单图像,而JPEG则更适于压缩复杂图像。 压缩率越高,图像文件就越小,页面加载速度就越快。 过去,GIF和JPEG是两大主要的图像格式,但是最近PNG格式也开始流行起来(主要是在取代GIF格式)。 PNG格式拥有许多JPEG与GIF的共同优点: 支持数百万色,且压缩效果好。 首先,你可以轻易地把存放在其他文件夹、甚至其他网站的的图片插入到自己的网页中。 例2: 例3: 其次,图片也可以作为链接: 例4: 你总要用src属性来告诉浏览器图片的存放位置。 除此以外,还有一些有用的属性。 alt属性用于给出图像的替用描述,假如由于某些原因该图像未能显示出来,浏览器就通过 显示这个描述来替代图像。 对于有视力障碍的人士来说,或者当网页打开很慢的时候,这一 特性显得尤为重要。 所以说,始终记得写alt属性: 例5: 有些浏览器会在鼠标光标移到图像上时显示出alt属性的文本。 但是,在使用alt属性时请 注意,该属性的目的是为图片提供一个替用描述,有视力障碍的人士会利用alt属性来听取 有关图片的描述,所以不要将该属性用于显示文本提示——那是title属性的功能。 例6: width和height属性分别用于设置图像的宽度和高度,以像素为单位。 像素(pixel)是用于 测量屏幕分辨率的计量单位。 (目前大多数屏幕分辨率是1024×768或更高)。 像素跟公分不 同,像素是一种相对计量单位,一个像素的实际大小跟屏幕分辨率有关。 在高分辨率显示模 式下,差不多25个像素等于1公分;而在低分辨率显示模式下,同样的25个像素大约等于1.5公分。 如果你没有为图像设置宽度和高度,它将按原始尺寸显示。 但是如果设置了的话,你就可以 控制它的显示尺寸: 例8: 但是值得注意的是,虽然可以通过设置高度和宽度来控制图片的显示尺寸,但图片文件的实际大小不会因此而发生变化。 所以,不要指望通过设置图片的宽度和高度来减小图片文件的大小。 相反,你应该在图像编辑程序中来调整图片文件的大小,以加快页面加载速度。 不过width和height属性还是有用的,它们可以在图片被完全下载之前令浏览器知道该用多大的空间来显示图片。 这令浏览器可以更快显示出美观的页面。 用于创建表格的3个基本元素是: •首标签 这是不难理解的。 •tr是“tablerow(表格行)”的缩写,用于表示一行的开始和结束。 这也容易理解。 •td是“tabledata(表格数据)”的缩写,用于表示行中各个单元格(cell)的开始和结 束。 这些都是容易理解的。 直观地讲: 行是横向的单元格,列是从纵向的单元格: 表格有可用的属性吗? 表格当然有属性。 比如属性border用于指定表格四周边框的厚度: 例3: 表格边框的厚度是以象素(pixels)为单位来指定的。 与设定图像的显示宽度类似,象素和屏幕百分比也可以用于设定表格宽度: 例4: 表格有很多属性,比如下面这两个: •align: 指定整个表格、某行或某个单元格里内容的水平对齐方式,比如左对齐、居中或右对齐。 •valign: 指定某个单元格里内容的垂直对齐方式,比如靠上、置中或靠下。 align="center"valign="middle": (1)放在table标签内指表格居中显示。 (2)放在td标签内指数据内容居中显示。 Align: center,left,right Valign: top,middle,bottom html中的caption[标题,说明文字,字幕]: 表格的标题,对表格的简单描述。 表格的高级特性 表格还有哪些相关属性? colspan和rowspan这两个属性用于创建特殊的表格。 colspan是“columnspan(跨列)”的缩写。 colspan属性用在 例1: rowspan是什么? 可能你已经猜到,rowspan的作用是指定单元格纵向跨越的行数。 你可以使用级联样式表(CascadingStyleSheets,简称CSS)为网站设计页面布局。 CSS是HTML的搭档。 在编码过程中,它们发挥不同的作用: HTML负责网页的具体内容 (结构),而CSS则修饰网页的表现形式(布局)。 可以用style属性将CSS内联到网页中。 隶书;font-size: 15px;">pixles: 象素,15px CSS有一个优越的特性,即它可以对页面布局进行集中管理。 也就是说,你不必在每个标 签里都使用style属性;相反,你可以只声明一次,浏览器便会按相应的页面布局效果来显 示文本。 h1{font-size: 30px;font-family: 宋体;} h2{font-size: 15px;font-family: 黑体;} p{background-color: blue;font-size: 40px;font-family=黑体;} 背景图片: url(' 我们在文档的头部(head)插入了CSS,它将应用于整个页面。 要将CSS嵌入文档,你只需通过标签 另一种使用CSS的方法,是将CSS代码单独作为一个文档保存。 通过把CSS文档独立出来,你就可以同时对多个页面的布局进行集中管理。 如果你要对一个大型网站上的大量网页作字体类型或大小的修改,那么这个方法绝对是最佳选择。 CSS除了用于设置颜色与字体等布局之外,还可以控制页面设置与表现形式(边距,漂浮, 对齐,宽度,高度等)。 通过为不同元素设置不同的CSS,你可以令页面布局精密而美观。 例3: 25px;border: 1pxsolidred;">我爱CSS float属性用以定义元素的漂浮方式: 靠左还是靠右。 下例展示了该属性的用法: 例4: left;"/> Loremipsumdolorsitamet,consectetueradipiscingelit, absolute;bottom: 50px;right: 10px;"/> 你可以认为HTML有很多种方言。 这就是为什么某些网站会在不同的浏览器上显示出不同效果的原因。 为了解决这一问题,HTML发明人TimBerners-Lee先生创办了万维网联盟(WorldWideWebConsortium,W3C)来致力于制订通用的HTML标准。 但这是一条漫长而艰难的路程。 因此,只要你遵循W3C标准来编写HTML,你的网页将永远能在所有浏览器上显示出来。 HTML有很多不同种类,所以你需要告诉浏览器,你的HTML使用的是哪种“方言”(比如XHTML)。 具体做法是采用文档类型声明。 文档类型声明应写在HTML文档的开头部分: 例1: DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN" "http: //www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> //www.w3.org/1999/xhtml"lang="en"> 除了要给出文档类型声明以外(上例中第一行,它告诉浏览器这个文档是XHMTL),还需 要在html标签中加入一些信息,也就是添加两个属性xmlns和lang。 xmlns是“XML-Name-Space”(XML名称空间)的缩写,其值固定为 http: //www.w3.org/1999/xhtml。 lang属性用于指定当前文档所使用的语言,其值采用ISO639标准中列出的世界各国语言代码。 你可以用W3C的免费验证器(validator)来检查你的HTML文档是否符合你在文档类型声 明中所指定的类型。 为了测试如何验证文档,请编写一个网页并将它上传到因特网上,现在,打开网页validator.w3.org,在网页里输入你网页的网址(URL),然后验证它。 页面注释标记 --注释内容--> 使用&引出特殊字符,如 ---代表一空格 *在table内,先有行,再有列. * 其它属性: border 如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。 copyright@ 2008-2022 冰点文档网站版权所有 经营许可证编号:鄂ICP备2022015515号-1和尾标签
分别表示一个表格的开始与结束。标签中,用来指定单元格横向跨越的列数: 单元格2 单元格3 单元格4 也可以增加一列,有加粗效果,一般用在标题拦