HTML学习总结
由于这大二的第二学期就要开始学网页设计和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:[email protected]?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。如:
<form action="http://localhost:8080/test/login.html"></form>
<form action="test/login.html"></form>
<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学习的总结大概就是这样了。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。