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．头部内容
标签用于表示网页的元数据，即描述网页的基本信息。其中主要包含以下标签：-
标签用于定义页面的标题，是成对标记。 - 标签用于定义页面的相关信息，为非成对标记。 1. charset 属性：设置文档的字符集编码格式。 ```HTML ```
-
http-equiv 属性：将信息写给浏览器看，让浏览器按照这里面的要求执行，可选属性
值有 Content-Type（文档类型）、refresh（网页定时刷新）、set-cookie（设置浏览器 cookie 缓
存），需要配合 content 属性使用。<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> -
name 属性：将信息写给搜索引擎看。
<!--作者--> <meta name="author" content="http://www.jredu100.com" /> <!--网页关键字：多个关键字用英文逗号分隔--> <meta name="keywords" content="HTML5,网页,Web 前端开发" /> <!--网页描述：搜索网站时，title 下面的解释文字。--> <meta name="description" content="这是我在杰瑞教育开发的第一个网页。" />
-
-
使用标签可以加载一个图片作为网页图标。标签有如下属性：
- rel 属性：声明被链接文件与当前文件的关系，此处选 icon。
- type 属性：声明被链接文件的类型，可以省略。
- href 属性：表示图片的路径地址。
<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>一级标题：
标签：网页,标签,表单,学习,HTML5,按钮,属性
来源： https://blog.csdn.net/qq_52972663/article/details/123591148
本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。