家好，我是新媒之声广告工作室的大白，今天给大家带来的是HTML5简单教学第一章（第二节）。

今天给大家带来的东西比较多；

br 换行标签实属单标签，br换行标签就如同我们编辑文本是点击的回车键，让它换到下一行。

HTML5 <br/>标签用来对文档中的文本进行换行的处理，请参考下面的这个例子：

以下代码标记一个换行：

<p> 使用 br 元素<br>在文本中<br>换行。 </p>

所有主流浏览器都支持 <br> 标签。

标签定义及使用说明

<br> 标签插入一个简单的换行符。

<br> 标签是一个空标签，意味着它没有结束标签。

提示：由于<br>标签是空标签，因此，不允许有“<br>...</br>”这样的写法！

提示和注释

提示：在写地址信息或者写诗词时 <br> 标签非常有用。

注释： 请使用 <br> 标签来输入空行，而不是分割段落。

HTML 4.01 与 HTML5之间的差异无。

HTML 与 XHTML 之间的差异

在 HTML 中，<br> 标签没有结束标签。

在 XHTML 中，<br> 标签必须被正确地关闭，比如这样：<br /> 。

nobr 不换行是属于双标签，nobr就是强制不换到下一行，在做编辑时文字或是块遇到浏览器的边会自动换到下一行使用不换行标签就强制它不让换行，这是浏览器底部就会出现航向滚动条。

p 段落标签也是属于双标签，p标签是文字标签，故名思议就是用于写文字段落的标签，p标签是属于块标签，就是独自占据一行，在下节课会介绍到块标签与行标签。

HTML5 <p>标签用于定义一个段落。

目前大多数浏览器支持 <p>标签。

标签定义及使用说明

<p> 标签定义段落。

<p>元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。

提示：在本站的HTML5编程实战中，你可以练习使用<p>标签！

在HTML 4.01 与 HTML5中的差异

HTML 4.01中标签的 align 属性已经废弃，HTML5不支持该属性。

p 段落,align属性:left|center|right，是标签属性，属性有事css样式，css样式又可以通俗的理解为房子的装修，html通俗可以理解为房子的框架，div又可以通俗的理解为房子的填充砖块之类的。

所有主流浏览器都支持 align 属性。

定义和用法

HTML5 不支持 <p> align 属性。请使用 CSS 代替。

在 HTML 4.01 中，<p> 的 align 属性已废弃。

align 属性规定段落中文本的对齐方式。

兼容性注释

在 HTML 4.01 中，<p> 的 align 属性已废弃，请使用 CSS 代替。

CSS 语法：<p style="text-align:right">

CSS 实例：在段落中右对齐文本

在我们的 CSS 教程中，您可以找到更多有关 text-align 属性 的细节。

语法

<p align="left|right|center|justify">

属性值

center 居中是属于双标签，双标签就是成对出现的标签，center居中标签的意思就是让它位于浏览器的中心位置，就好比是wps的文字居中一个道理，不过居中标签是可以让它体内所有的标签都可以居中。

HTML <center> 标签 - HTML 5 不支持

<center> 标签控制文本的居中显示，不能在 HTML5 中使用。

所有主流浏览器都支持 <center> 标签。

标签定义及使用说明

HTML5 不支持 <center> 标签。请用 CSS 代替。

在 HTML 4.01 中，<center> 元素已废弃。

<center> 对其所包括的文本进行水平居中。

提示和注释

提示：请使用 CSS 样式来居中文本！在 CSS 教程中您能了解到更多关于居中文本的细节。

HTML 4.01 与 HTML5之间的差异

HTML5 不支持 <center> 标签。请用 CSS 代替。

pre 按源代码显示是属于双标签不是很常用的标签，它的意思就是让标签直接不解析让浏览器表现出来，一般用于展示源代码。

HTML <pre> 标签

<pre> 标签可以保留您需要的文本格式，比如不会取消换行和空格，并且所示文本是等宽的。

目前大多数浏览器支持 <pre> 标签。

标签定义及使用说明

<pre> 标签可定义预格式化的文本。

被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

注意：<pre> 元素是块级元素，但是只能包含文本或行内元素，任何块级元素（常见为可以导致段落断开的标签：例如<title>、<p> 和<address> 标签）都不能位于 <pre> 元素中。

提示和注释

提示: <pre> 标签的一个常见应用就是用来表示计算机的源代码。

提示：<pre> 标签与 <code> 标签结合起来使用，可以获得更加精确的语义。

在HTML 4.01 与 HTML5中的差异

在 HTML 4.01 中，"width" 属性已废弃，不可使用。 HTML5 不支持"width"属性。

属性

全局属性

<pre> 标签支持全局属性，查看完整属性表 HTML全局属性。

ul 无序列表属于双标签，一般配合li标签使用，无序列表属和wps中表现是一样的不过无序列表中不只可以写文字和数字也可以写div之类的标签有的网页导航就是用ul无序列表标签写出来的。

HTML <ul> 标签

<ul> 标签表示HTML页面中项目的无序列表，一般会以项目符号列表呈现

所有主流浏览器都支持 <ul> 标签。

标签定义及使用说明

<ul> 标签定义无序列表。

将 <ul> 标签与 <li> 标签一起使用，创建无序列表。

提示和注释

提示：使用 CSS 为列表定义样式。

提示：使用 <ol> 标签创建有序列表。

HTML 4.01 与 HTML5之间的差异

在 HTML 4.01 中，"compact" 和 "type" 属性已废弃。HTML5 则不支持着两个属性。

属性

ol 有序列表标签和ul无序列表标签是一个道理，也是配合li标签使用唯一区别就是一个前面带点一个前面带阿拉伯数字。

HTML <ol> 标签

<ol> 标签在 HTML 中表示有序列表，是 ordered lists 的缩写。您可以自定义有序列表的初始序号

目前大多数浏览器支持 <ol> 标签。

标签定义及使用说明

<ol> 标签定义了一个有序列表. 列表排序以数字来显示。

使用<li> 标签来定义列表选项。

提示和注释

提示： 如果需要无序列表，请使用 <ul> 标签。

提示：使用 CSS 来定义列表样式。

HTML 4.01 与 HTML5中的差异

在 HTML 4.01 中"start" 和 "type" 属性已经废弃，HTML5不支持该属性。

"reversed" 属性是 HTML5 中的新属性。

在HTML 4.01中"compact" 属性已经废弃,在 HTML5中不支持该属性。

属性

New：HTML5 新属性。

dl 自定义列表 dt 自定义标题 dd 自定义列表内容这三个标签我放在一起讲因为这三个标签是配合在一起的用法和ul标签ol标签差不多，就不再过多的叙述了，一般用到的不是很多。

所有主流浏览器都支持 <dl> 标签。

标签定义及使用说明

<dl> 标签定义一个描述列表。

<dl> 标签与 <dt> （定义项目/名字）和 <dd> （描述每一个项目/名字）一起使用。

HTML 4.01 与 HTML5之间的差异

在 HTML 4.01 中，<dl> 标签定义一个定义列表。

在 HTML5 中，<dl> 标签定义一个描述列表。

HTML <dt> 标签

<dt> 标签只能够作为 <dl> 标签的一个子元素出现，常常后跟一个 <dd> 标签。

所有主流浏览器都支持 <dt> 标签。

标签定义及使用说明

• <dt> 标签定义一个描述列表的项目/名字。

  <dt> 标签与 <dl> （定义一个描述列表）和 <dd> （描述每一个项目/名字）一起使用。

  一行中的多个 <dt> 标签表示由紧邻的下一个 <dd> 元素定义的多个术语。

• ---

• HTML 4.01 与 HTML5之间的差异

  在 HTML 4.01 中，<dt> 标签定义一个定义列表的条目。

  在 HTML5 中，<dt> 标签定义一个描述列表的项目/名字。

  
  

  hr 导航线这节课最后一个标签是单标签，所谓的导航线不过就是一条横线用来分割。

  HTML <hr> 标签

  <hr> 标签表示段落级元素之间的主题划分。

  所有主流浏览器都支持<hr> 标签。

  ---

  标签定义及使用说明

  <hr>标签定义HTML页面中的主题变化（比如话题的转移），并显示为一条水平线。 元素被用来分隔HTML页面中的内容（或者定义一个变化）。

  ---

  HTML 4.01与HTML5之间的差异

  在HTML5中，<hr> 定义内容中的主题变化，并显示为一条水平线。

  在HTML 4.01中，<hr> 标签仅仅显示为一条水平线。

  在HTML 4.01中，的所有布局属性都已废弃。在HTML5中不再支持这些属性。请使用CSS来为<HR> 元素定义样式。

  ---

  HTML与XHTML之间的差异

  在HTML中，<hr> 标签没有结束标签。

  在XHTML中，<hr> 标签必须被正确地关闭，比如<hr /> 。

  ---

  属性

  属性	值	描述
  align	left center right	HTML5 不支持。HTML 4.01 已废弃。 规定 <hr> 元素的对齐方式
  noshade	noshade	HTML5 不支持。HTML 4.01 已废弃。 规定 <hr> 元素的颜色呈现为纯色。
  size	pixels	HTML5 不支持。HTML 4.01 已废弃。 规定 <hr> 元素的高度。
  width	pixels %	HTML5 不支持。HTML 4.01 已废弃。 规定 <hr> 元素的宽度。

  谢谢大家的观看，如果需要今天课程的源代码和ppt可以私信给我，我会免费发给你，最好使能够关注小编一下。

们都知道，想要成为一名合格的前端开发人员，掌握好HTML5是一个重要的先决条件，相比较于HTML，HTML5中新增了许多功能标签，那么这么标签都有哪些呢？

格式：

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

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

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

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

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

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

<ruby>定义 ruby 注释。

<time>定义日期/时间。

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

表单：

<datalist>定义下拉列表。

<keygen>定义生成密钥。

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

图像：

<canvas>定义图形。

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

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

音频和视频：

<audio>定义声音内容。

<source>定义媒介源。

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

<video>定义视频。

链接：

nav>定义导航链接。

列表：

<command>定义命令按钮。

样式：

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

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

<section>定义section。

<article>定义文章。

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

<details>定义元素的细节。

<dialog定义对话框或窗口。

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

编程：

<embed>为外部应用程序（非HTML）定义容器。

HTML5的优势：

1、做出更多好看的动画效果，让前端开发人员实现更好的页面交互

HTML5实现的网页更加的精美，这些动画是基于HTML5标签和CSS3样式共同实现的效果。

2、解决了跨浏览器问题

跨浏览器问题在HTML5出现之前，对于前端开发人员来说，绝对是一个噩梦级的问题。明明在一个浏览器中完全正常运行的HTML、CSS和JavaScript页面，但换一个浏览器之后，就会出现很多问题，比如：JavaScript运行出错、页面布局混乱等。改变了这种局面的正是HTML5编程语言，目前主流浏览器如Internet Explorer、Chorme、Firefox、Safari都表现出对HTML5的极大热情。

3、跨平台、离线使用

HTML5 可以做到跨平台，多数核心代码不用重写，JavaScript的代码用得好的话，在许多地方都可以用到，包括移动应用、移动网站、PC网站、各种浏览器插件，甚至可以用WebKit封装作为跨平台的应用程序。虽然这种方式在严格意义上来讲并非是完全跨平台，但这样也在后期的维护上可以节省出量的时间和精力。

用户可以离线使用、访问应用，这对于无法随时保持联网状态的移动终端用户来说是很重要的，且用户访问本地的缓存文件，通常意味着更快的访问速度，从这个角度来说，可谓是大大提高了用户的体验度。