html

时间：2016-04-08 11:45:55 阅读：261 评论：0 收藏：0 [点我收藏+]

标签：

什么是HTML?

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

<!DOCTYPE> 声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的，以下方式均可：

<!DOCTYPE html> 

<!DOCTYPE HTML> 

<!doctype html> 

<!Doctype Html>

中文编码

目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>
</html>

HTML 实例

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>
</html>

实例解析

DOCTYPE 声明了文档类型
位于标签 <html> 与 </html> 描述了文档类型
位于标签 <body> 与 </body> 为可视化网页内容
位于标签 <h1> 与 </h1> 作为一个标题使用
位于标签 <p> 与 </p> 作为一个段落显示

HTML 标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的.

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

HTML 段落

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

HTML 链接

HTML 链接是通过标签 <a> 来定义的.

<a href="http://www.baidu.com">这是一个链接</a>

HTML 图像

HTML 图像是通过标签 <img> 来定义的

<img src="image.png" width="104" height="142">

HTML 元素

HTML 文档由 HTML 元素定义。

<p>    这是一个段落    </p>
<a href="default.htm">    这是一个链接    </a>
<br>

不要忘记结束标签

即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：

<p>This is a paragraph
<p>This is a paragraph

以上实例在浏览器中也能正常显示，因为关闭标签是可选的。

但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。

HTML 空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

HTML 属性

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name="value"。

属性值应该始终被包括在引号内。

双引号是最常用的，不过使用单引号也没有问题。

技术分享 提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name=‘John "ShotGun" Nelson‘

属性实例

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：

<a href="http://www.runoob.com">这是一个链接</a>

HTML 标题

标题（Heading）是通过 <h1> - <h6> 标签进行定义的.

<h1> 定义最大的标题。 <h6> 定义最小的标题。

注释: 浏览器会自动地在标题的前后添加空行。

标题很重要

请确保将 HTML 标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。

因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。

应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

HTML 水平线

<hr> 标签在 HTML 页面中创建水平线。

HTML 折行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签：

<p>This is<br>a para<br>graph with line breaks</p>

HTML 格式化标签

HTML 使用标签<b> 与<i> 对输出的文本进行格式, 如：粗体 or 斜体

这些HTML标签被称为格式化标签

通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。

然而，这些标签的含义是不同的：

<b> 与<i> 定义粗体或斜体文本。

<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。

<b>             定义粗体文本
<em>    　　　　 定义着重文字
<i>             定义斜体字
<small>    　 　定义小号字
<strong>  　　  定义加重语气
<sub>   　　　  定义下标字
<sup>   　　   定义上标字
<ins>   　　　  定义插入字
<del>   　　　 定义删除字

HTML "计算机输出" 标签

<code>    定义计算机代码
<kbd>    定义键盘码
<samp>    定义计算机代码样本
<var>    定义变量
<pre>    定义预格式文本

HTML 引文, 引用, 及标签定义

<abbr>    定义缩写
<address>    定义地址
<bdo>    定义文字方向
<blockquote>    定义长的引用
<q>    定义短的引用语
<cite>    定义引用、引证
<dfn>    定义一个定义项目。

HTML 链接语法

链接的 HTML 代码很简单。它类似这样：:

href 属性描述了链接的目标。

HTML 链接 - target 属性

使用 target 属性，你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档：

<a href="http://www.baidu.com/" target="_blank">访问baidu!</a>

HTML 连接- id 属性

id属性可用于创建在一个HTML文档书签标记。

提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。

实例

在HTML文档中插入ID:

<a id="tips">有用的提示部分</a>
#在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：
<a href="#tips">访问有用的提示部分</a>
#或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：
<a href="http://www.runoob.com/html-links.htm#tips">
访问有用的提示部分</a>

HTML <head>

<title> - 定义了HTML文档的标题

使用 <title> 标签定义HTML文档的标题

使用 <base> 定义页面中所有链接默认的链接目标地址

使用 <meta> 元素来描述HTML文档的描述，关键词，作者，字符集等。

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

HTML <base> 元素

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

<head>
<base href="http://www.w3cschool.cc/images/" target="_blank">
</head>

HTML <link> 元素

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

HTML <style> 元素

在<style> 元素中你需要指定样式文件来渲染HTML文档:

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

HTML <meta> 元素

meta标签描述了一些基本的元数据。

META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

<meta> 标签- 使用实例
为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容:
<meta name="description" content="Free Web tutorials on HTML and CSS">
定义网页作者:
<meta name="author" content="Hege Refsnes">
每30秒中刷新当前页面:
<meta http-equiv="refresh" content="30">

HTML <script> 元素

HTML head 元素
标签      描述
<head>    定义了文档的信息
<title>    定义了文档的标题
<base>    定义了页面链接标签的默认链接地址
<link>    定义了一个文档和外部资源之间的关系
<meta>    定义了HTML文档中的元数据
<script>    定义了客户端的脚本文件
<style>    定义了HTML文档的样式文件

HTML 样式- CSS

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素来包含CSS
外部引用 - 使用外部 CSS 文件

最好的方式是通过外部引用CSS文件.

在本站的HTML教程中我们使用了内联CSS样式来介绍实例，这是为了简化的例子，也使得你能更容易在线编辑代码并在线运行实例。

常用样式参数

color    设置颜色
background-color : red;    定义背景颜色
font-family     设置字体
font-size        字体大小
text-align        文字对齐方式
更多的属性查看一些官方文档

HTML 图像标签

<img>    定义图像
<map>    定义图像地图
<area>    定义图像地图中的可点击区域

HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1">
    <thead>
        <tr>
            <td colspan="3">aaa</td>
        </tr>
        <tr>
            <td rowspan="2">aaa</td>
            <td>bbb</td>
            <td>ccc</td>
        </tr>
        <tr>
            <td>bbb</td>
            <td>ccc</td>
        </tr>
    </thead>
</table>
border表示边框为1px
colspan=3表示占据三列
rolspan=2表示占据两行
注释：colspan="0" 指示浏览器横跨到列组的最后一列。

HTML 列表

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

有序列表

<!DOCTYPE html>
<html>
<body>

<ol>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>

<ol start="50">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
 
</body>
</html>

咖啡
牛奶
茶

咖啡
牛奶
茶

<html>
<body>

<h4>数字列表：</h4>
<ol>
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>字母列表：</h4>
<ol type="A">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>小写字母列表：</h4>
<ol type="a">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>罗马字母列表：</h4>
<ol type="I">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>小写罗马字母列表：</h4>
<ol type="i">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

</body>
</html>
数字列表：

苹果
香蕉
柠檬
桔子
字母列表：

苹果
香蕉
柠檬
桔子
小写字母列表：

苹果
香蕉
柠檬
桔子
罗马字母列表：

苹果
香蕉
柠檬
桔子
小写罗马字母列表：

苹果
香蕉
柠檬
桔子

不同类型的有序列表

无序列表

<html>

<body>

<h4>一个无序列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

</body>
</html>

咖啡
茶
牛奶

<html>
<body>

<h4>Disc 项目符号列表：</h4>
<ul type="disc">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

<h4>Circle 项目符号列表：</h4>
<ul type="circle">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

<h4>Square 项目符号列表：</h4>
<ul type="square">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

</body>
</html>
Disc 项目符号列表：

苹果
香蕉
柠檬
桔子
Circle 项目符号列表：

苹果
香蕉
柠檬
桔子
Square 项目符号列表：

苹果
香蕉
柠檬
桔子

不同类型的无序列表

自定义列表

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
Coffee
    Black hot drink
Milk
    White cold drink

<html>

<body>

<h4>一个嵌套列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>红茶</li>
    <li>绿茶</li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

</body>
</html>

嵌套列表

<ol>	定义有序列表。
<ul>	定义无序列表。
<li>	定义列表项。
<dl>	定义定义列表。
<dt>	定义定义项目。
<dd>	定义定义的描述
<dir>	已废弃。使用 <ul> 代替它。
<menu>	已废弃。使用 <ul> 代替它。

HTML <div> 和 <span>

可以通过 <div>块模块和 <span>内联模块将 HTML 元素组合起来。

HTML 布局

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#container{width:500px}
div#header {background-color:#99bbbb;}
div#menu {background-color:#ffff99;height:200px;width:150px;float:left;}
div#content {background-color:#EEEEEE;height:200px;width:350px;float:left;}
div#footer {background-color:#99bbbb;clear:both;text-align:center;}
h1 {margin-bottom:0;}
h2 {margin-bottom:0;font-size:18px;}
ul {margin:0;}
li {list-style:none;}
</style>
</head>

<body>

<div id="container">

<div id="header">
<h1>Main Title of Web Page</h1>
</div>

<div id="menu">
<h2>Menu</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>

<div id="content">Content goes here</div>

<div id="footer">Copyright W3School.com.cn</div>

</div>

</body>
</html>

使用div网页布局

<!DOCTYPE html>
<html>
<body>

<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#99bbbb;">
<h1>Main Title of Web Page</h1>
</td>
</tr>

<tr valign="top">
<td style="background-color:#ffff99;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>

<tr>
<td colspan="2" style="background-color:#99bbbb;text-align:center;">
Copyright W3School.com.cn</td>
</tr>
</table>

</body>
</html>

使用table网页布局

HTML 表单和输入

在大多数浏览器中，文本域的缺省宽度是20个字符。

<html>

<body>

<form>
名：
<input type="text" name="firstname">
<br />
姓：
<input type="text" name="lastname">
</form>

</body>
</html>

密码文本框

<html>

<body>

<form>
用户：
<input type="text" name="user">
<br />
密码：
<input type="password" name="password">
</form>
<p>
请注意，当您在密码域中键入字符时，浏览器将使用项目符号来代替这些字符。
</p>
</body>
</html>

单选按钮（Radio Buttons）

当用户从若干给定的的选择中选取其一时，就会用到单选框。

<form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>
name的值必须一致

复选框（Checkboxes）

当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。

<form>
<input type="checkbox" name="bike" />
I have a bike
<br />
<input type="checkbox" name="car" />
I have a car
</form>
这里即使name一致 也是复选框

带有标题的框

<!DOCTYPE HTML>
<html>

<body>

<form>
  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
  </fieldset>
</form>

<p>如果表单周围没有边框，说明您的浏览器太老了。</p>

</body>
</html>

表单的动作属性（Action）和确认按钮

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input" action="http://www.baidu.com" method="get">
Username: 
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
type=submit提交按钮

从表单发送邮件

<html>

<body>
<form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain">

<h3>这个表单会把电子邮件发送到 W3School。</h3>
姓名：<br />
<input type="text" name="name" value="yourname" size="20">
<br />
电邮：<br />
<input type="text" name="mail" value="yourmail" size="20">
<br />
内容：<br />
<input type="text" name="comment" value="yourcomment" size="40">
<br /><br />
<input type="submit" value="发送">
<input type="reset" value="重置">
# reset 重置表单内容
</form>
</body>
</html>

表单标签

<form>    定义供用户输入的表单
<input>    定义输入域
<textarea>    定义文本域 (一个多行的输入控件)
<label>    定义一个控制的标签
<fieldset>    定义域
<legend>    定义域的标题
<select>    定义一个选择列表
<optgroup>    定义选项组
<option>    定义下拉列表中的选项
<button>    定义一个按钮

下拉列表select

<select>
            <!--selected="selected" 默认选择-->
            <option>北京</option>>
            <option selected="selected">上海</option>>
            <option>广州</option>>
        </select>
        <!--滚动条-->
        <select size="5">
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
            <option>深圳</option>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
            <option>深圳</option>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
            <option>深圳</option>
        </select>
        <!--ctrl多选-->
        <select size="5" multiple="multiple">
            <option>北京</option>>
            <option>上海</option>>
            <option>广州</option>>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
            <option>深圳</option>
        </select>
        <!--分组-->
        <select>
            <optgroup label="中国">
                <option>北京</option>>
                <option>上海</option>>
                <option>广州</option>>
            </optgroup>
            <optgroup label="美国">
                <option>旧金山</option>>
                <option>华盛顿</option>>
            </optgroup>
        </select>

HTML 框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

垂直框架

本例中演示三个不同的页面制作一个垂直框架

<html>

<frameset cols="25%,50%,25%">

  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

</frameset>

</html>

html

标签：

原文地址：http://www.cnblogs.com/Chen-PY/p/5364676.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

html

什么是HTML?

HTML 标签

<!DOCTYPE> 声明

中文编码

HTML 实例

实例解析

HTML 标题

HTML 段落

HTML 链接

HTML 图像

HTML 元素

不要忘记结束标签

HTML 空元素

HTML 属性

属性实例

HTML 标题

标题很重要

请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。

因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。

应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

HTML 水平线

HTML 折行

HTML 格式化标签

HTML "计算机输出" 标签

HTML 引文, 引用, 及标签定义

HTML 链接语法

HTML 链接 - target 属性

HTML 连接- id 属性

实例

HTML <head>

HTML <base> 元素

HTML <link> 元素

HTML <style> 元素

HTML <meta> 元素

HTML <script> 元素

HTML 样式- CSS

HTML 图像标签

HTML 表格

HTML 列表

HTML <div> 和 <span>

HTML 布局

HTML 表单和输入

单选按钮（Radio Buttons）

复选框（Checkboxes）

带有标题的框

表单的动作属性（Action）和确认按钮

下拉列表select

HTML 框架

请确保将 HTML 标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。