HTML5入门

么是HTML5

官方概念：HTML5草案的前身名为Web Applications 1.0，是作为下一代互联网标准,用于取代html4与xhtml1 的新一代标准版本,所以叫html5。它增加了新的标签和属性，加强了网页的标准、语义化与web表现性能，同时还增加了本地数据库等 Web 应用的功能。

广义概念：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器呈现技术得到了一个飞跃发展和广泛支持，它包括：HTML5，CSS3，Javascript，API在内的一套技术组合

HTML 5发展时间表

由上面图可知：现在的HTML5还不是一个最终统一的版本，所以说HTML5用在手机端的开发。

目前支持HTML5的浏览器

不同的浏览器显示的效果可能不一样。因为HTML5没有一个统一的标准。（现在处在一个推广阶段），但是大部分是一样的。

HTML5的特点

更简单

标签语义化

语法更宽松

多设备跨平台

自适应网页设计

从头说起——文档的声明

Xhtml1.0的页面架构

Html5的页面架构

HTML5标签的语义化

在以前的html中，盒子用div或span。

在html5中，标签的最大变化是标签都有了语义，以前的div和span都没有语义，仅仅表示一个盒子。

<header> 头标签

<nav> 导航标签

<aside> 侧边栏标签

<article> 文章标签

<footer> 页脚

<section> 章节，页眉，栏目

HTML5新增的表单三个属性

1、required：必填属性

2、placeholder：默认显示内容

3、autofocus：自动获取焦点

Html5中新增input标记的type属性

属性	描述
email	邮件
date	日期
url	网址格式
number	数字
range	范围
color	颜色

完整代码

<form>

邮件：<input type="email" name="email"><br>

日期：<input type="date" name="mydate"><br>

网址：<input type="url"><br>

手机号：<input type="number"><br>

亮度：<input type="range" min="0" max="255"><br>

颜色：<input type="color"><br>

地址：

</optgroup>

</optgroup>

</select><br>

搜索车型：<input type="text" list="car">

</datalist>

</form>

Range调背景色

代码如下：

<!doctype html>

<html>

<head>

<title>无标题文档</title>

//当页面准备完毕的时候

$(document).ready(function(e) {

$('input').change(function(e) {

var red=$('#red').val(); //得到红色的值

var green=$('#green').val(); //得到绿色的值

var blue=$('#blue').val(); //得到蓝色的值

var value=$(this).val(); //当前修改的值

$(this).next().html(value); //将值付给当前修改元素后面的span

$('body').css('background-color','rgb('+red+','+green+','+blue+')');

});

</script>

</head>

<body>

红色：<input type="range" id="red" min="0" max="255" value="255"><span>255</span><br>

绿色：<input type="range" id="green" min="0" max="255" value="255"><span>255</span><br>

蓝色：<input type="range" id="blue" min="0" max="255" value="255"><span>255</span>

</body>

</html>

音频播放

第一种写法

如果声音的格式html5不支持，就显示标记之间的提示信息

第二种写法：

视频播放

使用video标记来插入视频 autoplay表示自动播放，controls表示显示控制面板。

360音乐导航

完整代码如下:

#nav{

list-style-type:none; /*去掉无序列表前面的点*/

margin:50px auto 0px; /*上边界50px,左右居中，下边界为0*/

width:960px; /*整个导航的宽度*/

height:38px;

color:#333;

font-size:14px;

padding:0px; /*填充清0*/

overflow:hidden; /*超出尺寸的部分不显示*/

}

#nav li{

width:105px;

height:36px;

float:left; /*所有的li从左到右排列*/

text-align:center; /*文字居中对齐*/

line-height:38px; /*设置行高，目的是让文字垂直居中*/

border-top:#C9CBCE solid 1px;

border-left:#C9CBCE solid 1px;

border-bottom:#C9CBCE solid 1px;

cursor:pointer; /*光标移动到li上变成手形*/

}

#nav li:last-child{ /*#nav下的最后一个li*/

border-right:#C9CBCE solid 1px;

}

#nav .liclick{

border-top:#54B82A solid 2px;

border-bottom:none;

}

#nav span{

width:100%;

height:38px;

display:block; /*只有块显示标记才能设置宽度和高度*/

position:relative; /*相对定位，目的为了span可以移动*/

z-index:-1; /*设置span上下层的顺序，让它在文字的下面*/

}

</style>

$(document).ready(function(e) {

//点击li

$('#nav li').click(function(e) {

$('.liclick').removeClass('liclick');

$(this).addClass('liclick');

});

//每个li下面添加一个底色

var color=['#B9D329','#C0EBF7','#B9D329','#69BCF3','#79D9F3','#FA5F94','#ACD180','#FAB4CC','#FFAE5B'];

$('#nav li').append('<span>');

$('#nav span').each(function(index, element) {

$(this).css('background-color',color[index]);

});

//移动到li上的时候颜色色块升起

$('#nav li').hover(function(){

$(this).children('span').animate({'top':-38},200);

//获得当前li的索引编号

var index=$(this).index();

$('audio').get(index).play(); //播放第index个音乐

},function(){

$(this).children('span').animate({'top':0},200);

});

</script>

</head>

<body>

</ul>

</body>

相关例题：http://pan.baidu.com/s/1hsDGA8k 密码：55ic

.<h1></h1>:标题

2.<strong></strong>:加粗

<em></em>:斜线

<ins></ins>:下划线

<del></del>:删除线

3.<div></div>:一个占一行的格子

<span></span>：一个占一格的格子

4.<p></p>:一个段落

</br>:单标签换行

5.<img src=”图像的路径和文件名”/>:图像标签注意：图片要和vscode放在一个文件夹

alt:替换文本图像显示不出来的时候用文字替换 (显示不出来就是地址填错啥的)

使用方法：<img src=”图像的路径和文件名” alt=“这是一个魔方的图片” />

Title：提示文本鼠标放到图像上提示的文字

使用方法：<img src=”图像的路径和文件名” alt=“这是一个魔方的图片” title=” 这是一个魔方的图片“ />

6.<width>:设定图像宽度

<height>:设定图像高度

<border>:给图像设定边框

/:下一级

../:上一级

7.<a></a>:链接标签

<a href=”外部链接or内部链接” target=”打开窗口的方式1._self 当前窗口打开页面 2._blank 新窗口打开页面”/> 默认是_self

<a href=”#”></a>:空链接

<a href=”压缩包的名称”></a>:下载链接

<a herf=”外部链接”><img src=”图片地址名称”></a>:点击图片到外部链接

锚点链接：点击链接快速到达页面的某个位置

8.注释<!—“”--> 快捷键：ctrl+/

9.特殊字符： :空格

<：小于号<

>: 大于号>

8.<th></th>:表头单元格内部字会居中并且加粗

<tr></tr>:行

<td></td>:列

Cellpadding=””：文字与单元格之间的间隙

Rowspan:跨行合并单元格

Colspan:跨列合并单元格

Align=“center left right”:让表格所在页面的位置

Border：边框

Cellspacing:单元格与边框之间的距离

<thead>：表格头部区域标签

<tbody>：表格主题区域标签

Bgcolor：表格背景颜色

<input type=”text”>：一个框

<intput type=”checkbox”>:勾选正方形框

<input type=”radio”>:勾选圆圈框

若有不足，请大佬出手指点。

TML前端开发最终取决于掌握标签的多少

HTML大概有七八百个标签

楼主这里给大家总结了下HTML常用标签

标签描述

定义注释。

<!DOCTYPE> 定义文档类型,所有H5都是这玩意打头。

<a>定义锚。

<abbr>定义缩写。

<acronym>定义只取首字母的缩写。

<address>定义文档作者或拥有者的联系信息。

<applet>不赞成使用。定义嵌入的 applet。

<area>定义图像映射内部的区域。

<article>定义文章。

<aside>定义页面内容之外的内容。

<audio>定义声音内容。

<b>定义粗体字。

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

<basefont>不赞成使用。定义页面中文本的默认字体、颜色或尺寸。

<bdi>定义文本的文本方向，使其脱离其周围文本的方向设置。

<bdo>定义文字方向。

<big>定义大号文本。

<blockquote>定义长的引用。

<body>定义文档的主体。

<br>定义简单的折行。

<button>定义按钮 (push button)。

<canvas>定义图形。

<caption>定义表格标题。

<center>不赞成使用。定义居中文本。

<cite>定义引用(citation)。

<code>定义计算机代码文本。

<col>定义表格中一个或多个列的属性值。

<colgroup>定义表格中供格式化的列组。

<command>定义命令按钮。

<datalist>定义下拉列表。

<dd>定义定义列表中项目的描述。

<del>定义被删除文本。

<details>定义元素的细节。

<dir>不赞成使用。定义目录列表。

<div>定义文档中的节。

<dfn>定义定义项目。

<dialog>定义对话框或窗口。

<dl>定义定义列表。

<dt>定义定义列表中的项目。

<em>定义强调文本。

<fieldset>定义围绕表单中元素的边框。

<figcaption>定义 figure 元素的标题。

<figure>定义媒介内容的分组，以及它们的标题。

<font>不赞成使用。定义文字的字体、尺寸和颜色。

<footer>定义 section 或 page 的页脚。

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

<frame>定义框架集的窗口或框架。

<frameset>定义框架集。

<h1> to <h6>定义 HTML 标题。

<head>定义关于文档的信息。

<header>定义 section 或 page 的页眉。

<hr>定义水平线。

<html>定义 HTML 文档。

<i>定义斜体字。

<img>定义图像。

<input>定义输入控件。

<ins>定义被插入文本。

<isindex>不赞成使用。定义与文档相关的可搜索索引。

<kbd>定义键盘文本。

<keygen>定义生成密钥。

<label>定义 input 元素的标注。

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

<li>定义列表的项目。

<map>定义图像映射。

<mark>定义有记号的文本。

<menu>定义命令的列表或菜单。

<menuitem>定义用户可以从弹出菜单调用的命令/菜单项目。

<meter>定义预定义范围内的度量。

<nav>定义导航链接。

<noframes>定义针对不支持框架的用户的替代内容。

<ol>定义有序列表。

<optgroup>定义选择列表中相关选项的组合。

<option>定义选择列表中的选项。

<output>定义输出的一些类型。

<p>定义段落。

<param>定义对象的参数。

<pre>定义预格式文本。

<progress>定义任何类型的任务的进度。

<q>定义短的引用。

<rp>定义若浏览器不支持 ruby 元素显示的内容。

<rt>定义 ruby 注释的解释。

<ruby>定义 ruby 注释。

<s>不赞成使用。定义加删除线的文本。

<samp>定义计算机代码样本。

<section>定义 section。

<select>定义选择列表（下拉列表）。

<small>定义小号文本。

<source>定义媒介源。

<span>定义文档中的节。

<strike>不赞成使用。定义加删除线文本。

<strong>定义强调文本。

<sub>定义下标文本。

<summary>为 <details> 元素定义可见的标题。

<sup>定义上标文本。

<table>定义表格。

<tbody>定义表格中的主体内容。

<td>定义表格中的单元。

<textarea>定义多行的文本输入控件。

<tfoot>定义表格中的表注内容（脚注）。

<th>定义表格中的表头单元格。

<thead>定义表格中的表头内容。

<time>定义日期/时间。

<title>定义文档的标题。

<tr>定义表格中的行。

<track>定义用在媒体播放器中的文本轨道。

<tt>定义打字机文本。

<u>不赞成使用。定义下划线文本。

<ul>定义无序列表。

<var>定义文本的变量部分。

<video>定义视频。

<wbr>定义可能的换行符。

<xmp>不赞成使用。定义预格式文本。

标签描述

<!DOCTYPE> 定义文档类型。

<html>定义 HTML 文档。

<title>定义文档的标题。

<body>定义文档的主体。

<h1> to <h6>定义 HTML 标题。

<p>定义段落。

<br>定义简单的折行。

<hr>定义水平线。

定义注释。

格式

标签描述

<acronym>定义只取首字母的缩写。

<abbr>定义缩写。

<address>定义文档作者或拥有者的联系信息。

<b>定义粗体文本。

<bdi>定义文本的文本方向，使其脱离其周围文本的方向设置。

<bdo>定义文字方向。

<big>定义大号文本。

<blockquote>定义长的引用。

<center>不赞成使用。定义居中文本。

<cite>定义引用(citation)。

<code>定义计算机代码文本。

<del>定义被删除文本。

<dfn>定义定义项目。

<em>定义强调文本。

<font>不赞成使用。定义文本的字体、尺寸和颜色

<i>定义斜体文本。

<ins>定义被插入文本。

<kbd>定义键盘文本。

<mark>定义有记号的文本。

<meter>定义预定义范围内的度量。

<pre>定义预格式文本。

<progress>定义任何类型的任务的进度。

<q>定义短的引用。

<rp>定义若浏览器不支持 ruby 元素显示的内容。

<rt>定义 ruby 注释的解释。

<ruby>定义 ruby 注释。

<s>不赞成使用。定义加删除线的文本。

<samp>定义计算机代码样本。

<small>定义小号文本。

<strike>不赞成使用。定义加删除线文本。

<strong>定义语气更为强烈的强调文本。

<sup>定义上标文本。

<sub>定义下标文本。

<time>定义日期/时间。

<tt>定义打字机文本。

<u>不赞成使用。定义下划线文本。

<var>定义文本的变量部分。

<wbr>定义可能的换行符。

表单

标签描述

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

<input>定义输入控件。

<textarea>定义多行的文本输入控件。

<button>定义按钮。

<select>定义选择列表（下拉列表）。

<optgroup>定义选择列表中相关选项的组合。

<option>定义选择列表中的选项。

<label>定义 input 元素的标注。

<fieldset>定义围绕表单中元素的边框。

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

<isindex>不赞成使用。定义与文档相关的可搜索索引。

<datalist>定义下拉列表。

<keygen>定义生成密钥。

<output>定义输出的一些类型。

框架

标签描述

<frame>定义框架集的窗口或框架。

<frameset>定义框架集。

<noframes>定义针对不支持框架的用户的替代内容。

图像

标签描述

<img>定义图像。

<map>定义图像映射。

<area>定义图像地图内部的区域。

<canvas>定义图形。

<figcaption>定义 figure 元素的标题。

<figure>定义媒介内容的分组，以及它们的标题。

音频/视频

标签描述

<audio>定义声音内容。

<source>定义媒介源。

<track>定义用在媒体播放器中的文本轨道。

<video>定义视频。

链接

标签描述

<a>定义锚。

<nav>定义导航链接。

列表

标签描述

<ul>定义无序列表。

<ol>定义有序列表。

<li>定义列表的项目。

<dir>不赞成使用。定义目录列表。

<dl>定义定义列表。

<dt>定义定义列表中的项目。

<dd>定义定义列表中项目的描述。

<menu>定义命令的菜单/列表。

<menuitem>定义用户可以从弹出菜单调用的命令/菜单项目。

<command>定义命令按钮。

表格

标签描述

<table>定义表格

<caption>定义表格标题。

<th>定义表格中的表头单元格。

<tr>定义表格中的行。

<td>定义表格中的单元。

<thead>定义表格中的表头内容。

<tbody>定义表格中的主体内容。

<tfoot>定义表格中的表注内容（脚注）。

<col>定义表格中一个或多个列的属性值。

<colgroup>定义表格中供格式化的列组。

样式/节

标签描述

<div>定义文档中的节。

<span>定义文档中的节。

<header>定义 section 或 page 的页眉。

<footer>定义 section 或 page 的页脚。

<section>定义 section。

<article>定义文章。

<aside>定义页面内容之外的内容。

<details>定义元素的细节。

<dialog>定义对话框或窗口。

<summary>为 <details> 元素定义可见的标题。

元信息

标签描述

<head>定义关于文档的信息。

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

<basefont>不赞成使用。定义页面中文本的默认字体、颜色或尺寸。

编程

标签描述

<applet>不赞成使用。定义嵌入的 applet。

<param>定义对象的参数。

属性描述

accesskey规定激活元素的快捷键。

class规定元素的一个或多个类名（引用样式表中的类）。

contenteditable规定元素内容是否可编辑。

contextmenu规定元素的上下文菜单。上下文菜单在用户点击元素时显示。

data-*用于存储页面或应用程序的私有定制数据。

dir规定元素中内容的文本方向。

draggable规定元素是否可拖动。

dropzone规定在拖动被拖动数据时是否进行复制、移动或链接。

hidden规定元素仍未或不再相关。

id规定元素的唯一 id。

lang规定元素内容的语言。

spellcheck规定是否对元素进行拼写和语法检查。

style规定元素的行内 CSS 样式。

tabindex规定元素的 tab 键次序。

title规定有关元素的额外信息。

translate规定是否应该翻译元素内容。

在线咨询

上一篇：什么是APP封装？APP封装如何实现？
下一篇：html中超链接标签的使用手册

您的项目需求

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

整合营销服务商

HTML5入门

您的项目需求