简单的HTML5初步入门教程

TML5 代表未来;W3C ( World Wide Web Consortium, 万维网联盟) 已经放弃 XHTML，从而使 HTML5 成为正式标准并得到认可。

HTML5 是下一代的 HTML。

HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准，目标是取代现有的HTML4.01和XHTML1.0标准。它希望能够减少互联网富应用(RIA)对Flash、Silverlight、JavaFX等的依赖，并且提供更多能有效增强网络应用的API。

HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

HTML5 是 W3C 与 WHATWG 合作的结果。

WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

为 HTML5 建立的一些规则：

新特性应该基于 HTML、CSS、DOM 以及 JavaScript。

减少对外部插件的需求(比如 Flash)

更优秀的错误处理

更多取代脚本的标记

HTML5 应该独立于设备

开发进程应对公众透明

最简单的 HTML5 文档

<!doctype html>

<title>A Tiny HTML Document</title>

<p>Let's rock the browser, HTML5 style.</p>

只包含一行文本的超简单的 HTML5 文档，它在浏览器中效果如下：

更常见的结构用<head>和<body>来分块，把页面的信息和页面的实际内容分开，并用<html>来封装整个文档，现在的文档样子如下：

<!doctype html>

<html>

<head>

<title>A Tiny HTML Document</title>

</head>

<body>

<p>Let's rock the browser, HTML5 style.</p>

</body>

</html>

<html>、<head>和<body><HTML5 >不要求这些元素，但是这种书写风格比较好。

<!doctype html>

第一行都必须是一个特定的文档类型声明，用于告诉后面的文档标记遵循哪个标准。HTML5 的文档类型声明极其简单。

字符编码

现在大部分网站都使用 UTF-8 的编码，这种编码简洁、转换速度快，而且支持任何你想要的非英文字符。

在 HTML5 中增加字符编码信息很简单，在 <head>中增加 <meta>元素，如下：

<head>

<title>A Tiny HTML Document</title>

</head>

Dreamweaver 设计工具在创建新的网页时会自动添加这个元信息，并且也会将文件保存为 UTF 编码格式。如果你使用的是最简单的文本编辑器，在保存的时候记得选择正确的编码(UTF-8)。

页面语言

指明网页中使用的自然语言是一种好的习惯。为给内容指定语言，可在任何元素上使用 lang 属性。

为整个页面添加语言说明，就是为元素指定 lang 属性，如下代码：

<html>

如果页面包含多种语言的文本，那么这个信息细节对于屏幕阅读器也是很有用的。

添加样式表

只要是经过特意设计的专业网站，就一定会使用样式表。指定要使用的 CSS 样式表时，需要在 <head>中增加 <link>元素，如下：

<head>

<title>A Tiny HTML Document</title>

</head>

添加 JavaScript

在 HTML5 中添加 JavaScript 与在传统页面上添加差不多，例如：

<head>

<title>A Tiny HTML Document</title>

</head>

没有必要添加 language=”JavaScript”属性。浏览器假定你要使用的 JavaScript。

特别注意：

如果你要在 IE 中花大量时间测试包含 JavaScript 的页面，还应该增加一个特殊的注释，叫Web标志(saved from url=)，这行注释要放在指定字符编码元素的后面，如下：

<head>

<title>A Tiny HTML Document</title>

这条注释告诉 IE 将页面视为从远程网站上下载下来的，否则，IE 会切换到一种特殊锁定模式，弹出一条安全警告，在你点了“允许阻止的内容”按钮之后才会执行 JavaScript 代码。

(0014) 指的是 about:internet 字符串的长度。

最终结果

一个完整美观的 HTML5 代码最终如下：

<!doctype html>

<head>

<title>A Tiny HTML Document</title>

</head>

<body>

<p>Let's rock the browser, HTML5 style.</p>

</body>

</html>

微信搜索公众号华清远见成都中心（cdfarsight），回复免费资料，免费领取嵌入式、Java、HTML5/WEB前端开发书籍！

.标签

1.1meta标签

meta主要用于设置网页中的一些元数据，元数据不是给用户看 charset 指定网页的字符集 name 指定的数据的名称 content 指定的数据的内容

keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开

<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>

description 用于指定网站的描述

<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>

<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">

将页面重定向到另一个网站

1.2title标签

title标签的内容会作为搜索结果的超链接上的文字显示

<title>Document</title>

1.3标题

h1 ~ h6 一共有六级标题
从h1~h6重要性递减，h1最重要，h6最不重要
h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1
标题元素是块元素
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup
<hgroup>
<h1>回乡偶书二首</h1>
<h2>其一</h2>
</hgroup>
其他标签

p标签表示页面中的一个段落
<p>在p标签中的内容就表示一个段落</p>
em标签用于表示语音语调的一个加重
<p>今天天气<em>真</em>不错！</p>
strong表示强调，重要内容！
<p>你今天必须要<strong>完成作业</strong>！</p>
blockquote 表示一个长引用
<blockquote>
这句话我是从来没有说过的！
</blockquote>
q表示一个短引用
子曰<q>学而时习之，乐呵乐呵！</q>
br标签表示页面中的换行
<br>

1.4布局标签

header 表示网页的头部 main 表示网页的主体部分(一个页面中只会有一个main) footer 表示网页的底部 nav 表示网页中的导航 aside 和主体相关的其他内容（侧边栏） article 表示一个独立的文章 section 表示一个独立的区块，上边的标签都不能表示时使用section

div 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素

span 行内元素，没有任何的语义，一般用于在网页中选中文字

<header></header>
    <main></main>
    <footer></footer>

    <nav></nav>
    <aside></aside>
    <article></article>

    <section></section>

    <div></div>

    <span></span>

1.5列表

1.1.1分类

1.1.1.1有序列表

使用ol标签来创建无序列表，使用li表示列表项

<ul>
       <li>结构</li>
       <li>表现</li>
       <li>行为</li>
   </ul>

1.1.1.2 无序列表

使用ul标签来创建无序列表，使用li表示列表项

<ol>
       <li>结构</li>
       <li>表现</li>
       <li>行为</li>
   </ol>

1.1.1.3定义列表

使用dl标签来创建一个定义列表，使用dt来表示定义的内容，使用dd来对内容进行解释说明

<dl>
       <dt>结构</dt>
       <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
       <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
       <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
   </dl>

1.1.1.4列表之间可以互相嵌套

<ul>
       <li>
          aa
           <ul>
               <li>aa-1</li>
               <li>aa-2
                   <ul>
                       <li>aa-1</li>
                       <li>aa-2</li>
                   </ul>
               </li>
           </ul>
       </li>
   </ul>

1.6超链接

1.6.1 作用

超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置

1.6.2 定义

使用 a 标签来定义超链接

<a href="https://www.baidu.com">超链接</a>

1.6.3 属性

1.6.3.1属性1：href

指定跳转的目标路径

值可以是一个外部网站的地址

也可以写一个内部页面的地址

超链接是也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素

1.6.3.2 属性2：target

用来指定超链接打开的位置

_self 默认值在当前页面中打开超链接

_blank 在一个新的要么中打开超链接

<a href="07.列表.html" target="_blank">超链接</a>

1.6.4其他

将#作为超链接的路径的展位符使用

javascript：; 来作为href的属性，此时点击这个超链接什么也不会发生

将超链接的href属性设置为#，这样点击超链接以后页面不会发生跳转，而是转到当前页面的顶部的位置

跳转到页面的指定位置，只需将href属性设置 #目标元素的id属性值

<a href="#bottom">去底部</a>
   <br><br>
<a href="#p3">去第三个自然段</a>
   <br><br>
<p>
  内容多一点
</p>
<a href="#">这是一个新的超链接</a>
   <br><br>
<a href="javascript：;">这是一个新的超链接</a>
   <br><br>
<a id="bottom" href="#">回到顶部</a>

1.7图片标签

img标签来引入外部图片，img标签是一个自结束标签

属性：src 属性指定的是外部图片的路径（路径规则和超链接是一样的）

alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示

<img src="./img/1.gif" alt="松鼠">

1.8内联框架

用于向当前页面中引入一个其他页面

src 指定要引入的网页的路径
frameborder 指定内联框架的边框

<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>

1.8 音视频标签

1.8.1音频

audio 标签用来向页面中引入一个外部的音频文件的

1.8.1.1 属性

controls 是否允许用户控制播放
autoplay 音频文件是否自动播放

如果设置了autoplay 则音乐在打开页面时会自动播放

loop 音乐是否循环播放

<audio src="./source/audio.mp3" controls autoplay loop></audio>

除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径

<audio controls>
       <!-- 对不起，您的浏览器不支持播放音频！请升级浏览器！-->
       <source src="./source/audio.mp3">
       <source src="./source/audio.ogg">
       <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
   </audio>

1.8.2视频

与 audio 相似

<video controls>
       <source src="./source/flower.webm">
       <source src="./source/flower.mp4">
       <embed src="./source/flower.mp4" type="video/mp4">
   </video>

2.表格table

在table中使用tr表示表格中的一行，有几个tr就有几行
在tr中使用td表示一个单元格，有几个td就有几个单元格
rowspan 纵向的合并单元格
colspan 横向的合并单元格

<table border="1" width='50%' align="center">
      <tr>
          <td>A1</td>
          <td>B1</td>
          <td>C1</td>
          <td>D1</td>
      </tr>
      <tr>
          <td>A2</td>
          <td>B2</td>
          <td>C2</td>
          <td rowspan="2">D2</td>
      </tr>
      <tr>
          <td>A3</td>
          <td>B3</td>
          <td>C3</td>
      </tr>
      <tr>
          <td>A4</td>
          <td>B4</td>
          <td colspan="2">C4</td>
      </tr>
  </table>

长表格

可以将一个表格分成三个部分：

头部 thead
主体 tbody
底部 tfoot

th 表示头部的单元格

<table border="1" width='50%' align="center">  
      <thead>
          <tr>
              <th>日期</th>
              <th>收入</th>
              <th>支出</th>
              <th>合计</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
      </tbody>
      <tfoot>
          <tr>
              <td></td>
              <td></td>
              <td>合计</td>
              <td>300</td>
          </tr>
      </tfoot>

  </table>

表格样式

border-spacing: 指定边框之间的距离

border-spacing: 0px;

border-collapse: collapse; 设置边框的合并

border-collapse: collapse;

如果表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody，并且将tr全都放到tbody中tr不是table的子元素

3.表单（form）

使用form标签来创建一个表单
action 表单要提交的服务器的地址
数据要提交到服务器中，必须要为元素指定一个name属性值

<input type="text" name="username">

单选按钮

像这种选择框，必须要指定一个value属性，value属性最终会作为用户的填写的值传递给服务器
checked 可以将单选按钮设置为默认选中

<input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>

多选框

<input type="checkbox" name="test" value="1">
      <input type="checkbox" name="test" value="2">
      <input type="checkbox" name="test" value="3" checked>

下拉列表

<select name="haha">
          <option value="i">选项一</option>
          <option selected value="ii">选项二</option>
          <option value="iii">选项三</option>
      </select>

提交按钮

<input type="submit" value="注册">

属性

autocomplete="off" 关闭自动补全
readonly 将表单项设置为只读，数据会提交
disabled 将表单项设置为禁用，数据不会提交
autofocus 设置表单项自动获取焦点

<form action="target.html">
      <input type="text" name="username" value="hello" readonly>
      <br><br>
      <input type="text" name="username" autofocus>
      <br><br>
      <input type="text" name="b">

      <br><br>

      <!-- <input type="color"> -->
      <br><br>
      <!-- <input type="email"> -->
      <br><br>

      <input type="submit">
      <!-- 重置按钮 -->
      <input type="reset">
      <!-- 普通的按钮 -->
      <input type="button" value="按钮">

      <br><br>
       

      <button type="submit">提交</button>
      <button type="reset">重置</button>
      <button type="button">按钮</button>
  </form>

4.注释

<!--
我是注释中的注释 注释不能嵌套
-->

5.属性

属性，在标签中（开始标签或自结束标签）还可以设置属性
属性是一个名值对（x=y）
属性用来设置标签中的内容如何显示
属性和标签名或其他属性应该使用空格隔开
属性不能瞎写，应该根据文档中的规定来编写，有些属性有属性值，有些没有。如果有属性值，属性值应该使用引号引起来

6.文档声明

<!doctype html>

网页中编写JavaScript代码时，需要先引入JavaScript代码。JavaScript代码有3种引入方式，分别是行内式、嵌入式和外链式，下面分别进行讲解。

1.行内式

行内式是将JavaScript代码作为HTML标签的属性值使用。例如，在单击超链接“test”时，弹出一个警告框提示“Hello”，示例代码如下：

<a href="javascript：alert('Hello');">test</a>

需要说明的是，行内式只有在临时测试或者特殊情况下使用，一般情况下不推荐使用行内式，因为行内式有如下缺点。

(1)行内式可读性较差，尤其是在HTML文件中编写大量JavaScript代码时，不方便阅读。

(2)行内式在遇到多层引号嵌套的情况时，引号非常容易混淆，导致代码出错。

2.嵌入式

嵌入式(或称内嵌式)使用<scrip>标签包裹JavaScript代码，直接编写到HTML文件中，通常将其放到<head>标签<body>或标签中。<scrip>标签的type属性用于告知浏览器脚本类型，HTML.5中该属性的默认值为“text/javascript”，因此在使用HTML5时可以省略ype属性。嵌入式的示例代码如下：

<script>
    JavaScript代码
</script>

3.外链式

外链式(或称外部式)是将JavaScript 代码写在一个单独的文件中，一般使用“js”作为文件的扩展名，在HTML页面中使用<script>标签的src属性引人“js”文件。外链式适合javascript代码量较多的情况。在html页面中引入“js”文件，示例代码如下：

<script src="test.js"></script>

上述代码表示引入当前目录下的tesL.js文件。需要注意的是，外链式的标签内不可以编写JavaScript 代码。

为了帮助初学者更好地理解外链式，下面利用外链式实现浏览网页时在页面中自动弹出警告框。创建Example02.html文件，引入Example02.js文件，具体代码如例1-2所示。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script src="Example02.js"></script>
</body>
</html>

标签的src属性设置了要引入的文件为Example02.js。

创建Example02.js文件，在该文件中编写如下代码：

alert ('Hello JavaScript');

保存代码，在浏览器中访问Example02.html文件，页面效果与例1-1相同。

以上讲解了JavaScript的3种引入方式。现代网页开发中提倡结构、样式、行为的分离，即分离HTML、CSS、JavaScrixt这3部分代码，这样更有利于文件的维护。当需要编写大量的、逻辑复杂的、具有特定功能的JavaScrigt代码时，推荐使用外链式。外链式相比嵌入式，具有以下3点优势：

(1)外链式存在于独立文件中，有利于修改和维护，而嵌人式会导致HTML代码与JavaScript代码混合在一起。

(2)外链式可以利用浏览器缓存提高速度。例如，在多个页面中引入相同的JavaScript文件时，打开第1个页面后，浏览器将JavaScript文件缓存下来，下次打开其他页面时就不用重新下载该文件了。

(3)外链式有利于HTML页h代码结构化，把大段的JavaScript代码分离到HTML页面之外，既美观，也方便文件级别的代码复用。

在线咨询

上一篇：建议收藏！这4款视频压缩工具超赞
下一篇：加载机制：App和Web分别的加载原理&加载方案设计

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

简单的HTML5初步入门教程

.标签

1.1meta标签

1.2title标签

1.3标题

1.4布局标签

1.5列表

1.1.1分类

1.1.1.1有序列表

1.1.1.2 无序列表

1.1.1.3定义列表

1.1.1.4列表之间可以互相嵌套

1.6超链接

1.6.1 作用

1.6.2 定义

1.6.3 属性

1.6.3.1属性1：href

1.6.3.2 属性2：target

1.6.4其他

1.7图片标签

1.8内联框架

1.8 音视频标签

1.8.1音频

1.8.1.1 属性

1.8.2视频

2.表格table

长表格

表格样式

3.表单（form）

属性

4.注释

5.属性

6.文档声明

1.行内式

2.嵌入式

3.外链式

您的项目需求