HTML

1、HTML简介

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> <!--声明字符编码-->
    <title>标题</title>
</head>
<body>
    <h1>第一个标题</h1>
    <p>第一个段落</p>
</body>
</html>

<!DOCTYPE html> 声明为 HTML5 文档，不区分大小写
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

标签介绍：

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

<!--为搜索引擎定义关键词-->
    <meta name="keywords" content="HTML,CSS,XHTML,JavaScript">
<!--每30秒刷新当前页面-->
    <meta name="author" content="30">

<img>标签定义图像，src指定URL地址，alt为图像定义预备的可替换的文本，height高度，width宽度像素

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 <form> 来设置

多数情况下被用到的表单标签是输入标签（<input>）。

输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

<form name="input" action="html_form_action.php" method="get">
        姓名：<input type="text" name="文本域"><br />
        密码：<input type="password" name="密码段"><br />
        <input type="radio" name="sex" value="male">单选<br />
        <input type="radio" name="sex" value="female">单选<br />
        <input type="checkbox" name="vehicle" value="Bike">多选<br />
        <input type="checkbox" name="vehicle" value="Car">多选<br />
        内容:<input type="text" name="user">
        <input type="submit" value="提交">
    </form>

<form>定义供用用户输入的表单

<input>定义输入域，类型包括：checkbox复选框；radio单选框；text文本域；password密码框；file选择文件框；button提交按钮；submit提交数据到后台。

<textarea>定义文本域（一个多行的输入控件）

<label>定义了<input>元素的标签，一般为输入标题

<fieldset>定义了一组相关的表单元素，并使用外框包含起来

<legend>定义了<fieldset>元素的标题

<select>定义了下拉选项列表

<optgroup>定义选项组

<option>定义下拉列表中的选项

<button>定义一个点击按钮

<datalist>指定一个预先定义的输入控件选项列表

<keygen>定义了表单的密钥对生成器字段

<output>定义一个计算结果

<!--普通下拉框-->
<select>
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
    <option>长沙</option>
</select>
<!--多选下拉框-->
<select size="5" multiple="multiple">
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
    <option>长沙</option>
</select>
<!--分组下拉框-->
<select>
    <optgroup label="北京">
        <option>海淀</option>
        <option>朝阳</option>
        <option>丰台</option>
        <option>大兴</option>
    </optgroup>
    <optgroup label="china">
        <option>上海</option>
        <option>深圳</option>
        <option>长沙</option>
    </optgroup>

</select>

<label for="hehe">是</label>
<input id="hehe" type="checkbox" />
<!--绑定关系-->

html字符实体：

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分	¢	¢
£	镑	£	£
¥	人民币/日元	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

列表：

<ul>
    <li>无序列表</li>
    <li>无序列表</li>
    <li>无序列表</li>
</ul>
<ol>
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>
<dl>
    <dt>标题1</dt>
    <dd>内容1</dd>

    <dt>标题2</dt>
    <dd>内容2</dd>
</dl>

表格：

<table border="1">
        <tr>
            <th>第一列</th>
            <th>第二列</th>
            <th>第三列</th>
            <th>第四列</th>
        </tr>
        <tr>
            <td colspan="2">合并列</td>
            <td>333</td>
            <td rowspan="3">合并行</td>
        </tr>
        <tr>
            <td>444</td>
            <td>555</td>
            <td>666</td>
        </tr>
        <tr>
            <td>777</td>
            <td>888</td>
            <td>999</td>
        </tr>
</table>

区块：

html可以通过<div>和<span>将元素组合起来，大多数HTML元素被定义为块级元素或内联元素，如<h1>,<p>,<ul>,<table>为块级元素，<b>,<td>,<a>,<img>为内联元素，<div>元素时块级元素，它可用于组合其他HTML元素的容器，<div>元素没有特定的含义，除此之外，由于它属于块级元素，浏览器会在其前后显示折行，如与CSS一同使用，<div>元素可用于对大的内容块设置样式属性。

<div>元素的另一个常见的用途是文档布局，它取代了试用表格定义布局的老式方法，使用<table>元素进行文档布局不是表格的正确用法，<table>元素的作用是显示表格化的数据。

HTML<span>元素时内联元素，可用作文本的容器，可用于为部分文本设置样式属性。

HTML框架：

iframe语法：<iframe src="URL"></iframe> 改URL指向不同的网页，定义一个内联的iframe

height和width属性用来定义iframe便签的高度与宽度。属性默认以像素为单位，但是你可以指定按其比例显示（如：80%）

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

frameborder属性用于定义iframe表示是否显示边框，设置属性值为“0”移除iframe的边框：

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

HTML脚本：

JavaScript使HTML页面具有更强的动态和交换性，<script>标签用于定义客户端脚本，不如JavaScript，<script>元素既可包含脚本语句，也可通过src属性指向外部脚本文件。JavaScript最常用用于图片操作、表单验证以及内容动态更新。

<script>
document.write("hello world")
<script>

<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

JavaScript实例代码：

JavaScript可以直接在HTML输出：

document.write("<p>这是一个段落。</p>");

JavaScript事件相应：

<button type="button" onclick="myFunction()">点我！</button>

JavaScript处理HTML样式：

document.getElementById("demo").style.color="#ff0000";

HTML字符实体：

实体名称对大小写敏感

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分	¢	¢
£	镑	£	£
¥	人民币/日元	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

html速查列表：

1、html基本文档

<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>

2、基本标签（Basic Tags）

<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>
 
<p>这是一个段落。</p>
<br> （换行）
<hr> （水平线）
<!-- 这是注释 -->

3、文本格式化（Formatting）

<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd> 
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
 
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）

4、链接（Links）

普通的链接：<a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

5、图片（Images）

<img src="URL" alt="替换文本" height="42" width="42">

6、样式/区块（styles/sections）

<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>

7、无序列表

<ul>
    <li>项目</li>
    <li>项目</li>
</ul>

8、有序列表

<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

9、定义列表

<dl>
  <dt>项目 1</dt>
    <dd>描述项目 1</dd>
  <dt>项目 2</dt>
    <dd>描述项目 2</dd>
</dl>

10、表格（tables）

<table border="1">
  <tr>
    <th>表格标题</th>
    <th>表格标题</th>
  </tr>
  <tr>
    <td>表格数据</td>
    <td>表格数据</td>
  </tr>
</table>

11、框架（Iframe）

<iframe src="demo_iframe.htm"></iframe>

12、表单（Forms）

<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
 
</form>

13、实体（Entities）

&lt; 等同于 <
&gt; 等同于 >
&#169; 等同于 ©

XHTML与HTML的区别：

XHTML是以XML格式编写的HTML。

什么是XHTML:

XHTML 指的是可扩展超文本标记语言
XHTML 与 HTML 4.01 几乎是相同的
XHTML 是更严格更纯净的 HTML 版本
XHTML 是以 XML 应用的方式定义的 HTML
XHTML 是 2001 年 1 月发布的 W3C 推荐标准
XHTML 得到所有主流浏览器的支持

XHTML与HTML相比重要的区别：

文档结构

XHTML DOCTYPE 是强制性的
<html> 中的 XML namespace 属性是强制性的
<html>、<head>、<title> 以及 <body> 也是强制性的

元素语法

XHTML 元素必须正确嵌套
XHTML 元素必须始终关闭
XHTML 元素必须小写
XHTML 文档必须有一个根元素

属性语法

XHTML 属性必须使用小写
XHTML 属性值必须用引号包围
XHTML 属性最小化也是禁止的

HTML - XHTML

XHTML 是以 XML 格式编写的 HTML。

什么是 XHTML?

XHTML 指的是可扩展超文本标记语言
XHTML 与 HTML 4.01 几乎是相同的
XHTML 是更严格更纯净的 HTML 版本
XHTML 是以 XML 应用的方式定义的 HTML
XHTML 是 2001 年 1 月发布的 W3C 推荐标准
XHTML 得到所有主流浏览器的支持

为什么使用 XHTML?

因特网上的很多页面包含了"糟糕"的 HTML。

如果在浏览器中查看，下面的 HTML 代码运行起来非常正常（即使它并未遵守 HTML 规则）：

<html> <head> <meta charset="utf-8"> <title>这是一个不规范的 HTML</title> <body> <h1>不规范的 HTML <p>这是一个段落 </body>

XML 是一种必须正确标记且格式良好的标记语言。

如果希望学习 XML，请阅读我们的 XML 教程。

今日的科技界存在一些不同的浏览器技术。其中一些在计算机上运行，而另一些可能在移动电话或其他小型设备上运行。小型设备往往缺乏解释"糟糕"的标记语言的资源和能力。

所以 - 通过结合 XML 和 HTML 的长处，开发出了 XHTML。XHTML 是作为 XML 被重新设计的 HTML。

与 HTML 相比最重要的区别：

文档结构

XHTML DOCTYPE 是强制性的
<html> 中的 XML namespace 属性是强制性的
<html>、<head>、<title> 以及 <body> 也是强制性的

元素语法

XHTML 元素必须正确嵌套
XHTML 元素必须始终关闭
XHTML 元素必须小写
XHTML 文档必须有一个根元素

属性语法

XHTML 属性必须使用小写
XHTML 属性值必须用引号包围
XHTML 属性最小化也是禁止的

<!DOCTYPE ....>是强制性的

XHTML 文档必须进行 XHTML 文档类型声明（XHTML DOCTYPE declaration）。

您可以在菜鸟教程的标签参考手册中找到完整的 XHTML 文档类型。

<html>, <head>, <title>, 和 <body> 元素也必须存在，并且必须使用 <html> 中的 xmlns 属性为文档规定 xml 命名空间。

下面的例子展示了带有最少的必需标签的 XHTML 文档：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
  <meta charset="utf-8">
  <title>文档标题</title>
</head>
 
<body>
文档内容
</body>
 
</html>

XHTML元素必须合理嵌套：

在 HTML 中，一些元素可以不互相嵌套，像这样：

<b><i>粗体和斜体文本</b></i>

在 XHTML 中，所有的元素都必须互相合理地嵌套，像这样：

<b><i>粗体和斜体文本</i></b>

XHTML 元素必须有关闭标签

错误示例：
<p>这是一个段落
<p>这是另外一个段落
正确示例：
<p>这是一个段落</p>
<p>这是另外一个段落</p>

空元素必须包含关闭标签

错误示例：
分行:<br>
水平线: <hr>
图片: <img src="happy.gif" alt="Happy face">
正确示例：
分行:<br />
水平线: <hr />
图片: <img src="happy.gif" alt="Happy face" />

XHTML 元素必须是小写

错误示例:
<BODY>
<P>这是一个段落</P>
</BODY>
正确示例：
<body>
<p>这是一个段落</p>
</body>

属性名称必须是小写

错误示例：
<table WIDTH="100%">
正确示例:
<table width="100%">

属性值必须有引号

错误示例：
<table width=100%>
正确示例：
<table width="100%">

不允许属性简写

错误示例：
<input checked>
<input readonly>
<input disabled>
<option selected>
正确示例：
<input checked="checked">
<input readonly="readonly">
<input disabled="disabled">
<option selected="selected">

如何将 HTML 转换为 XHTML

添加一个 XHTML <!DOCTYPE> 到你的网页中
添加 xmlns 属性添加到每个页面的html元素中。
改变所有的元素为小写
关闭所有的空元素
修改所有的属性名称为小写
所有属性值添加引号

posted @ 2018-03-16 22:36 Py.qi 阅读(333) 评论(0) 编辑收藏举报

刷新页面返回顶部

Py.qi

当你的才华撑不起你的野心的时候，就应该静下心来学习!

HTML

公告