J2EE 基础篇 - @ - 2 Html5 基础详解
2015-05-23 23:12
225 查看
HTML5 基础：
1、声明：
1、HTML5 ------ <!DOCTYPE>
2、HTML4.01 ------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
3、XHTML 1.0 ------ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2、<head> 标签内容：
1、编码格式 ： <meta charset="UTF-8">
2、标题 ： <title></title>
3、问题的显示形式(en/zh) ：<head lang="en">
3、<body> 标签可包含更多的标签内容：
4、<h1~h6> 标题（大->小）
5、<p> 段落
6、<a href="http://www.baidu.com">百度</a> 超链接
7、<img src="/images/html5.png" alt="html5"> 图片
------------------------------------------------------------------------
HTML5 的元素、属性、格式化
1、HTML 元素
开始标签 元素内容 结束标签
<p> 段落 </p>
<br/>
2、HTML 属性
1、标签可以拥有属性为元素提供更多的信息
2、属性以键/值对的形式出现：href="www.baidu.com"
3、常用标签属性：
<h1 align="left">
<body bgcolor="red">
<body backgroup="image">
<a target="_blank">
4、通用属性：
class ：规定元素的类名
id ：规定元素的唯一ID
style：规定元素的样式
title：规定元素的额外信息
3、HTML 格式化
<b> 定义粗体文本
<big> 定义大号字 ---- depracted
<em> 定义着重文字
<i> 定义斜字体
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标
<sup> 定义上标
<ins> 定义插入字
<del> 定义删除字
------------------------------------------------------------------------
HTML 5样式的使用
1、标签：
<style> ：样式定义
<link>：资源引用
2、属性：
rel="stylesheet"：外部样式表
type="text/csss"：引入文档的类型
margin-left：边距
3、引入方式：
3.1 外部样式表：
<link rel="stylesheet" type="text/css" href="mystyle.css">
3.2 内部样式表：
<style type="text/css">
body{backgroud-color:red}
p{margin-left:200px}
</style>
3.3 内联样式表：
<p style="color:red>
------------------------------------------------------------------------
HTML 5 链接
1、链接数据：
1.1、文本链接
1.2、图片链接
2、属性：
2.1、href属性：指向另一个文档的链接
2.2、name属性：创建文档内的链接
3、img标签属性：
3.1、alt属性：替换图片显示
------------------------------------------------------------------------
HTML 5的表格
1、标签：
<table> 定义表格
<caption> 定义表格标题
<th> 定义表格表头
<tr> 定义表格的行
<td> 定义表格的列
<thead> 定义表格的页眉
<tbody> 定义表格的主题
<tfoot> 定义表格的页脚
<col> 定义表格的列属性
<row> 定义表格的行属性
2、属性：
<table> ：cellpadding 指定单元格内容的内边距
<table> ：border 指定边框
<table> ：cellspacing 指定单元格间距
<table> ：bgcolor 指定表格背景色
------------------------------------------------------------------------
HTML 5的列表、块、布局
1、HTML 5的列表
<ol> 有序列表
<ul> 无序列表
<li> 列表项
<dl> 自定义列表
<dt> 自定义列表项
<dd> 描述
2、列表的分类：
2.1、无序列表：
使用标签：<ul> <li>
属性：disc circle square (type=圆点、圆圈、方块)
2.2、有序列表：
使用标签：<ol> <li>
属性：A a I i start (type= start=)
2.3、嵌套列表：
使用标签：<ul> <ol> <li>
2.4、自定义列表：
使用标签：<dl> <dt> <dd>
2、HTML 5的块
2.1、HTML块元素：
块元素在显示是，通常会以新行开始，如：<h1> <p> <ul>
2.2、HTML内联元素：
内联元素通常不会以新行开始，如：<b> <a> <img>
2.3、HTML<div>元素
<div>元素也被称为块元素，其主要是组合HTML元素的容器
2.4、HTML<span>元素是内联元素，可作为文本的容器
1、声明：
1、HTML5 ------ <!DOCTYPE>
2、HTML4.01 ------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
3、XHTML 1.0 ------ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2、<head> 标签内容：
1、编码格式 ： <meta charset="UTF-8">
2、标题 ： <title></title>
3、问题的显示形式(en/zh) ：<head lang="en">
3、<body> 标签可包含更多的标签内容：
4、<h1~h6> 标题（大->小）
5、<p> 段落
6、<a href="http://www.baidu.com">百度</a> 超链接
7、<img src="/images/html5.png" alt="html5"> 图片
------------------------------------------------------------------------
HTML5 的元素、属性、格式化
1、HTML 元素
开始标签 元素内容 结束标签
<p> 段落 </p>
<br/>
2、HTML 属性
1、标签可以拥有属性为元素提供更多的信息
2、属性以键/值对的形式出现：href="www.baidu.com"
3、常用标签属性：
<h1 align="left">
<body bgcolor="red">
<body backgroup="image">
<a target="_blank">
4、通用属性：
class ：规定元素的类名
id ：规定元素的唯一ID
style：规定元素的样式
title：规定元素的额外信息
3、HTML 格式化
<b> 定义粗体文本
<big> 定义大号字 ---- depracted
<em> 定义着重文字
<i> 定义斜字体
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标
<sup> 定义上标
<ins> 定义插入字
<del> 定义删除字
------------------------------------------------------------------------
HTML 5样式的使用
1、标签：
<style> ：样式定义
<link>：资源引用
2、属性：
rel="stylesheet"：外部样式表
type="text/csss"：引入文档的类型
margin-left：边距
3、引入方式：
3.1 外部样式表：
<link rel="stylesheet" type="text/css" href="mystyle.css">
3.2 内部样式表：
<style type="text/css">
body{backgroud-color:red}
p{margin-left:200px}
</style>
3.3 内联样式表：
<p style="color:red>
------------------------------------------------------------------------
HTML 5 链接
1、链接数据：
1.1、文本链接
1.2、图片链接
2、属性：
2.1、href属性：指向另一个文档的链接
2.2、name属性：创建文档内的链接
3、img标签属性：
3.1、alt属性：替换图片显示
------------------------------------------------------------------------
HTML 5的表格
1、标签：
<table> 定义表格
<caption> 定义表格标题
<th> 定义表格表头
<tr> 定义表格的行
<td> 定义表格的列
<thead> 定义表格的页眉
<tbody> 定义表格的主题
<tfoot> 定义表格的页脚
<col> 定义表格的列属性
<row> 定义表格的行属性
2、属性：
<table> ：cellpadding 指定单元格内容的内边距
<table> ：border 指定边框
<table> ：cellspacing 指定单元格间距
<table> ：bgcolor 指定表格背景色
------------------------------------------------------------------------
HTML 5的列表、块、布局
1、HTML 5的列表
<ol> 有序列表
<ul> 无序列表
<li> 列表项
<dl> 自定义列表
<dt> 自定义列表项
<dd> 描述
2、列表的分类：
2.1、无序列表：
使用标签：<ul> <li>
属性：disc circle square (type=圆点、圆圈、方块)
2.2、有序列表：
使用标签：<ol> <li>
属性：A a I i start (type= start=)
2.3、嵌套列表：
使用标签：<ul> <ol> <li>
2.4、自定义列表：
使用标签：<dl> <dt> <dd>
2、HTML 5的块
2.1、HTML块元素：
块元素在显示是，通常会以新行开始，如：<h1> <p> <ul>
2.2、HTML内联元素：
内联元素通常不会以新行开始，如：<b> <a> <img>
2.3、HTML<div>元素
<div>元素也被称为块元素，其主要是组合HTML元素的容器
2.4、HTML<span>元素是内联元素，可作为文本的容器
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- J2EE 基础篇 - @ - 1 Html5 简介
- html5新增标签canvas画布基础详解及实操案例（上）
- HTML5基础篇--HTML5的localstorage详解
- HTML5本地数据库基础操作详解
- HTML5基础与Meta http-equiv属性详解
- J2EE基础篇：Struts的几个精细之处详解
- html5基础入门学习教程之javascript基础篇
- html5 css3基础知识详解
- HTML5基础加强css样式篇（css属性border详解：图片边框border-image-slice，border-image-repeat,border-image-width（二））（三十四）
- HTML5绘图基础_09_绘制弧线详解
- J2EE基础－－Servlet/JSP的配置超详解
- HTML5基础加强css样式篇（css属性border详解（一））（三十三）
- 最基础的通过myeclipse搭建框架开发java web工程的步骤详解
- HTML5基础04----HTML5属性使用方法
- HTML5基础13----HTML5表单的创建
- html5基础--video标签元素
- XML之 ------ 基础知识详解
- 接口测试基础知识详解
- HTML5 Canvas初体验之绘图基础
- Java基础学习总结（10）—— Cookie/Session机制详解