HTML5学习
HTML5 与 HTML4 的区别
- 语法简单
在 HTML5 中，头部只需要写即可。 - 新增语义化标签
新增加的语义化标签（如等）使得网页的可读性变得更 高，也更加明确地表示出网页的结构， - 新的媒体标签
新的和标签可以用来嵌入音频文件和视频文件。 - 使用画布标签绘制图形
标签具有绘图功能，通过与 JavaScript 脚本的搭配，可在网页上绘制图像。 - 新的表单设计
表单增加了新元素，也为表单元素增加了许多新属性。 - 废除了一些旧标签
废除了一些标签，其中大部分为网页美化标签。
学习 HTML5 前的准备工作
常用浏览器介绍
**浏览器**是指可以显示网页服务器或者文件系统的HTML 文件（标准通用标记语言的一个应用）内容，并可以让用户与 HTML 文件交互的一种软件。
1.常用浏览器
- Internet Explorer 是微软公司推出的一款网页浏览器。
- Google Chrome 是由 Google 公司开发的一款网页浏览器。Google Chrome 的特点是简洁、快速。
- Mozilla Firefox 中文俗称“火狐”，Mozilla Firefox 中文俗称“火狐”。
2.浏览器内核介绍
- 渲染引擎负责获取网页内容（HTML、XML、图像等）、整理信息（如加入 CSS等）以及计算网页的显示方式，然后输出至显示器或打印机。
- JavaScript 引擎负责解析和执行 JavaScript 来实现网页的动态效果。
常见的 HTML5 开发软件介绍
- VScode（推荐）
该软件支持语法高亮、代码自动补全（又称 IntelliSense）、代码重构、查看定义功能，并且内置了命令行工具和 Git 版本控制系统。用户可以更改主题和键盘快捷方式实现个性化设置，也可以通过内置的扩展程序商店安装扩展以拓展软件功能。 - HBuilder
快是 HBuilder 的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、JavaScript、CSS 的开发效率。同时，它还包括最全面的语法库和浏览器兼容性数据。 - Dreamweaver
集网页制作和网站管理功能于一身的所见即所得网页代码编辑器 - WebStorm
WebStorm 被广大中国JavaScript 开发者誉为“Web 前端开发神器”“最强大的 HTML5 编辑器”“最智能的 JavaScript IDE”等。 - Notepad++
有完整的中文化接口并支持多国语言编写的功能（UTF8 技术）
HTML5 的语法与结构
1.HTML5 标签
标签是 HTML5 最基本单位和最重要的组成。
<hr/> <!--单标记 也叫自结束标记-->
<title></title> <!--标准标记，前面是开始标记，后面是结束标记，标记可以嵌套，但不能交叉嵌套-->
2.HTML5 标签属性
<img src=“../image/a.png” width=“100” height=“100”/>
<!-- 结构是 属性名=”属性值” -->
3．HTML5 文档注释
浏览器不会对注释内容进行解析并呈现到页面上，只有查看HTML5 文件源代码时才会看到注释。
<!-- 这是 HTML5 注释-->
HTML5 的文档结构
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8" />
<title>我的第一个网页</title>
</head>
<body>
Hello World！
</body>
</html>
1．头部内容
标签用于表示网页的元数据，即描述网页的基本信息。其中主要包含以下标签：-
<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>用于定义<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>的<a href="https://www.jb51.cc/tag/biaoti/" target="_blank" class="keywords">标题</a>，是成对<a href="https://www.jb51.cc/tag/biaoji/" target="_blank" class="keywords">标记</a>。 - 标签用于定义页面的相关信息，为非成对标记。 1. charset 属性：设置文档的字符集编码格式。 ```HTML ```
-
http-equiv 属性：将信息写给浏览器看，让浏览器按照这里面的要求执行，可选属性
值有 Content-Type（文档类型）、refresh（网页定时刷新）、set-cookie（设置浏览器 cookie 缓
存），需要配合 content 属性使用。<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> -
<!--作者--> <Meta name="author" content="http://www.jredu100.com" /> <!--网页关键字：多个关键字用英文逗号分隔--> <Meta name="keywords" content="HTML5,网页,Web 前端开发" /> <!--网页描述：搜索网站时，title 下面的解释文字。--> <Meta name="description" content="这是我在杰瑞教育开发的第一个网页。" />
-
-
<link rel="icon" type="image/x-icon" href="img/icon.jpg" />
2.主题内容
<body>
<header>网站主题</header>
<nav>连接菜单</nav>
<article>
主内容
<section>
章节段落
</section>
</article>
<aside>侧边栏</aside>
<footer>页脚</footer>
</body>
HTML5 常见的块级标签和行级标签
常见的块级标签
块级标签，顾名思义，此类标签在网页中显示为块。块级标签一般独占一行，新的块级
标签将从新的一行开始排列，它可以容纳内联元素和其他块级元素。
<h1></h1>···<h6></h6>:标题标签<hr/>：水平线标签<p></p>：段落标签<br/>：换行标签<pre></pre>：预格式标签<ul><li></li></ul>：无序列表标签<ol><li></li></ol>：有序列表标签<div></div>：分区标签
<h1>一级标题：
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
