HTML基础学习笔记.doc

1、 HTML 基础学习笔记经过 1 天多的艰苦奋战，终于把 html（Hypertext markup language）的基础教程给看完了。这次为了 xml而看了这“古老” 的技术，还是有点收获的。 。总体来说，虽然不是很熟练，但是看懂一般的 html 网页源文件已经不是问题了。闲来无事，就写写笔记吧，说说感受也好！1 总体架构 html 给我的感觉是很标准，很有格式的。最主要的代码特点就是标记成对的出现，虽然有些可以省略，但是建议除非太过烦琐还是把前后都加上去吧！作为一个完整的 html 网页，总是有头部，主体和结尾 3 大部分，分别用,和表示。另外，一个重要特性就是可以自定义风格（CSS）

2、 ，这是非常方便的，类似于编程语言的类的功能吧！同时，还可以嵌入其他 script 来增强其交互功能。而对于相当重要的标记，也只是由头部标识和属性所组成。 （）看来，学习 html 是学习其他网页脚本语言的基础吧，同时对于学习可视化网页设计也是有帮助的（这么说应该不过分吧！）！，下面就让我们一起来详细分析各个部分的构成元素。2 常见标记介绍其实大多数 html 网页的标记不多，就只有 10 几个吧！（看到这里，好！）这里主要介绍一下常见的控制文件的外观和布局的标记！:从到所标识的字体依次减小，一般来说，用来标记文件标题用来标记一章的标题用来标记章节的标题，则是来作为小字印刷，如版权信息等等。和

3、:基本类似于回车键的功能，而可以插入空格，同时也可以附带属性，如效果（缺省情况是左对齐，左对齐很多排列方式的缺省情况）:虽然类似于,也可以使用 align属性，但是在使用风格表格时功能强大。 （风格表格见后）:可以产生一条水平线，对于组织格式是很有帮助的。在这里应该说一说逻辑标记和物理标记的差别：物理标记表明信息的外观，而逻辑标记表明信息的语义。从适用范围来说，使用逻辑标记更值得推荐，因为逻辑标记表示的是本质特性，不随浏览器的变化而变化！逻辑标记：（注：大家可以自己测试一下，看看有什么效果，其中 ins 和 del 是很有用的标记，特别是在多人合作开发的时候，看字面应该知道这两个是干嘛的吧！）

4、物理标记：（注：大家测试吧，动手最重要）3 链接链接是超文本（Hypertext）格式的重要实现方式，而使用的就是锚（Anchor ） （，所以缩写也就是）,一个典型的锚标记的定义：激活热区（注：href ：hypertext reference,就是链接到哪里） ，现在分情况介绍：1）外部链接 1。1 非本地文件：http:/“中山大学（这个很明显，不用解释了）1。2 其他形式的非本地资源：ftp:/“中山大学（ftp 资源） mailto:“我的 email（email 信息）1。2 本地文件：另一网页？（同一文件夹的，当然也可以给出完整路径咯） 另一网页？（上一级别文件夹的） （注：./

5、表示上一级文件夹，同样././就表示上上一级）2）内部链接什么是内部链接，就是在同一个网页里边的链接！这样做是为了避免网页太大而造成的浏览麻烦！步骤：首先要定义一个引用目标锚，然后在另一处定义被锚引用的目标！看例子吧top（其中top 定义了该锚）top（这里就引用了该锚）( 注：这种方法最常见的应用就是网页上经常看到的网页最下边的“返回顶部”了)4 图像使用图像：（注：图像文件路径与链接路径相同） 。在这里可以加入提示属性，如（注：看看有什么效果，如果图片不存在，会怎样呢？）1）对齐方式：缺省是左对齐，可以使用进行更改。2）高度和宽度：（注：看明白了吧！不过应该注意的一点是，在 ie 里边高

6、度和宽度的比例应该与源图相同，不然就显示不了，已在我的机子上测试过了）3）四周区域和边框：（注：很简单吧，测试一下吧！还有，边框默认情况是没有的，但是对于有链接的图来说，有个框框还是很好的）5 列表 1）无序列表：无序，就是没有特别的序号，也就是平等哦。 。下面看个例子吧。 内容1 内容 2 内容 3（注：对于 ul，可以添加属性 type，属性值有 disc,square,circle，这样就可以改变序号了）2）有序列表：这个当然就是前面有序号咯。内容 1 内容 2 内容 3（注：对于 ol，同样可以添加type 属性，属性值可以是 1，a，A ，i，I，呵呵，自己测试一下。 ）另外，对于

7、ol，可以从喜欢的序号开始排序，用的属性就是 ol 的 start 和 li 的 value 了，很明白吧：） 3）列表嵌套：嵌套，类似于树状菜单的东西。可以使用(ol 也一样)类似的格式进行使用。 4）定义列表：主要有 dl，dt，dd，分别代表定义标识，头部和内容，使用方法：头部定义的内容 （注：dt 和 dd 不需要结束标记）6 表单 1）定义一个form：定义一个 form 标记，用于确定发送消息的类型和处理方式，其中必须的属性就是 action 了。（注：method 用于说明传送数据的方式，还有 get 方式，不过现在常用 post） 。类似的有， 2)大部分的 form 都是在中

8、处理的。如下面所示： 请输入名字请输入口令请提出宝贵意见自己可以修改一下属性并进行测试3）复选框和单选框 check1check2check3（这是复选框）radio1radio2radio3（这是单选框）4）下拉菜单和滚动菜单 12345（下拉菜单）12345（滚动菜单，就是比下拉菜单多了个 multiple 属性和 name 属性，而 size 属性是可有可无）7帧结构什么是帧结构，就是在一个完整网页里边分页，当一个页的 url 发生变化，其他的可以不变：）使用帧结构可以使得网页更加多变，内容更加丰富，不过也会带来一定的麻烦，因为它打乱了原来的基本操作规则。如何建立一个帧结构？如下面的例子

9、所示。/注意：没有 body 的哦。 。帧结构 /定义了网页的分页结构，包括了行数和列数/引用网页的基本写法/定义了一个嵌套的帧/scrooling 表示是否带有滚动条/frameborder 表示边框格式， 1 表示缺省，0 表示无/noresize 使得帧窗口的大小不可移动！注：另外，如果在帧窗口中加入这样的话，当激活这个链接的时候，就清除了当前的帧结构，用新页代替，可以自己测试一下。8 表格如何建立一个表格呢？ /大家可以测试一下，这 3 个分别表示的是什么。 。其中 border 表示边框，如果不设置，那么显示的表格就没有边框。而 cellsapcing 是格间线宽度，cellpadd

10、ing 是内边框！数据数据 1数据 2/标题，可以使用 align 属性进行设置其出现的位置一些数据还有数据/数据，可以使用 align 和 valign 对其上下左右的位置进行设置更多数据最后数据/还可以对其 bgcolor 属性进行设置数据的颜色注：还可以进行跨行和跨列的设置，用的是 colspan 和 rowspan（看意思就知道了：） ）如： 数据内容9CSS 什么是 CSS：就是层叠式风格列表，类似于网页格式的模板，也相当于编程里边的类一样，定义了自己的风格，标记着属性的值（或许比喻不怎么恰当，就原谅一下咯。 ）下面给出一个完整的例子，大家注意看释: CSS/用 style 标记，而

11、且是在 head 里边定义的h1font-style:italich2text-style:righth3font-family:arialh4font-style:italicdivcolor:blue/ 定义形式：标记选择器 属性 1：值 1；属性 2：值 2；属性 3：值 3；.div codecolor:red/上下文：如果在网页中，定义在里边，那么就套用格式，如果没有，就不h5,h6color:orange/一次多个选择器p.asidefont-family:arial;font-style:italic/定义了一个类,可以给文件中独立的块进行设置风格。.arialfont-family:arial/定义了通用类，使用方法与类相同a:linkcolor:greena:activecolor:blue;font-size:150%a:visitecolor:red/定义了伪类，所谓伪类，就是用于与用户交互操作有关的属性，如超链接等等。标题 1标题 2标题 3标题 4用 蓝色文字是红色吗？是红色吗？orangeorange爱逛街的老鼠？ /这就是类的使用方法，调用了 class注：由于 css 功能强大，所以只是简单写了写，以后有机会再专门写写