跳转至

HTML

简介

HTML指超文本标记语言(HyperText Makeup Language)，可以实现图片、链接、音乐等多种元素，由W3C(万维网联盟)制定。

HTML标签(tag)是由尖括号包围的关键词(如<html>)，它通常成对出现，第一个标签是开始标签(start tag, 如<p>)，第二个标签是结束标签(end tag, 如</p>)。

<开始标签>内容</结束标签>

HTML元素指的是从开始标签到结束标签的所有代码(例如<p>This is a paragraph</p>)。

使用小写标签

HTML标签对大小写不敏感：<p>等同于<P>。W3C推荐使用小写。

典型的HTML文件如下所示:

<!DOCTYPE html> 
<html> 
<head>
    <title>...<title>
    <link>...</link>
    <style>...</style>
    <script>...</script>
    ...
</head>
<body> 
    ...
</body> 
</html>
  • <html>标签是HTML页面的根元素，该标签的结束标志为</html>。
  • <head>标签定义了头部元素，其包含了文档的元信息(meta-information)，可以插入脚本，样式文件等。
    • <title>标签定义了文档的标题。
    • <link>标签通常用于链接样式表: <link rel="stylesheet" type="text/css" href="style.css">
    • <style>标签定义内部样式表。
    • <script>标签用于加载脚本文件，例如JavaScript。
  • <body>元素定义文档的主体，即网页可见的页面内容。

基本元素

  • HTML标题(heading)是通过<h1>-<h6>标签进行定义的。<h1>定义最大的标题，<h6>定义最小的标题。
  • HTML水平线用<hr>标签创建，用于分隔内容，在视觉上将文档分隔成各个部分。
  • HTML注释可以提高可读性，使代码更容易被人理解。格式为<!--注释-->。
  • HTML段落是通过<p>标签定义的。
  • HTML换行使用<br/>标签，可以理解为简单的输入一个空行。
  • HTML使用标签<a>设置超文本链接，具体格式为<a href="url" target=""></a>。target属性值可以是_blank(新窗口打开)。

默认情况下，HTML会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。

属性

HTML元素可以设置属性，一般位于开始标签内，以名/值对(name=value)的形式出现，属性值应该始终被包括在引号内。下面列出了适用于大多数元素的属性：

属性 描述
class 定义一个或多个类名(classname)
id 定义元素的唯一id
style 规定元素的内联样式
title 描述元素的额外信息(作为工具条使用)

文本格式化

HTML中存在一些格式化文本的标签，来调整文本样式。

  • <strong>, <b>标签定义粗体文本。
  • <em>, <i>标签定义斜体文本。
  • <small>, <big>标签定义缩小/放大字体。
  • <sub>, <sup>定义上标/下标字。

图像

在HTML中，图像由<img>标签定义，使用源属性(src)指定图像的URL地址，alt属性指定当图片无法加载时显示的文本。

<img src="" alt="">

表格

表格由<table>标签定义，表格的行用<tr>(table row)标签定义，单元格由<td>(table data)标签定义。表格的表头使用<th>标签进行定义。表格可以分为表格的页眉(thead)、主体(tbody)、页脚(tfoot)。

表格的基本结构为：

<table>
    <thead>
        <tr>
            <th> </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> </td>
        <tr>
    </tbody>
    <tfoot> </tfoot>
</table>

列表

HTML支持有序、无序和定义列表。

无序列表(unordered list)使用粗体圆点进行标记，典型格式为

<ul>
    <li>...</li>
    <li>...</li>
</ul>

有序列表使用数字标记，典型格式为

<ol>
    <li>...</li>
    <li>...</li>
</ol>

表单

HTML表单用于收集用户输入，包含表单元素。表单元素是允许用户在表单中输入内容的元素，例如文本域、下拉列表、单选框、复选框。

多数情况下被用到的表单元素是输入元素<input>，其输入类型由类型属性(type)定义，常见输入类型如下：

  • 文本域(Text Fields): <form> <input type="text"></form>
  • 密码字段: <form> <input type="password"></form>
  • 单选按钮(Radio Buttons)：<form> <input type="radio"></form>

单选按钮

<form>
    <label><input type="radio" name="indoor-outdoor" value="indoor">indoor</label><br/>
    <label><input type="radio" name="indoor-outdoor" value="outdoor">outdoor</label>
</form>

效果如下


  • 复选框(Checkboxes)： <form> <input type="checkbox"></form>

复选框

<form>
<label><input type="checkbox" name="personality"></label>cat<br/>
<label><input type="checkbox" name="personality"></label>dog<br/>
<label><input type="checkbox" name="personality"></label>elephant<br/>
</form>

效果如下：

cat
dog
elephant

  • 提交按钮(Submit Button)： <form action="" method=""><input type="submit"></form>。当用户点击确认按钮时，表单的内容会传送到另一个文件。表单的动作属性(action)定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的数据进行相关的处理。例如利用Servlet处理。

用表单发送电子邮件

<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
    Name:<input type="text" name="name" value="your name"><br>
    E-mail:<input type="text" name="mail" value="your email"><br>
    Comment:<input type="text" name="comment" value="your comment" size="50"><br>
    <input type="submit" value="Send">
</form>

效果如下：

Name:
E-mail:
Comment:

文本域(Textarea): 用户可以在文本域中写入文本：<textarea rows="10" cols="30">

字符实体

在HTML中不能使用某些符号，例如小于号(<)和大于号(>)，因为浏览器会误认为它们是标签。这些字符必须使用字符实体(character entities)，其通用格式为&entity_name;。常见的字符实体有：

  • 小于号: &lt;
  • 大于号: &gt;
  • 不间断空格，浏览器会截短空格，多个空格只保留一个空格：&nbsp;

HTML5

HTML5是HTML最新的版本，在2004年由W3C完成标准制定。