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>

    若放置表单的网页与表单提交的目标地址在同一个HTTP服务器上,则目标地址可以用绝对路径表示(绝对路径相对于HTTP服务器)。绝对路径以“/”开头,包括WEB应用上下文及请求。如:

    <form action="test/login.html"></form>

    若放置表单的网页与表单提交的目标地址在同一个WEB应用上下文上,则目标地址可以用相对路径表示(相对路径相对于放置表单的网页)。相对路径不以“/”开头,不包括WEB应用上下文。如:

    <form action="login.html"></form>

    若个属性是空值(""),则当前文档的url 将被使用
  • 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学习的总结大概就是这样了。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。