html基础|笔记 经过1天多的艰苦奋战，终于把html（Hypertext markup language）的基础教程给看完了。 这次为了xml而看了这“古老”的技术，还是有点收获的。。总体来说，虽然不是很熟练，但是看懂一般的html网页源文件已经不是问题了。闲来无事，就写写笔记吧，说说感受也好！ 1总体架构 html给我的感觉是很标准，很有格式的。最主要的代码特点就是标记成对的出现，虽然有些可以省略，但是建议除非太过烦琐还是把前后都加上去吧！作为一个完整的html网页，总是有头部，主体和结尾3大部分，分别用<head></head>,<body></body>和</html>表示。另外，一个重要特性就是可以自定义风格（CSS），这是非常方便的，类似于编程语言的类的功能吧！同时，还可以嵌入其他script来增强其交互功能。而对于相当重要的标记，也只是由头部标识和属性所组成。（<标识 属性1 属性2 属性3...>）看来，学习html是学习其他网页脚本语言的基础吧，同时对于学习可视化网页设计也是有帮助的（这么说应该不过分吧！）！，下面就让我们一起来详细分析各个部分的构成元素。 2常见标记介绍 其实大多数html网页的标记不多，就只有10几个吧！（看到这里，好！）这里主要介绍一下常见的控制文件的外观和布局的标记！ <h>:从<h1>到<h6>所标识的字体依次减小，一般来说，<h1>用来标记文件标题<h2>用来标记一章的标题<h3>用来标记章节的标题，<h6>则是来作为小字印刷，如版权信息等等。 <p>和 <div>:虽然类似于<p>,也可以使用align属性，但是在使用风格表格时功能强大。（风格表格见后） <hr>:可以产生一条水平线，对于组织格式是很有帮助的。 在这里应该说一说逻辑标记和物理标记的差别：物理标记表明信息的外观，而逻辑标记表明信息的语义。从适用范围来说，使用逻辑标记更值得推荐，因为逻辑标记表示的是本质特性，不随浏览器的变化而变化！ 逻辑标记：<cite><dfn><strong><code><ins><del>（注：大家可以自己测试一下，看看有什么效果，其中ins和del是很有用的标记，特别是在多人合作开发的时候，看字面应该知道这两个是干嘛的吧！） 物理标记：<i><t><tt><big><small><sub><sup><strike>（注：大家测试吧，动手最重要◎） 3链接 链接是超文本（Hypertext）格式的重要实现方式，而使用的就是锚（Anchor）（，所以缩写也就是<a>）, 一个典型的锚标记的定义：<a href="目标页面">激活热区</a>（注：href：hypertext reference,就是链接到哪里），现在分情况介绍： 1）外部链接 1。1非本地文件：<a href="">中山大学</a>（这个很明显，不用解释了） 1。2其他形式的非本地资源：<a href="">中山大学</a>（ftp资源） <a href="">我的email</a>（email信息） 1。2本地文件：<a href="另一个网页.html">另一网页？</a>（同一文件夹的，当然也可以给出完整路径咯） <a href="../另一个网页.html">另一网页？</a>（上一级别文件夹的） （注：../表示上一级文件夹，同样../../就表示上上一级） 2）内部链接 什么是内部链接，就是在同一个网页里边的链接！这样做是为了避免网页太大而造成的浏览麻烦！ 步骤：首先要定义一个引用目标锚，然后在另一处定义被锚引用的目标！看例子吧◎ <a herf="#top">top</a>（其中＃top定义了该锚） <a name="top">top</a>（这里就引用了该锚） (注：这种方法最常见的应用就是网页上经常看到的网页最下边的“返回顶部”了) 4图像 使用图像：<img src="图像文件">（注：图像文件路径与链接路径相同）。在这里可以加入提示属性<alt>，如<img src="http://www.webjx.com/htmldata/2005-06-01/图片.gif" alt="图片">（注：看看有什么效果，如果图片不存在，会怎样呢？） 1）对齐方式：缺省是左对齐，可以使用<div align=..>进行更改。 2）高度和宽度：<img src="http://www.webjx.com/htmldata/2005-06-01/图片.gif" height=34mm width=34mm>（注：看明白了吧！不过应该注意的一点是，在ie里边高度和宽度的比例应该与源图相同，不然就显示不了，已在我的机子上测试过了） 3）四周区域和边框：<img src="图像文件" border＝4 hspace=5 vspace=5>（注：很简单吧，测试一下吧！还有，边框默认情况是没有的，但是对于有链接的图来说，有个框框还是很好的） 5列表 1）无序列表：无序，就是没有特别的序号，也就是平等哦。。下面看个例子吧。 <ul><li>内容1<li>内容2<li>内容3</ul>（注：对于ul，可以添加属性type，属性值有disc,square,circle，这样就可以改变序号了◎） 2）有序列表：这个当然就是前面有序号咯。 <ol><li>内容1<li>内容2<li>内容3</ol>（注：对于ol，同样可以添加type属性，属性值可以是1，a，A，i，I，呵呵，自己测试一下。）另外，对于ol，可以从喜欢的序号开始排序，用的属性就是ol的start和li的value了，很明白吧：） 3）列表嵌套：嵌套，类似于树状菜单的东西。可以使用<ul><ul></ul></ul>(ol也一样)类似的格式进行使用。 4）定义列表：主要有dl，dt，dd，分别代表定义标识，头部和内容，使用方法： <dl><dt>头部<dd>定义的内容</dl>（注：dt和dd不需要结束标记） 6表单 1）定义一个form：定义一个form标记，用于确定发送消息的类型和处理方式，其中必须的属性就是action了。<form action="" method="post">（注：method用于说明传送数据的方式，还有get方式，不过现在常用post）。类似的有，<form action="" method="post"> 2)大部分的form都是在<input>中处理的。如下面所示： 请输入名字<input type="text" name="username"><p> 自己可以修改一下属性并进行测试◎ 3）复选框和单选框 <input type="checkbox" name="check1" value="check1">check1 4）下拉菜单和滚动菜单 <select> 7帧结构 什么是帧结构，就是在一个完整网页里边分页，当一个页的url发生变化，其他的可以不变：）使用帧结构可以使得网页更加多变，内容更加丰富，不过也会带来一定的麻烦，因为它打乱了原来的基本操作规则。 如何建立一个帧结构？如下面的例子所示。 <html>///注意：没有body的哦。。 注：另外，如果在帧窗口中加入<a herf="新网页" target="_top">这样的话，当激活这个链接的时候，就清除了当前的帧结构，用新页代替，可以自己测试一下。 8表格 如何建立一个表格呢？ <table border=20 cellspacing=20 cellpadding=20> //大家可以测试一下，这3个分别表示的是什么。。其中border表示边框，如果不设置，那么显示的表格就没有边框。而cellsapcing是格间线宽度，cellpadding是内边框！ 注：还可以进行跨行和跨列的设置，用的是colspan和rowspan（看意思就知道了：））如： <th rowsspan=4>数据内容</th> 9CSS 什么是CSS：就是层叠式风格列表，类似于网页格式的模板，也相当于编程里边的类一样，定义了自己的风格，标记着属性的值（或许比喻不怎么恰当，就原谅一下咯。）下面给出一个完整的例子，大家注意看释: <html> 注：由于css功能强大，所以只是简单写了写，以后有机会再专门写写
:基本类似于回车键的功能，而<p>可以插入空格，同时也可以附带属性，如<p align=right>效果<p>（缺省情况是左对齐，左对齐很多排列方式的缺省情况）
请输入口令<input type="password" name="pword"><p>
请提出宝贵意见<textarea name="comment" rows=3 cols=20 >
</textarea><p>
<input type="submit" value="Submit form">
<input type="reset" value="Clear data">
<input type="checkbox" name="check2" checked value="check2">check2
<input type="checkbox" name="check3" checked value="check3">check3<p>（这是复选框）
<input type="radio" name="radio1" value="radio1">radio1
<input type="radio" name="radio2" checked value="radio2">radio2
<input type="radio" name="radio3" value="radio3">radio3<p>（这是单选框）
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select><p>（下拉菜单）
<select multiple size=5 name="1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select><p>（滚动菜单，就是比下拉菜单多了个multiple属性和name属性，而size属性是可有可无）
<head>
<title>帧结构</title>
</head>
<frameset rows="50%,*" cols="50%,*">//定义了网页的分页结构，包括了行数和列数
<frame src="doc1.html">//引用网页的基本写法
<frameset rows="40%,50%">//定义了一个嵌套的帧
<frame src="doc2.html">
<frame src="doc3.html" scrolling="yes">//scrooling表示是否带有滚动条
</frameset>
<frame src="doc4.html" frameborder="0">//frameborder表示边框格式，1表示缺省，0表示无
<frame src="doc5.html" noresize>//noresize使得帧窗口的大小不可移动！
</frameset>
</html>
<caption align=center>数据</caption>
<tr>
<th>数据1</th><th>数据2</th>//标题，可以使用align属性进行设置其出现的位置
</tr>
<tr>
<td>一些数据</td><td>还有数据</td>//数据，可以使用align和valign对其上下左右的位置进行设置
</tr>
<tr>
<td>更多数据</td><td>最后数据</td>//还可以对其bgcolor属性进行设置数据的颜色
</tr>
</table>
<head>
<title>CSS</title>
<style type="text/css">//用style标记，而且是在head里边定义的
h1{font-style:italic}
h2{text-style:right}
h3{font-family:arial}
h4{font-style:italic}
div{color:blue}// 定义形式：标记选择器{属性1：值1；属性2：值2；属性3：值3；......}
div code{color:red}//上下文：如果在网页中，<code>定义在<div>里边，那么就套用格式，如果没有，就不
h5,h6{color:orange}//一次多个选择器
p.aside{font-family:arial;font-style:italic}//定义了一个类,可以给文件中独立的块进行设置风格。
.arial{font-family:arial}//定义了通用类，使用方法与类相同
a:link{color:green}
a:active{color:blue;font-size:150%}
a:visite{color:red}//定义了伪类，所谓伪类，就是用于与用户交互操作有关的属性，如超链接等等。
</style>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<div>用<strong><em>蓝色</em></strong>文字</div>
<div>是<code>红色</code>吗？</div>
<code>是红色吗？</code>
<h5>orange</h5>
<h6>orange</h6>
<p class=aside>爱逛街的老鼠？？</p> //这就是类的使用方法，调用了class
</body>
</html>
HTML基础学习笔记
80酷酷网 80kuku.com
