HTML5
用于绘画的canvas标签
用于媒介回放的video和audio元素
新的特殊元素:article,footer, header, nav, section
新的表单控件:calender,date, time,Email,url, search
浏览器支持,IE9以后
本地离线存储的更好的支持
开发环境:http://www.jetbrains.com/idea/
基础知识:
<!DOCTYPE html>
html5声明,代表当前是html5的版本
基础标签:
<!DOCTYPE html><html><head lang="en"> <!--文字的显示形式,zh表示中文--> <meta charset="UTF-8"> <!--编码格式--> <title>html5</title><!--标题--></head><body><!--页面内容--> Thystar <h1>Thystar</h1><!--h1...h6表示字体大小--> <h3>Thystar</h3> <h6>Thystar</h6> <!--段落标签,定义一段文字--> <p>hello thystar</p> <!--链接标签--> <a href="http://www.baidu.com">baidu</a> <!--图像标签--> <img src="img/qi.png"> <!--空标签--> html<br/></body></html>
html5元素,属性及格式化
html元素:从开始标签到结束标签的所有代码
<p>hello thystar</p><!--空标签-->html<br/>
html的代码是可以嵌套的:
<p>hello thystar<a href="http://www.baidu.com">baidu</a></p>
html属性
标签可以拥有属性为元素提供更多的信息
属性以键值对的形式出现:href="http://www.baidu.com"
-
常用的属性标签
<h1>:align对齐方式
<body>:bgcolor背景颜色
<a>:target规定在何处打开连接
-
通用属性:
class:规定元素的类名
id:规定元素的唯一ID
style:规定元素的样式
title:规定元素的额外信息
<body bgcolor="#ffebcd"><!--页面内容--> <a href="hrefht.html" target="_blank">open</a> <h1 align="center">Thystar</h1><!--h1...h6表示字体大小--> <h2 id="h2ID">thystar</h2></body>
html格式化:
标签 | 描述 |
<b> | 定义粗体字。 |
<big> | 定义大号字 |
<em> | 着重文字 |
<i> | 斜体字 |
<small> | 小号字 |
具体参考:http://www.w3school.com.cn/tags/index.asp
<body bgcolor="#ffebcd"><!--页面内容--> welcome jike <b>welcome jike</b> <br/> <big>welcome jike</big> <br/> <em>welcome jike</em> <br/> <i>welcome jike</i> <br/> <small>welcome jike</small> <br/> <strong>welcome jike</strong> <br/> welcome<sub>welcome jike</sub> <br/> welcome<sup>welcome jike</sup> <br/> <ins>welcome jike</ins> <br/> <del>welcome jike</del></body>
html5的样式:
1.标签:
<style>:样式定义
<link>: 资源引用
2.属性:
rel="stylesheet":外部样式表
type="text/css":引入文档的类型
margin-left:边距
样式的插入方法:
-
外部样式表:
-
<link rel="stylesheet" type="text/css" href="mystyle.css">
-
-
内部样式表:
<style type="text/css">body{background-color:red}p{margin-left:20px}</style>
-
内联样式表:
<p style="color:red">
对于外部样式表:定义css文件mystyle.css
h1{ color : chartreuse;}
在.html文件中引入:
<!DOCTYPE html><html><head lang="en"> <!--文字的显示形式,zh表示中文--> <meta charset="UTF-8"> <!--编码格式--> <title>html5</title><!--标题--> <link rel="stylesheet" type="text/css" href="mystyle.css"><!--外部样式表--> <style type="text/css"><!--内部样式表--> p{ color: blueviolet; } </style></head><body bgcolor="#ffebcd"><!--页面内容--> <h1>weclome jike</h1> <p>weclome to jike</p> <a style="color: darkgreen">click</a><!--内联样式表--></body></html>
html链接:
1.链接数据:
文本链接
图片链接
2.属性:
href属性:指向另一个文档的链接
name属性:创建文档内的链接
3.img属性:
alt:替换文本属性
width:宽
height:高
<body> <a href="http://www.baidu.com">click</a> <a href="http://www.baidu.com"> <img src="img/qi.png" width="100px" height="100px" alt="logo"> </a> <br/> <a name="tips">hello</a> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/> <a href="#tips">跳转到hello</a></body>
html表格:
http://www.w3school.com.cn/tags/html_ref_byfunc.asp
<body> <table border="1"> <caption>表格</caption> <tr> <th> 单元 </th> <th> 单元 </th> <th> 单元 </th> </tr> <tr> <td>单元格</td> <td></td> <td>单元格</td> </tr> <tr> <td> <ul> <li>苹果</li> <li>苹果</li> <li>苹果</li> </ul> </td> <td>单元格</td> <td>单元格</td> </tr> </table> <table border="1" cellpadding="10" cellspacing="10" background="img/qi.png" > <caption>表格</caption> <tr> <th> 单元 </th> <th> 单元 </th> <th> 单元 </th> </tr> <tr> <td>单元格</td> <td></td> <td>单元格</td> </tr> <tr> <td> <ul> <li>苹果</li> <li>苹果</li> <li>苹果</li> </ul> </td> <td>单元格</td> <td>单元格</td> </tr> </table></body>
极客学院:http://www.jikexueyuan.com/course/181.html