《html学习笔记汇总》由会员分享，可在线阅读，更多相关《html学习笔记汇总（11页珍藏版）》请在金锄头文库上搜索。
1、Html 学习笔记汇总：1.简介HTML 是“HyperText Mark-up Language（超文本标记语言） ”的缩写。XHTML（可扩展超文本标记语言）2.主要语法及常用元素属性A. 标签中的字母应该大写还是小写？大多数浏览器不介意标签是大写还是小写，或者混合大小写。所以、或在浏览器上的显示效果都一样。但是，正确的写法是采用小写字母来书写标签。所以，要养成用小写字母书写标签的习惯。B. HTML 文档有两个部分：头部（head）和主体（body） 。你在头部（head）提供关于网页的信息，你在主体（body）部分提供网页的具体内容。C. 如果你要指定 HTML 文档的网页标题（tit
2、le） （它将显示在浏览器窗口顶部） ，你就要在头部（head）提供有关信息。用 title 元素来指定网页标题：即在首标签 与尾标签之间写上网页标题：Eg. 我的第一个网站 网页标题（title）尤其重要，因为搜索引擎（比如 Google ）要用它来索引网页，并显示在搜索结果里。提示：好的设置与描述可以提高页面在搜索引擎的排名.信息标记：Meta 标签基本语法:使用 meta 设置页面列表：搜索设置关键字设置页面编码设置（utf-8）页面描述设置作者设置Eg.AceBaseData:企业信息化系统Meta 的 http-equiv 属性详解顾名思义，相当于 http 的文件头作用，它可以向浏
3、览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为 content，content 中的内容其实就是各个参数的变量值。meat 标签的 http-equiv 属性语法格式是：meta http-equiv=参数 content=参数变量值 ；其中 http-equiv 属性主要有以下几种参数：1、Expires(期限)说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。用法：meta http-equiv=expires content=Wed, 20 Jun 2007 22:33:00 GMT注意：必须使用 GMT 的时间格式。2、Pragma(c
4、ache 模式)说明：禁止浏览器从本地计算机的缓存中访问页面内容,这样设定，访问者将无法脱机浏览。 用法：meta http-equiv=Pragma content=no-cache注意：这样设定，访问者将无法脱机浏览。3、Refresh(刷新)说明：自动刷新并指向新页面。用法：meta http-equiv=Refresh content=2；URL=http:/ 2 是指停留 2 秒钟后自动刷新到 URL 网址。4、Set-Cookie(cookie 设定)说明：如果网页过期，那么存盘的 cookie 将被删除。用法：meta http-equiv=Set-Cookie content=
5、cookievalue=xxx; expires=Wednesday, 20-Jun-2007 22:33:00 GMT； path=/注意：必须使用 GMT 的时间格式。5、Window-target(显示窗口的设定)说明：强制页面在当前窗口以独立页面显示。用法：meta http-equiv=Window-target content=_top注意：用来防止别人在框架里调用自己的页面。6、content-Type(显示字符集的设定 )说明：设定页面使用的字符集。用法：meta http-equiv=content-Type content=text/html; charset=gb2312
6、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
7、水平格状百叶窗 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）
8、这句话应显示为粗体。（3）换行标签：（4） 哇！这是我的第一个网站。标签 里的 p 是“段落（paragraph） ”的意思，也就是一个文本段落。（5）通过用和把文本括起来，把文本设为斜体。没错，这里的“i ”是“斜体（italic） ”的意思。例 1：这句话应显示为斜体（6）可以用 small 标签把文本设为小字体：例 2：这句话应显示为小字体例 3：既是粗体又是斜体 注意上面的空元素 ：它没有尾标签，并且在首标签名称的后面加了空格和斜杠。另一个空元素是，它的作用是画一条水平线。这里的“hr ”是“水平线（horizontal rule） ”的意思。（7）HTML 中的空元素还包括 ul、o
9、l 和 li，这三个元素用于制作列表。ul 代表“无序列表（unordered list） ”，它的作用是为每个列表项显示一个粗点。ol 代表“有序列表（ordered list） ”，它的作用是显示每个列表项的序号。用 元素把多个列表项组织为一个列表，其中的 li 代表“列表项（list item） 。eg无序列表项 1无序列表项 2无序列表项 1无序列表项 2显示效果如下: 无序列表项 1 无序列表项 2 1. 无序列表项 1 2. 无序列表项 2元素的属性：属性应写在元素的首标签上。具体写法是：属性名称（attribute name）后紧跟一个等号（“=” ） ，后面写上用双引号括起来的
10、属性值（attribute value ） 。对于 style 属性的值，可以用分号（“;” ）来分隔多个样式指令红色背景灰色背景白色： #ffffff黑色： #000000十六进制代码由“#”打头，后面跟六位数字或字母。除此以外，对于一些最常用的颜色（比如白色、黑色、红色、兰色、绿色及黄色等） ，你还可以使用它们的英语名称。例 3：看看是什么背景颜色的标题 red3)bgproperties=fixedbgproperties=fixed 使背景图片成水印效果，即图片不随着滚动条的滚动而滚动。(4)texttext 属性标志 HTML 文档的正文文字颜色。如：text=“#FF6666”。T
11、ext 元素定义的颜色将应用于整篇文档。(5)超级链接颜色link、vlink、alink 分别控制普通超级链接、访问过的超级链接、当前活动超级链接颜色。(6) leftmargin 和 topmargin设置网页主体内容距离网页顶端和左端的距离如：leftmargin=20 topmargin=30“网页之间做链接：做链接也是通过元素（element）实现的。做链接只需一个元素和一个属性就行了：例 1：这是一个指向 的链接元素 a 代表“链接（anchor） ”；属性 href 代表“超文本引用（hypertext reference） ”，它用于指定链接指向何处通常是一个因特网地址或者一
12、个文件名。在上例中，属性 href 的值为“http:/” ，这是 网站的完整地址，也被称作 URL（统一资源定位符） 。注意，在 URL 里必须包含“http:/” 。 “这是一个指向 的链接”是这个链接在浏览器中显示出来的文本。记得在元素结尾处写上 。如果你要在同一网站的不同网页间做链接，那就不必拼写出网页的完整 URL。举个例子，假如你有两个网页（比如说 page1.htm 和 page2.htm） ，而且它们被存放在同一个文件夹中，那么你在做链接的时候，只要写出文件名就行了。这样，page1.htm 到 page2.htm 的链接将如下所示：例 2：点击这里转到第 2 页如果 pa
13、ge2.htm 被放在下一级文件夹中（比如“subfolder” ） ，那么链接将是这样：例 3：点击这里转到第 2 页反过来，从 page2.htm（在下级文件夹中）到 page1.htm 的链接将是这样：例 4：转到第 1 页你还可以为 e-mail 地址做链接，方法跟为网页做链接差不多：例 6：给 发电子邮件与指向网页的链接的唯一区别在于：指向 e-mail 地址的链接必须以 mailto:开头，然后紧接着写 e-mail 地址。当点击这个链接的时候，缺省的 e-mail 程序将新建一封邮件，其中的收件人地址为链接中指定的 e-mail 地址。注意：这一功能仅当你的计算机安装了 e-m
14、ail 程序后才起作用。创建链接总要用到 href 属性。另外，你也可以在链接上使用 title 属性：例 7：title 属性用于为该链接输入一个简短描述。当你把鼠标光标停留在该链接上（别点击它）时，提示文字“上 网站学习 HTML”便会出现。网页中嵌入图片： GIF（Graphics Interchange Format，图形交换格式） JPG 或JPEG（Joint Photographic Experts Group，联合图像专家组） PNG（Portable Network Graphics ，可移植网络图像）一般来说，GIF 是图形和图画的最佳格式，而 JPEG 格式则更适合存放
15、照片。原因有二：第一，GIF 格式只支持 256 色，而 JPEG 格式支持数百万色；第二，GIF 格式擅长于压缩简单图像，而 JPEG 则更适于压缩复杂图像。压缩率越高，图像文件就越小，页面加载速度就越快。过去，GIF 和 JPEG 是两大主要的图像格式，但是最近 PNG 格式也开始流行起来（主要是在取代 GIF 格式） 。PNG 格式拥有许多 JPEG 与 GIF 的共同优点：支持数百万色，且压缩效果好。首先，你可以轻易地把存放在其他文件夹、甚至其他网站的的图片插入到自己的网页中。例 2：例 3：其次，图片也可以作为链接：例 4：你总要用 src 属性来告诉浏览器图片的存放位置。除此以外，还有一些有用的属性。alt 属性用于给出图像的替用描述，假如由于某些原因该图像未能显示出来，浏览器就通过显示这个描述来替代图像。对于有视力障碍的人士来说，或者当网页打开很慢的时候，这一特性显得尤为重要。所以说，始终记得写 alt 属性：例 5：有些浏览器会在鼠标光标移到图像上时显示
