本文介绍了HTML5的多项新特性，包括替代Flash的技术、跨平台能力、新增的canvas绘图、多媒体播放、本地存储支持及新内容元素与表单控件。同时，详细讲解了HTML5的基本结构、元素内容、语法规范以及常用属性。
HTML5
1.可代替Flash
2.跨平台
标记语言
新特性
1.用于绘画的canvas标签
2.用于媒介回放的video和audio标签
3.对本地离线储存的更好支持
4.新的内容元素
如 article footer header nav section
5.新的表单控件
如 calendar date time email url search
基础
1.声明<!DOCTYPE>
明白页面中的HTML版本
HTML5
<!DOCTYPE html>
2.HTML标题
<h1>.......<h6>等标签进行定义
3.HTML段落
<p>标签定义段落
4.HTML链接
<a>标签定义链接
5.HTML图像
<img>标签定义图像
<!DOCTYPE html>
<html lang="en">//英文显示
<head>
<meta charset="UTF-8">//编码格式UTF-8
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>//浏览器标题
</head>
<body>//页面内容
<h1>标题1</h1> //标题
<h2>标题2</h2>
<p>Hellow</p>//段落
<a href="http://www.w3cshol.com">学习</a>
<img src="index9.html/center-banner-bg.jpg">
</body>
</html>
1元素内容
<p>元素内容</p>
2元素语法
空元素在开始标签中进行关闭
<br/>为空元素
3.嵌套的HTML元素
大多数HTML元素都是可以被嵌套的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p><a>1</a></p>//标签的嵌套
1<br/>//换行
1
</body>
</html>
HTML属性
常见标签属性
<h1>:align对其方式
<body>:bgcolor背景颜色
<a>:target规定在何处打开链接
通用属性
class:规定元素的类名
id 规定元素的唯一ID
style 规定元素样式
title 规定元素的额外信息
background 设置背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body bgcolor="white">//背景色
<a href="index1.html" target="_blank">打开本地</a>//打开一个新的页面
<a href="index1.html" target="_self">打开本地</a>//打开本地 默认
<h2 class="h22">2</h2>
<h2 id="id1">3</h2>
<h1 align="center">居中</h1>
<h1 align="right">右</h1>
<h1 align="left">左</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<b>123</b>//加粗
<br>
<big>123</big>//大号字体
<br/>
<em>123</em>//着重
<br/>
<i>123</i>//斜体
<br/>
<small>123</small>//小号字
<br/>
<strong>123</strong>//加重
<br/>
12<sub>34</sub>56//上标
<br/>
12<sup>34</sup>56//下标
<br/>
<ins>34</ins>//插入字
<br/>
<del>34</del>//删除字
</body>
</html>
样式
1.标签
<style>样式定义
<link>资源引用
2.属性
rel="stylesheet":外部样式
type="text/css":引人文档类型
margin-left:边距
三种插入方法
外部样式表
<link rel="stylesheet" type="text/css" herf="mystyle.css">
内部样式表
<style type="text/css">//文件格式
body{
background-color:red}
p{margin-left:20px}
</style>
内联样式
<p style="color:red">//直接在标签内部改变其属性
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
