HTML学习笔记

来源：互联网发布：程序员逛的网站编辑：程序博客网时间：2024/05/21 22:33

HTML的网络术语：

* 网页 ：由各种标记组成的一个页面就叫网页 .* 主页(首页) : 一个网站的起始页面或者导航页面 .* 标记:<p>称为开始标记  </p>称为结束标记. 也叫标签.每个标签都规定好了特殊的含义。* 元素：<p>内容</p> 称为元素.* 属性： 给每一个标签所做的辅助信息。* xhtml： 符合XML语法标准的HTML。* dhtml：dynamic,动态的。javascript + css + html 合起来的页面就是一个dhtml* http：协议标准。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP 邮件传输协议,ftp:文件传输协议.

HTML的编辑工具：

* notepad 记事本* editplus : 语法高亮显示* 技巧： 根据颜色判断单词是否出错。 （不是100%）* ultraedit : 根据颜色判断单词是否出错,可以显示2进制数据.* dw(dreamweaver,专业工具)  代码提示.

HTML的规范：

* HTML是一个弱势语言* html 不区分大小写* html页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)* html 的结构    1)声明部分。主要作用是用来告诉浏览器这个页面使用的是那个标准。<!doctype html>是HTML5标准。    2)head部分： 不会显示在页面上。作用是告诉浏览器一些页面的额外信息。    3)body部分：我们缩写的代码必须放在此标签內。

HTML的各种标签：

明确：每个标签都有私有属性。也都有公有属性。
html中表示长度的单位都是像素。HTML只有一种单位就是像素。
body:

bgcolor: 背景颜色background:背景图片text: 文本颜色1.排版标签  所有的浏览器默认情况下都会忽略空格和空行P：p代表一个段落    属性： align:对齐方式. 取值：left,right,center<br>代表是换行。hr:    color: 线的颜色    size : 线的粗细    width: 线的长短            两种写法： 1) 绝对值  eg: 500                       2) 相对值： 50%    noshade: 不要阴影    align: 对齐方式 取值： left,right,centercenter: 内容居中pre: 预定义格式标签 .告诉浏览器不要忽略空格和空行div: 块级标签  必须单独占据一行       属性： align :span: 块级标签 不换行字体标记    2 字体标签h1...h6:定义字体大小    属性： align :居中font:    color:字体颜色        颜色的写法有3种： 1)英文单词: red                           2)十六进制：#00ffcc                          3)RGB(三原色) : new RGB(124,156,23)    size:字体大小    face：字体类型特殊字符： &lt;小于 &gt;大于 &amp; &符号 &quot; 双引号&apos;单引号               &copy; 版权 &trade;商标 &nbsp;空格               扩展：&#32464; b: 加粗strong: 加粗i:斜体em: 斜体u: 下划线s: 中划线(删除线)sup: 上标sub: 下标.    3.图像标记  img: 代表是一副图片   属性： src : 图片的路径                两种写法：a) : 相对路径 路径是相对页面所在的路径 两个标记.和.. ,分表代表当前目录和父路径                          b) ：绝对路径                                    1) : 以盘符开始的路径                                        eg: C:\Documents and Settings\Administrator\桌面\day01_html\上课示例/images/1.jpg                                    2) : 网络路径                                        eg: http://www.baidu.com/images         width: 宽度         height：高度         Alt：当图片显示不出来的时候代替图片显示的内容         title： 提示性文本         border: 边框热点： 就是特定的位置添加超链。

 <img src="images/1.jpg" width="300" height="300" usemap="#Map" border="0" />                    <map name="Map" id="Map">                        <area shape="circle" coords="122,81,38" href="demo_字体标签.html" />                    </map>

4.清单标记    列表标签：3种        a.无序列表ul            属性：type : 值： disc(默认，实心原点),square(实心方点),circle(空心圆)        b.有序列表(OL)            属性: type:取值：1(阿拉伯数字，默认),a,A,i,I                  start: 从几开始        c.定义列表(dl)             dt: 列表项的标题             dd: 列表项5.超链接       3种超链接:        1. 连接到其他页面        2. 锚: 指给超链接起一个名字，作用是连接到本页面或者其他页面的特定位置。使用name属性给超链起名字        3. 连接到邮件: <a href = "mailto:xugang@itcast.cn">进入我的邮箱</a>            属性：target: 告诉浏览器怎么显示目标页面                     HTML中已定义4个值： _self :在同一个浏览器中显示                                        _blank: 打开新的浏览器显示                                        _parent: 在父窗口中显示                                        _top: 在顶级窗口中显示6.表格标记table: 表格      属性：border:边框            width:宽度            height：高度            align:表格的对齐方式            cellpadding:单元格内容到边的距离            cellspacing:单元格和单元格之间的距离            bgcolor:背景颜色            background:背景图片            bordercolorlight:表格的上，左边框，以及单元格的右，下边框的颜色            bordercolordark: 表格的右，下边框，以及单元格上，左的边框的颜色            dir:单元格内容的排列方式 取值：ltr 从左到右， rtl:从右到左    tr: 行      属性：dir:            bgcolor:    td: 单元格      属性： align: 内容的横向对齐方式             valign: 内容的纵向对齐方式 top,middle,bottom             width: 绝对值或者相对值(%)             height:单元格的高度    单元格的合并：          单元格的属性：              colspan: 横向合并              rowspan: 纵向合并     th: 相当于<td> + <b>        属性同<td>    caption: 表格的标题       属性：align: 取值：left,center,right,top,bottom    thead    tbody    tfoot       写与不写的区别：                1. 当表格非常大的时候，如果不写，则必须等表格的内容全部下载完成才能显示。但是用tbody标签的话，那么边下载边显示。                                2. 如果不写thead,tbody,tfoot那么浏览器解析表格内容的时候是从上到下解析。如果写了，那么顺序任意，浏览器解析的时候还是按照thead,tbody,tfoot的顺序显示内容7.框架标记及<iframe>    框架页面上不允许有body标签    frameset: 框架的集合        rows: 纵向分部框架.         cols: 横向分部框架.              写法有两种: 1) 绝对值  "200,*" ,*代表剩余的                          2) 相对值  "30%,*"    frame: 框架. 一个框架显示一个页面        scrolling: 是否需要滚动条。默认是true        noresize : 固定框架大小        bordercolor: 给框架边框起一个颜色        name : 给框架起一个名字            内嵌框架： 嵌入在一个页面上的框架.(仅仅IE支持)            iframe:                属性： width: 宽度                       height： 高度                       scrolling : 是否需要滚动条8.表单标记及语义化9.多媒体标记    bgsound: 背景音乐     embed: 播放多媒体文件.    marquee: 移动        属性：direction 移动目标方向 left,right ,up,down ,up，down移动距离是固定的200px              behavior: 行为方式 取值：slide,alternate,scroll              scrollamount : 移动速度              loop: 循环多少圈。负值表示无限循环              scrolldelay: 移动一次休息多长时间。单位是毫秒

0 0