HTML语言入门

来自软件实验室
跳转至: 导航搜索

这部分内容可能分为2-3个学习周期。

常用标签

  • a href target title
  • img src alt
  • p
  • h1-h6
  • span
  • div
  • table tbody tr th td
  • hr
  • br
  • ul ol li
  • form input button select option textarea
HTML <link> 标签
定义和用法
<link> 标签定义文档与外部资源的关系。

<link> 标签最常见的用途是链接样式表。
实例
链接一个外部样式表:

<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>


HTML <script> 标签
定义和用法
<script> 标签用于定义客户端脚本,比如 JavaScript。

script 元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。

必需的 type 属性规定脚本的 MIME 类型。

JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。
实例
在 HTML 页面中插入一段 JavaScript:

<script type="text/javascript">
document.write("Hello World!")
</script>




HTML <style> 标签
定义和用法
<style> 标签用于为 HTML 文档定义样式信息。

在 style 中,您可以规定在浏览器中如何呈现 HTML 文档。

type 属性是必需的,定义 style 元素的内容。唯一可能的值是 "text/css"。

style 元素位于 head 部分中。
实例
<html>
<head>
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
</head>





HTML <body> 标签
定义和用法
body 元素定义文档的主体。

body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)
实例
一个简单的 HTML 文档,带有最基本的必需的元素:

<html>

<head>
  <title>文档的标题</title>
</head>

<body>
  文档的内容... ...
</body>

</html>







HTML <div> 标签
定义和用法
<div> 可定义文档中的分区或节(division/section)。

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。

如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。

用法
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

不必为每一个 <div> 都加上类或 id,虽然这样做也有一定的好处。

可以对同一个 <div> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。
实例
文档中的一个部分会显示为绿色:

<div style="color:#00FF00">
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>







HTML <p> 标签
定义和用法
<p> 标签定义段落。

p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间,您也可以在样式表中规定。
实例
以下代码标记了一个段落:

<p>This is some text in a very short paragraph</p>





HTML <h1> 到 <h6> 标签
定义和用法
<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。

由于 h 元素拥有确切的语义,因此请您慎重地选择恰当的标签层级来构建文档的结构。因此,请不要利用标题标签来改变同一行中的字体大小。相反,我们应当使用层叠样式表定义来达到漂亮的显示效果。






HTML <ul> 标签
定义和用法
<ul> 标签定义无序列表。
实例
无序 HTML 列表:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>





HTML <li> 标签
定义和用法
<li> 标签定义列表项目。

<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。
实例
<ol>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ol>

<ul>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ul>






HTML <pre> 标签
定义和用法
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre> 标签的一个常见应用就是用来表示计算机的源代码。

可以导致段落断开的标签(例如标题、<p> 和 <address> 标签)绝不能包含在 <pre> 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都是一样的。

pre 元素中允许的文本可以包括物理样式和基于内容的样式变化,还有链接、图像和水平分隔线。当把其他标签(比如 <a> 标签)放到 <pre> 块中时,就像放在 HTML/XHTML 文档的其他部分中一样即可。请看下面的例子:

<pre>
<html>

<head>
  <script type="text/javascript" src="loadxmldoc.js">
</script>
</head>

<body>

  <script type="text/javascript">
    xmlDoc=<a href="dom_loadxmldoc.asp">loadXMLDoc</a>("books.xml");
    document.write("xmlDoc is loaded, ready for use");
  </script>

</body>

</html>
在上面的代码中,
 标签中的特殊符号被转换为符号实体,比如 "<" 代表 "<",">" 代表 ">"。另外,请注意蓝色的代码,我们在 <pre> 标签中使用了链接,也就是 <a> 标签。上面这段代码的显示效果如下:

<html>

<head>
  <script type="text/javascript" src="loadxmldoc.js">
</script>
</head>

<body>

  <script type="text/javascript">
    xmlDoc=loadXMLDoc("books.xml");
    document.write("xmlDoc is loaded, ready for use");
  </script>

</body>

</html>提示和注释
提示:制表符(tab)在 <pre> 标签定义的块当中可以起到应有的作用,每个制表符占据 8 个字符的位置。但是我们不推荐使用它,因为在不同的浏览器中,Tab 的实现各不相同。在用 <pre> 标签格式化的文档段中使用空格,可以确保文本正确的水平位置。

提示:如果您希望使用 <pre> 标签来定义计算机源代码,比如 HTML 源代码,请使用符号实体来表示特殊字符,比如 "<" 代表 "<",">" 代表 ">","&" 代表 "&"。


<body>
<h1>Header 1</h1>
<p>A paragraph.</p>
</body>
</html>






HTML <a> 标签
定义和用法
<a> 标签可定义锚。锚 (anchor) 有两种用法:

通过使用 href 属性,创建指向另外一个文档的链接(或超链接) 
通过使用 name 或 id 属性,创建一个文档内部的书签(也就是说,可以创建指向文档片段的链接) 
<a> 元素最重要的属性是 href 属性,它指定链接的目标。

在所有浏览器中,链接的默认外观是:

未被访问的链接带有下划线而且是蓝色的 
已被访问的链接带有下划线而且是紫色的 
活动链接带有下划线而且是红色的 
实例
指向 w3school 的超链接:

<a href="http://www.w3school.com.cn">W3School</a>








HTML <img> 标签
定义和用法
img 元素向网页中嵌入一幅图像。

请注意,从技术上讲,<img> 标签并不会在网页中插入图像,而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。

<img> 标签有两个必需的属性:src 属性 和 alt 属性。

实例
在下面的例子中,我们在页面中插入一幅 W3School 的工程师在上海鲜花港拍摄的郁金香照片:

<img src="/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" />











HTML <input> 标签
定义和用法
<input> 标签用于搜集用户信息。

根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
实例
一个简单的 HTML 表单,包含两个文本输入框和一个提交按钮:

<form action="form_action.asp" method="get">
  First name: <input type="text" name="fname" />
  Last name: <input type="text" name="lname" />
  <input type="submit" value="Submit" />
</form>








HTML <form> 标签
定义和用法
<form> 标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

表单用于向服务器传输数据。
提示和注释
注释:form 元素是块级元素,其前后会产生折行。
例子
<form action="form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>

一:HTML <a> 标签
1.HTML <a> 标签的 href 属性:<a> 标签的 href 属性用于指定超链接目标的 URL。
!实例:下面这个 LOGO 是一个图像链接,点击该图像,可以返回 W3school 的首页:
<a href="http://www.w3school.com.cn/index.html">
<img src="/i/w3school_logo_white.gif" />
</a>

!实例:链接到同一个页面的不同位置 :
<p>
<a href="#C4">查看 Chapter 4。</a>
</p>
<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>

2.HTML <a> 标签的 target 属性:<a> 标签的 target 属性规定在何处打开链接文档。
属性值
值                  描述 
_blank            在新窗口中打开被链接文档。 
_self               默认。在相同的框架中打开被链接文档。 
_parent          在父框架集中打开被链接文档。 
_top               在整个窗口中打开被链接文档。 
framename    在指定的框架中打开被链接文档。

!实例:<a href="pref.html" target="view_window">Preface</a>
二: HTML <img> 标签
1.HTML <img> 标签的 src 属性:<img> 标签的 src 属性是必需的。它的值是图像文件的 URL,也就是引用该图像的文件的的绝对路径或相对路径。

!实例:<img src="/i/eg_mouse.jpg" width="128" height="128">

2.HTML <img> 标签的 alt 属性:alt 属性是一个必需的属性,它规定在图像无法显示时的替代文本。

!实例:<img src="/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" />

3.HTML <img> 标签的 height 和 width 属性:<img> 标签的 height 和 width 属性设置图像的尺寸。

!实例:将图像宽度和高度分别设置为 200 像素:

<img src="/i/mouse.jpg" height="200" width="200" />
三:HTML <input> 标签:
1.HTML <input> 标签的 type 属性:type 属性规定 input 元素的类型。
属性值
值                       描述 
button                定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。 
checkbox            定义复选框。 
file                     定义输入字段和 "浏览"按钮,供文件上传。 
hidden               定义隐藏的输入字段。 
image                定义图像形式的提交按钮。 
password            定义密码字段。该字段中的字符被掩码。 
radio                  定义单选按钮。 
reset                  定义重置按钮。重置按钮会清除表单中的所有数据。 
submit               定义提交按钮。提交按钮会把表单数据发送到服务器。 
text                    定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。 

!实例:
Text
<input type="text" /> 定义用户可输入文本的单行输入字段。

Email: <input type="text" name="email" />
Pin: <input type="text" name="pin" />


Button
<input type="button" /> 定义可点击的按钮,但没有任何行为。button 类型常用于在用户点击按钮时启动 JavaScript 程序。
!实例:
<input type="button" value="Click me" onclick="msg()" />

Checkbox
<input type="checkbox" /> 定义复选框。复选框允许用户在一定数目的选择中选取一个或多个选项。
!实例:
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike
<input type="checkbox" name="vehicle" value="Car" /> I have a car


File
<input type="file" /> 用于文件上传。
!实例:
<form>
<input type="file" name="pic" accept="image/gif" />
</form>





Hidden
<input type="hidden" /> 定义隐藏字段。隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值,它们的值也可以由 JavaScript 进行修改。

!实例:
<form action="/example/html/form_action.asp" method="get">
  Email: <input type="text" name="email" /><br />
  <input type="hidden" name="country" value="China" />
  <input type="submit" value="Submit" />
</form>


Image
<input type="image" /> 定义图像形式的提交按钮

!实例:
<form action="/example/html/form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="image" src="/i/eg_submit.jpg" alt="Submit" />
</form>

Password
<input type="password" /> 定义密码字段。密码字段中的字符会被掩码(显示为星号或原点)。

!实例:Password: <input type="password" name="pwd" maxlength="8" /><br />


Radio
<input type="radio" /> 定义单选按钮。单选按钮允许用户选取给定数目的选择中的一个选项。

!实例:
<form action="/example/html/form_action.asp" method="get">
  <input type="radio" name="sex" value="male" /> Male<br />
  <input type="radio" name="sex" value="female" /> Female<br />
  <input type="submit" value="Submit" />
</form>


Reset Button
<input type="reset" /> 定义重置按钮。重置按钮会清除表单中的所有数据。

!实例:
<form action="/example/html/form_action.asp" method="get">
  Email: <input type="text" name="email" /><br />
  Pin: <input type="text" name="pin" maxlength="4" /><br />
  <input type="reset" value="Reset" />
  <input type="submit" value="Submit" />
</form>

<p>请单击重置按钮,可以清空表单。</p>


Submit
<input type="submit" /> 定义提交按钮。提交按钮用于向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面。

!实例:
<form action="form_action.asp" method="get">
Email: <input type="text" name="email" />
<input type="submit" />
</form>


2.HTML <input> 标签的 value 属性:
value 属性为 input 元素设定值。

对于不同的输入类型,value 属性的用法也不同:

type="button", "reset", "submit" - 定义按钮上的显示的文本 
type="text", "password", "hidden" - 定义输入字段的初始值 
type="checkbox", "radio", "image" - 定义与输入相关联的值 
注释:<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。


!实例:
<form action="form_action.asp" method="get">
  First name: <input type="text" name="fname" value="George" /><br />
  Last name: <input type="text" name="lname" value="Bush" /><br />
  <input type="submit" value="Submit form" />
</form>


3.HTML <input> 标签的 name 属性:name 属性规定 input 元素的名称。

!实例:
<form action="form_action.asp" method="get">
  <p>Name: <input type="text" name="fullname" /></p>
  <p>Email: <input type="text" name="email" /></p>
  <input type="submit" value="Submit" />
</form>

四.HTML <form> 标签
<form> 标签用于为用户输入创建 HTML 表单。

属性                             值              描述  
action                          URL            规定当提交表单时,向何处发送表单数据。 
accept                     MIME_type           规定通过文件上传来提交的文件的类型。 
accept-charset         charset                 服务器处理表单数据所接受的字符集。 
enctype                   MIME_type       规定表单数据在发送到服务器之前应该如何编码  
method                  get ,post              规定如何发送表单数据。  
name                      name                    规定表单的名称。  
target                     _blank                    规定在何处打开 action URL。 
                              _self 
                              _top 
                              _parent 
                              framename 

1.HTML <form> 标签的 action 属性
必需的 action 属性规定当提交表单时,向何处发送表单数据
!实例!<form action="form_action.asp" method="get">

2.HTML <form> 标签的 method 属性
method 属性规定如何发送表单数据(表单数据发送到 action 属性所规定的页面)。
表单数据可以作为 URL 变量(method="get")或者 HTTP post (method="post")的方式来发送。
!实例:<form action="form_action.asp" method="get">
3.HTML <form> 标签的 accept 属性
accept 属性规定能够通过文件上传进行提交的文件类型。

<form action="form_action.asp" accept="image/gif, image/jpeg">
五.HTML <select> 标签
select 元素可创建单选或多选菜单。


属性            值                描述  
disabled      disabled      规定禁用该下拉列表。 
multiple       multiple      规定可选择多个选项。 
name           name         规定下拉列表的名称。 
size             number       规定下拉列表中可见选项的数目。

!实例:带有预选值的下拉列表
<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

1.	HTML <select> 标签的 size 属性

size 属性规定下拉列表中可见选项的数目。
如果 size 属性的值大于 1,但是小于列表中选项的总数目,浏览器会显示出滚动条,表示可以查看更多选项。

!实例:在下拉列表中 size 属性显示两个选项:
<select size="2">
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>


2.	HTML <select> 标签的 multiple 属性
multiple 属性规定可同时选择多个选项。
!实例:允许在下拉列表中多选:
<select multiple="multiple" size="2">
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>


3.	HTML <select> 标签的 disabled 属性
disabled 属性规定禁用下拉列表。被禁用的下拉列表既不可用,也不可点击。

!实例:

<select disabled="disabled">
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

六.HTML <textarea> 标签
<textarea> 标签定义多行的文本输入控件。
文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。
注释:在文本输入区内的文本行间,用 "%OD%OA" (回车/换行)进行分隔。
提示:可以通过 <textarea> 标签的 wrap 属性设置文本输入区内的换行模式

!实例:
<textarea rows="3" cols="20">
在w3school,你可以找到你所需要的所有的网站建设教程。
</textarea>

属性                值                                            描述 
Cols              number                               规定文本区内的可见宽度。 
Rows            number                               规定文本区内的可见行数。 
disabled        disabled                               规定禁用该文本区。 
name            name_of_textarea                 规定文本区的名称。 
Readonly       readonly                               规定文本区为只读。

1.	HTML <textarea> 标签的 disabled 属性
disabled 属性规定禁用文本区。被禁用的文本区既不可用,也不可点击。
!实例:
<textarea rows="3" cols="20" disabled="disabled">
在w3school,你可以找到你所需要的所有的网站建设教程。
</textarea>

2.	HTML <textarea> 标签的 readonly 属性
readonly 属性规定文本区为只读。
在只读的文本区中,无法对内容进行修改,但用户可以通过 tab 键切换到该控件,选取或复制其中的内容。
!实例:

<textarea rows="3" cols="20" readonly="readonly">
在w3school,你可以找到你所需要的所有的网站建设教程。
</textarea>