1、html5新特性:
- 绘画标签canvas;
- 用于媒介回放的video和audio;
- 对本地离线存储更好的支持;
- 新的特殊内容元素: article 、 footer 、 header 、 nav 、 section ;
- 新的表单元素: calender 、 date 、 time 、 email 、 url 、 search ;
-浏览器的支持 Safari 、 Chrome 、 Firfox 、 Opera包括IE9基本支持HTML5.
2、html5开发环境搭建 IDEA。
- IDEA的基本使用方法,首先new 一个Static Web -->>Static Web -->>next ;
- 编辑项目Name and project Path -->>finish;
- 新建相关html文件 -->>编辑相关内容–>>运行;
- 选择相应浏览器运行当前html文件;
3、html5基础;
- 声明: (头文件) html5 和 html4.xx 之间声明方式都有所不同;
- html基础标签:
<head> <meta charset="utf-8"> -->>编码格式指定 </head> ; <body></body>;
- 标题:
<h1>标题</h1> <h2>标题</h2> <h2>标题</h2> .... <h6></h6>;
- 段落:
<p>段落:定义一段文字;</p>
- 超链接:
<a href="http://www.baidu.com">百度</a>
- 图像:
<img src="图片地址"></img>
元素、属性、格式化:
-
元素:从开始标签到结束标签的所有代码;
语法:元素的内容是开始标签与结束标签之间的内容;空元素在开始标签中进行关闭;大多数元素可拥有属性;
嵌套的HTML元素:大多数的html元素都是可以嵌套的;
<div> <p> </p> </div> ...
注:
(<br />-->> 换行, 空元素)
- 属性:标签可以拥有属性为元素提供更多的信息;
属性以键/值的形式出现:
eg:href = “http://www.baidu.com”
常见的标签属性:
align – 对齐方式
bgcolor-- 背景颜色 background – 背景图片
target – 规定在何处打开连接 _self:当前窗口打开 _back – 开辟一个新的窗口打开新的界面
通用属性:
class – 元素类名
id – 元素唯一ID
style – 元素样式
title – 元素的额外信息
格式化:
- big 在html5 中被淘汰
4、html5的样式:
- style – 样式定义
- link – 资源引用
- rel = “stylesheet” – 外部样式表
- type = “text/css” – 引入文档的类型
- margin-left – 边距
- 三种样式插入方式:
外部样式表:
<link rel = "stylesheet" typr = "text/css" hred = "mycss.css">
内部样式表:
<style type = "text/css"> body{.......}</style>
内联样式表:
<p style= "color : red"></p>
5、html5的连接:
- 连接数据:
- 文本连接:
<a href = "http://baidu.com">百度</a>
- 图片连接:
<a href = "http://baidu.com"> <img src = "images/1.jpg"></img></a>
- 属性:
href属性:指向另外一个文档的连接;
name属性:创建文档内的连接;
<a name = "tips">hello</a>
<a href = "#tips">跳转到hello</a>
img标签属性:
alt – 替换文本属性
width – 宽
height – 高
<a href = "http://baidu.com"> <img src = "images/1.jpg" alt = “百度” width = “100px” height = “100px”></img></a>
6、html5中表格:table
- 声明:
<table border = "1"> <!-- border -- 边框 -->
<caption>表格</caption> <!-- 表格的标题 -->
<tr>
<ht></ht> <!-- 表头 -->
<ht></ht>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
- 单元格内的边距、单元格之间的间距:
<table vorder = "1" cellpadding = "10"></table>
cellpadding = “10”
cellpacing = “10” 单元格之间的间距
7、html5的列表、块、布局
- 列表:
<ul> <li></li></ul> 有序列表 属性: A a I i start
<ol><li></li></ol> 无需列表
嵌套列表
- 块:
- html块元素:块元素在显示时,通常会以新行开始 h1 p ul
- 内联元素:通常不会以新的行开始 b a img
- div元素:也被称为块元素,其主要是组合html元素的容器
- span元素:内联元素,可作为文本的容器
- html的布局:
- div布局:
- table布局:
评论区