HTML教程

2017-04-03 本文已影响0人梦巷_n

导语：

HTML（Hyper Text Markup Language 超文本标识语言）是一种用来制作超文本文档的简单标记语言。它通过标记符来告诉浏览器如何显示其中的内容（如，文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，解释其执行过程。但对于不同的浏览器，显示效果也可能会不同。

一. HTML基础

1.HTML头部

<head>元素

<head>元素：<head> 元素包含了所有的头部标签元素。
在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

<title>元素

<title> 元素：<title> 标签定义了不同文档的标题
在 HTML/XHTML 文档中是必须的。

1>定义了浏览器工具栏的标题
2>当网页添加到收藏夹时，显示在收藏夹中的标题
3>显示在搜索引擎结果页面的标题

<link>元素

<link> 元素:标签定义了文档与外部资源之间的关系
<link> 标签通常用于链接到样式表，例如，
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
<style> 元素:<style> 标签定义了HTML文档的样式文件引用地址，例如，
<head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head>

<meta>标签

为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容:
<meta name="description" content="免费 Web & 编程教程">
定义网页作者:
<meta name="author" content="Runoob">
每30秒中刷新当前页面:
<meta http-equiv="refresh" content="30">

2.HTML链接

HTML使用标签<a>来设置超文本链接。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。在标签<a> 中使用了href属性来描述链接的地址。
语法格式为：<a href="url">链接文本</a>
例如 <a href="http://www.baidu.com/">访问菜鸟教程</a>
target属性：定义被链接的文档在何处显示，例如下面这行会在新窗口打开文档：
<a href="http://www.runoob.com/" target="_blank">访问菜鸟教程!</a>

3.HTML图像

图像标签<img>与源属性(src)

在 HTML 中，图像由<img> 标签定义。
源属性的值是图像的 URL 地址。

alt属性

alt 属性用来为图像定义一串预备的可替换的文本。
例如，![](boat.gif)
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

添加背景图片

<body background="bg.jpg"> </body>

3.HTML表格

HTML 表格和边框属性

使用边框属性来显示一个带有边框的表格：

<table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
在浏览器显示如下：

4.HTML列表

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用 <ul> 标签
<ul> <li>apple</li> <li>banana</li> </ul>
在浏览器显示如下：

有序列表

有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签，每个列表项始于 <li> 标签，列表项项使用数字来标记。
<ol> <li>apple</li> <li>banana</li> </ol>
浏览器中显示如下：

自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>
浏览器显示如下：

HTML区块

内联元素（inline element）

内联元素在显示时通常不会以新行开始
例如<b>, <td>, <a>, <img>

块状元素（block level element）

块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例如<h1>, <p>, <ul>, <table>

<div>元素

<div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

<span>元素

<span> 元素是内联元素，可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

HTML表单

文本域（Text Fields）

文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
<form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form>
浏览器显示如下：
表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。

密码字段（Password）

密码字段通过标签<input type="password"> 来定义
<form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"><br> Password: <input type="password" name="pwd"> </form>
浏览器显示如下：

单选框（Radio Buttons）

<input type="radio"> 标签定义了表单单选框选项
<form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"><br> Password: <input type="password" name="pwd"><br> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form>
浏览器显示如下：

复选框（Checkboxes）

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
<form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"><br> Password: <input type="password" name="pwd"><br> <input type="radio" name="sex" value="male">Male <input type="radio" name="sex" value="female">Female<br> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form>

提交按钮（Submit Button）

<input type="submit"> 定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
<form name="input" action="html_form_action.php" method="get"> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"><br> Password: <input type="password" name="pwd"><br> <input type="radio" name="sex" value="male">Male <input type="radio" name="sex" value="female">Female<br> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car <br> <input type="submit" value="Submit"> </form>
假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出输入的结果。