内容提纲
- html5简介
- html5历史
- html5语法
- html5规范
- html5标记
html简介
超文本标记语言
html简介
结构标准语言
html简介
网页文件基石
html历史
html5特性
开发环境介绍
开发工具 ：SublineText, Eclipse, HBuilder， WebStorm
运行环境 ：浏览器
调试工具 ：浏览器开发者工具
初识HTML5
HTML5基本语法
HTML5标记
html文件架构
html标记（标签）、html元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
<p></p>
</body>
</html>
html元素
html语法
语法规则
<!-- 标签名、属性名均为小写 -->
<!-- 双标签必须关闭 -->
<双标签 属性名="属性值" 无值属性></双标签>
<a href="//github.com/zptcsoft" title="欢迎follow我！">follow me</a>
<!-- 单标签必须关闭 -->
<!-- 部分标志性属性的属性值可以省略，见P8表1-1 -->
<单标签 属性名="属性值" 无值属性>
<input type="text" value="无值属性用法" disabled>
<a href="//github.com/zptcsoft" title="欢迎follow我！">follow me</a>
<input type="text" value="无值属性用法" disabled>
嵌套规则
<!-- 标签正确嵌套，二级菜单为例 -->
<nav role="navigation">
<ul class="nav">
<li><a href="#">网站首页</a></li>
<li><a href="#" class="has-submenu">新闻公告</a>
<ul class="submenu">
<li><a href="#">企业新闻</a></li>
<li><a href="#">通知公告</a></li>
</ul>
</li>
<li><a href="#" class="has-submenu">服务项目</a>
<ul class="submenu">
<li><a href="#">网站建设</a></li>
<li><a href="#">移动应用</a></li>
<li><a href="#">互联网运维</a></li>
</ul>
</li>
<li><a href="#">服务宗旨</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
html标记
<<<<<<< HEAD:ppt/publish/52.htm单标记:<标记名/> eg：<hr/>
双标记:<标记名>内容</标记名> eg：<h2>跟我学h5</h2>
=======
单标记:<标记名/> eg：<hr/>
双标记:<标记名>内容</标记名> eg：<h2>跟我学h5</h2>
>>>>>>> 56d79b620e9208508748b082133dc6019fa61b92:ppt/publish/52.html
注释标记:便于代码阅读 eg：<!--这是一段注释-->
标记的属性
语法格式:<标记名 属性1=“属性值1” 属性2=“属性值2” ...>内容</标记名>
eg:<h1 align="center" >标题文本<h1>
注意事项：
- 标记可以拥有多个属性，必须写在开始标记中，位于标记名后面。
- 属性之间不分先后顺序，标记名与属性、属性与属性之间均以空格分开。
- 任何标记的属性都有默认值，省略该属性则取默认值。
练一练
制作P11 图1-8页面效果
HTML5文档头部相关标记
标记<title>：用于定义HTML页面的标题
标记<meta />：单标记，用于定义页面的元信息，可重复出现在头部标记中
注意：<meta />标记本身不包含任何内容，通过“名称/值”的形式成对的使用其属性可定义页面的相关参数，例如为搜索引擎提供网页的关键字、作者姓名、内容描述，以及定义网页的刷新时间等。
<<<<<<< HEAD:ppt/publish/52.htm
标记：用于引用外部文件，一个页面允许使用多个<link>标记引用多个外部文件。
=======
标记<link>：用于引用外部文件，一个页面允许使用多个<link>标记引用多个外部文件。
>>>>>>> 56d79b620e9208508748b082133dc6019fa61b92:ppt/publish/52.html
eg：<link rel="stylesheet" type="text/css" href="style.css" />
标记<style>：用于为HTML文档定义样式信息，表示使用内嵌CSS样式
标记<meta />用法示例
设置网页关键字
eg：<meta name="keywords" content="java培训,.net培训,PHP培训,C/C++培训,iOS培训,网页设计培训,平面设计培训,UI设计培训" />
设置网页描述
eg：<meta name="description" content="IT培训的龙头老大,口碑最好的java培训、.net培训、php培训、C/C++培训,iOS培训，网页设计培训，平面设计培训，UI设计培训机构，问天下java培训、.net培训、php培训、C/C++培训,iOS培训，网页设计培训，平面设计培训，UI设计培训机构谁与争锋? " />
eg：<meta name="author" content="传智播客网络部" />
设置字符集
eg：<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
设置页面自动刷新与跳转
eg：<meta http-equiv="refresh" content="10;url=http://www.itcast.cn" />
标记<style>用法案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>style标记的使用</title>
<style type="text/css">
h2{color:red;}
p{color:blue}
</style>
</head>
<body>
<h2>使用内嵌css样式设置h2标题</h2>
<p>使用内嵌css样式设置段落</p>
</body>
</html>