由于这大二的第二学期就要开始学网页设计和web程序开发了，于是我定了寒假的目标计划要学习HTML和JSP。2月初时，我大概花了4天左右 的时间在www.w3school.com上把HTML的基础教程看完了，这是为了学WEB开发打下基础，终究是有些收获的。当初跟着w3school的 教程作了满满的几页纸的笔记，记住了一些基本元素和标签的用法，又跟着把教程上的实例亲自动手打了一遍，虽然对HTML的某些元素还不是很懂 （如<div>元素、<meta>元素、<script>的使用,name属性与id属性的具体区别和使用，等）， 但如今看懂简单的html网页源文件不成问题。学完HTML有一段时间了，没有及时地进行复习，导致现在想做学习总结时明显感觉对之前的 学的一些元素和基本标签有些生疏了，果然是该学完就该做一下学习总结的。下面想对我学过的HTML基础知识进行一下整理并进行一下记忆，顺便谈谈学完的感 受。
HTML（Hyper Text Markup Language）,超文本标记语言，文件的后缀名一般是：.htm , .html。这种语言给我的感觉是一种格式标准规范的语言，不过与XHTML语言相比，它又有些不足之处，因为有些HTML代码即使没有遵守HTML的语言规则，仍然可以很好地工作，这就导致了运行在移动电话和手持设备上的某些浏览器，没法解释这些糟糕的标记语言。
HTML最大的代码特点是HTML的标签都是使用“<”和“>”这对尖括号进行声明，且除了一些标签是单独出现的，其它几乎都是成对的出现 的，比如<html>和</html>，<body>和</body>。成对出现的标签包括 开始标签 和 结束标签，基本格式如：<开始标签> 内容 </结束标签>（注：在成对出现的标签中，所有的开始标签都必须有结束标签相对应，不要忘记结束标签。）。而单独出现的标签是指 在开始标签和结束标签间没有内容的标签，基本格式如：<标签/>；没有内容的HTML被称为空元素，空元素的标签便是单独出现的，它是在开始标签中关闭的，如定义换行的标签<br>,图像标签<img>等是没有关闭的空元素。
一个完整的HTML网页，从内容上分，有头部，主体两部分；从结构上分，主要可划分为3个部分，3个主要标签:
<html>标签：定义整个HTML文档是一个网页文件
<head>标签：用于描述网页的头部信息。像在head部分添加<title>标签，就会在浏览器的标题栏中显示<title>标签所定义的文档的标题
<body>标签：定义整个文档的主体，用于描述要显示的内容信息
示例代码如下：
<html>
<head> <title>我的第一个HTML页面</title> </head> <body> 大家好，我是beckljm！ </body> </html>
效果图如下：
<head>作为HTML文档的头部标签, 在浏览器窗口中，头部信息不被显示在正文中,但我们在此标签中可以插入其它标记, 用以说明文件的标题和整个文件的一些公共属性。
例如，<title>和</title>标签是嵌套在<HEAD>头部标签中的，标签之间的文本是文档标题
在其它标签中，我们有时也会插入其它标记来说明HTML元素一些附加信息，即属性，格式如：<标签名字 属性1 属性2 属性 3 … >内容</标签名字>
一般的原则是，大多数属性值不用加双引号。但是包括空格、％号，＃号等特殊字符的属性值必须加入双引号。为了养成好的习惯，我们还是提倡书写时对全部属性值加双引号。如：
<font color="bule" face="宋体" size="24">字体设置</font>
下面主要介绍一些常见的基本的HTML标签及属性。
（1）HTML标题 通过<h1>~<h6> 等标签定义 。如<hn align="参数">标题内容</hn> (n:1~6).
<h1 align="center">大家好，我是beckljm</h1>
从h1到h6所标识的字体依次减小字号，<h1>是最大最粗的标题，... ，<h6>是最小最细的标题文字，所以一般<h1>用来标记文件标题，<h2>用来标记一章的标 题，<h3>用来标记章节的标题，<h6>则用来作为小字印刷，如版权信息等。
在这里，align属性用于设置标题的对齐方式，其参数为 left（左），center（中)， right (右）。<hn>标签本身具有换行的作用，标题总是从新的一行开始。
另外，控制字体大小的还有一个标签--文字格式控制标签<font>，<font>标签可用于控制文字的字体，大小和颜色
（2）HTML段落 通过<p>标签进行定义。例：
<p>This is a paragrath.</p> <p>This is a another paragrath. </p>
<p>也可以附带属性，如align属性，缺省情况是文字左对齐
（3）HTML图像 通过<img>标签定义。
<img>的格式及一般属性设定： <img src="url" width="参数" height="参数" hspace="参数" vspace="参数" border="参数" align="参数" alt="替代文本" />
①源属性 src →图像的URL地址
②替换文本属性 alt → 为图像定义一串预备的可替换的文本，当浏览器无法载入图像是，将显示这个替代性文本，告知读者丢失的信息
③width/height属性：设定图片的宽度和高度
④hspace/vspace属性：设定上下左右空白位置
⑤border属性：设定边框大小
⑥align：设定对齐方式
【图像的对齐：
- 单独占一行时，放在段落<p></p>中，用<p>的对齐属性进行设置。
- 与文本在同一行时，用其自身的 align 属性（top,middle,bottom）设置图像与文本的垂直对齐。bottom为默认的对齐方式。
- 图文混排时，可实现图像的左、右环绕文本，用 align 属性（left 图像浮动在文本左侧,right图像浮动在文本右侧）。
】
注：背景图像的设定 的格式：<body background= "image-url">【gif 和 jpg 文件均可用作HTML背景，若图像小于页面，图像会重复】
（4）HTML链接 通过<a>标签进行定义。超链接的实现使用的就是锚（Anchor，缩写即为 a).
HTML链接语法：<a href="url 目标页面"> Link text </a> (注：href：hypertext reference，超文本引用，就是指链接到哪里，指向另一个文档)
链接目标分以下几种情况：
1）外部
- 非本地文件：
<a href="www.google.com"> This is a Link.</a> - 其他形式的非本地资源：<a href="ftp://.....">This is ftp</a>(ftp资源)<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a> （email）
- 本地文件：<a href="文件的绝对路径">This is a Link.</a> （若在同一文件夹内则不需给出完整路径）
<a href="E:\w3school\test1.htm">This is a Link.</a>
→→
2）内部
内部即是指在同一个网页里边的文档，这样做是为了避免网页太大而造成的浏览麻烦。
步骤：①在HTML文档中定义一个引用目标锚
②在同一个文档中或者在其他页面中创建指向该锚的链接,即定义被该锚引用的目标
例子：
<a href="E:\w3school\test1.htm#tips">有用的提示</a> 【其中 “tips” 定义了该锚】
<a name="tips">我是有用的提示</a> 【这里对锚进行命名，定义了被该锚引用的目标
（5）HTML表格 通过<table>，<th>，<tr>，<td>等标签来定义完成。
<table> -- 定义一个表格
<tr> ----- 表格行的设定
<th>,<td>--单元格的设定【<th>设定表头，<tr>设定表格的列，这两个标签必须嵌套在<tr>标签内。成对出现】
<caption>--设定表格的标题
一般属性：
<table>的一般属性：<table border="1" align="center" width="100/80%" >
border属性：设定表格边框的宽度，默认值为 0 ，即无边框
align属性：设定表格对齐方式（left，right，center），默认为左对齐
width属性：设定表格的宽度(具体数值或是百分比)
bgcolor属性：设定表格的背景颜色
background属性：设定表格的背景图像
bordercolor属性：设定表格边框的颜色
<tr>的一般属性：<tr align="left" valign="middle" bgcolor="blue" >
align属性：设定单元格内文字水平方向对齐方式，默认为左对齐
valign属性：设定单元格内文字竖直方向对齐方式，默认为居中，可不设置
bgcolor属性：设定单元格的背景颜色
background属性：设定单元格的背景图像
示例如下：
<html>
<head> <title>我的第一个HTML页面</title> </head> <body> <table border="1" > <caption>我的标题</caption> <tr> <th>姓名</th> <th>电话</th> </tr> <tr> <td>Bill</td> <td>123</td> </tr> </table> </body> </html>
（6）HTML列表
①无序列表：由<ul>标签定义，每个列表项始于<li>标签
<li>的type属性：disc--实心圆 ●（默认值） circle--空心圆 ○ square--小方块 ■
示例：
<ul> <li type="disc">coffee</li> <li type="circle">milk</li> <li type="square">cola</li> </ul>
②有序列表：由<ol>标签定义，每个列表项始于<li>标签
<li>的type属性：默认为数字列表 A--大写字母 a--小写字母 I--罗马字母 i--小写罗马字母
【注：<ol>列表的结果是带有前后顺序之分的编号。如果插入和删除一个列表项，编号会自动调整。】
③定义列表【项目及其注释的组合】：由<dl>标签定义，<dt>为列表项标签，<dd>为注释项标签，成对使用
<dl>
<dt>第 1项 <dd>注释 1 <dt>第 2项 <dd>注释 2 <dt>第 3项 <dd>注释 3 </dl>
【注：定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等】
④嵌套列表
（7）HTML表单 通过<form>标签定义。
表单是在Web网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。一般是将表单设计在一个Html 文档中，当用户填写完信息后做提交(submit)操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上的 ASP 或 CGI 等处理程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。
表单标签<form>的属性：
- action属性：指定了表单提交的目标地址，表示应该把表单提交给服务器端的哪个资源。其值可以是完整的URL。如：
若放置表单的网页与表单提交的目标地址在同一个HTTP服务器上，则目标地址可以用绝对路径表示（绝对路径相对于HTTP服务器）。绝对路径以“/”开头，包括WEB应用上下文及请求。如：<form action="http://localhost:8080/test/login.html"></form>
若放置表单的网页与表单提交的目标地址在同一个WEB应用上下文上，则目标地址可以用相对路径表示（相对路径相对于放置表单的网页）。相对路径不以“/”开头，不包括WEB应用上下文。如：<form action="test/login.html"></form>
若个属性是空值("")，则当前文档的url 将被使用<form action="login.html"></form>
- method属性：指定了表单的发送方式，发送方式有两种：GET及POST。
- GET方式：处理程序从当前Html 文档中获取数据
- POST方式：当前的Html 文档把数据传送给处理程序
表单的输入：<input>输入标签，输入类型由type属性定义
常用输入类型：①文本框（type="text"） ②单选按钮（type="radio"） ③复选框（type="checkbox"）
④密码域（type="password"） ⑤确认按钮(type="submit") ⑥普通按钮（type="button"）
<input 属性1 属性2......>
常用属性：
1. name 控件名称
2. type控件类型
3. align 指定对齐方式,可取top, bottom, middl
4. size 指定控件的宽度
5. value 用于设定输入默认值
6. maxlength在单行文本的时候允许输入的最大字符数
7. src 插入图像的地址
8. event 指定激发的事件
常见表单标签：
示例如下：
<form>
username: <input type="text"> <br/>
password: <input type="password"> <br/>
兴趣: 学习<input type="checkbox">
睡觉<input type="checkbox">
看书<input type="checkbox"> <br/>
性别: 男<input type="radio" name="sex">
女<input type="radio" name="sex"> <br/>
学历: <select>
<option>小学</option>
<option>初中</option>
<option>高中</option>
<option>大学</option>
</select> <br/>
评论: <textarea>
</textarea> <br/>
<input type="submit" value="submit">
</form>
效果图：
另外，HTML的一个重要特性是可以使用样式表（CSS）来为HTML文档进行自定义风格格式化，将结构与格式分离，并对HTML页面的布局进行控制。关于CSS,我只是大概学了一下，在下一篇随笔中会简单总结一下。
关于 <br> 和 <br/>:
在学习JSP时看到的一些教材书或视频教程上或是查看一些网页的源代码时，我观察到它们的换行标签都是没有关闭的空元素<br>，而 w3school的教程则告诉我们 在XHTM、XML以及未来版本的HTML中，所有元素都是必须被关闭，即在开始标签中添加斜杠，比如 <br />,这是关闭空元素的正确方法。虽然现在<br>在任意浏览器中也都是有效的，但是从长远的角度来看，我们应该从现在开始就习惯于关 闭空元素，使用<br />。
关于HTML标签与元素的区别：
在做这HTML的学习总结时，默默地发现自己好像莫名地有点搞不懂 标签 与 元素 的区别。像<br>,又是换行标签，又是空元素，果然自己是学了就忘。在经过查看笔记之后便弄懂了：HTML网页的内容是由元素组成的，而一 个元素通常是由一个开始标签、元素的内容、其他元素以及结束标签组成，即HTML元素是之从开始标签到结束标签的所有HTML代码。
关于HTML学习的总结大概就是这样了。
扫一扫
2279
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
