HTML5认知
一、HTML5的主要组成
1、HTML5 核心规范(标签) 2、css 3、JavaScript
二、功能
一、HTML5核心:这一部分主要是由w3c官方的规范组成,涉及到语义元素,增强web表单、音频和视频以及通过JavaScript绘图Canvas
二、曾经的HTML5标准:这部分主要是来自于最初制定的HTML5规范,大多数功能还是需要 JS去支持web开发。
三、非HTML5标准:通常指的是下一代的功能,目前还没有被规范到HTML5的标准中去。
三、特点
一、向下兼容型:除了一小部分HTML中的标签外,HTML5都能兼容。
二、用户至上:为了满足用于的需求而生,可以归结为只有及其少的部分浏览器不能使用HTML5之外,其余的大多数的浏览器都能够兼容。
三、化繁为简:1、以浏览器代替原生的JavaScript 2、DOCTYPE被简化 3、字符集声明 4、强大的API
四、无插件规范:提供无插件的原生支持弥补插件本身不足的问题。
五、媒体的中立:例如HTML5的媒体播放能在不同的设备或则平台上运行
六、引入了语义:能够增强代码的可读性与代码查询的便利性
七、引入原生媒体支持:能够直接的播放视频和音频文件,不需要借助插件
八、引入可编程内容:在现在可以把HTML5理解为HTML+css+javaScript的总称。
开发工具:Hbuilder
在开发工具Hbuilder中,先通过文件新建一个web项目,注意在创建的项目名称第一个字母要大写。
然后再点击HelloHbuilder创建一个空白的html的空白文件。然后便可开始用标签 编写网页。
HTML5标签开始
一、主体结构
<!DOCTYPE html> //文档类型的声明
<html lang="zh-cn"> //表示文档HTML开始
<head> //包含文档元素剧开始
<meta charset="utf-8"> //声明字符编码
<title>文本开始</title> //设置文档的标题
</head> //包含文档元素剧结束
<body> //文本内容的开始
这仅仅只是一个开始<br /> //其中的br表示强制换行
<a href="http://www.baidu.com">百度</a>//表示超链接,其中的href是超链接必须要有的熟悉
</body> //文本内容的结束
</html> //文档HTML结束
二、文本标签
作用效果相似标签
1.加粗(b和strong都是双标签)
b:用于产品名称或者标题之类的
strong:用于强调文章的关键字
2.换行(br与wbr都是单标签)
br : 强制换行
wbr:安全换行(当浏览器窗口缩小时,不会特别容易的产生突兀的文本变化效果)
3.倾斜(i和em都是双标签)
i:多用于表示外文词汇或者科技术语
em:用于文本内容中自己想要使得文本倾斜的内容
4.下划线(u和ins都是双标签)
u:加下划线时不怎么明显
ins:加下划线时较u来说比较的明显
5.删除线(s和del都是双标签)
s:删除线不怎么明显
del:删除线相比较s而言比较明显
6.上下标(sup和sub都是双标签,用在数字前后)
sup:上标
sub: 下标
7.放小:small(将旁注显示为小型文本)
8.编程代码相关标签:code samp kdb var 都是标记计算机编程语言相关的文本代码,在中文网站显示中不怎么明显
9.表示缩写:abbr
10.定义定义项目:dfn
11.定义注释:ruby 在ruby标签下还有rt与rp标签,可用rt和rp两者结合表示汉语拼音
12.定义文本(文字的方向)显示方向 :bdo
13.突出显示文本:mark 可以使文字在浏览器中显示的比较突兀
超链接、路径与锚点
一、超链接
<a>标签用来表示超链接,在HTML5中主要用到的是href属性和target属性。其中href属性是<a>标签中必须用的一个属性,用来指定链接地址。target属性用来指定所链接的页面在浏览器窗口中的打开方式。
target参数值:
blank:在新的窗口打开链接的文件 self:在同一框架或窗口中打开链接的文件
parent: 将链接的文件载入含有该链接框架的父框架集或者父窗口中
top:在该浏览器窗口中打开,但是原有的框架会被删除。
二、路径
绝对路径:是从盘符开始的路径 相对路径:是从当前盘符开始的路径
目录语法
同一个目录:文件名.html或者是./文件名.html
在子目录:文件名/文件名.html
在孙子目录:文件名/文件名/文件名.html
在子子目录:........../文件名
三、锚点
超链接也可以用来将同一个文档中的另一个元素移入到视野,通过属性id和name来实现锚点的定位
//链接
<a href ="#1">第一章</a> <a href ="#2">第二章</a><a href ="#3">第三章</a>
//锚点
<a name="1"></a>或者<a id = "1"></a>
<a name="2"></a>或者<a id = "2"></a>
<a name="3"></a>或者<a id = "3"></a>
分组元素
1.段落分离<p>(p为双标签)
<p>标签就是在<p>所包含的文本形成一个段落;使得段落与段落之间存在一定过得空隙。
<p>这是一个段落</p>
<p>这是另一个段落</p>
2.通用分组 <div>(div是双标签)
进行一般性分组元素布局,在HTML5中和<p>的区别在于分组的元素之间没有空隙,其作用效果与<br>相同
<div>这是一个分组</div>
<div>这是另外一个分组</div>
3.引用大量他处内容<blockquote是双标签>
将文本内容进行分段,与标签p所分段的段落间隙相同并且首行会缩进空格。
<blockquote>这是一个大段引自他处的内容</blockquote>
<blockquote>这是另一个大段引自他处的内容</blockquote>
4.展示格式内容<pre双标签>
大概的展示编辑器中的文本内容,能够读出文本中的格式。
5.添加分割<hr单标签>
有一条下划线用于分割文本中间的内容,来显示上下文主题的区别,使用hr时只需要用<hr>即可
6.添加一个无序的列表 <ul><li>
使用格式
<ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ul>
在浏览器中会用一个黑点来表示他们的顺序
7.添加一个有序的列表
使用格式
<ol>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ol>
在浏览器中会用数字1 2 3来表示其格式
ol的主要的二个属性
1.start表示从第几个系列开始 使用形式 <ol start="1">
2.type表示列表的编号类型 使用形式 <ol type="a">值分别为a A i
表格元素
表格的组成部分
<table border= "1">
<caption>这是一个表格</caption> //用来说明一个表格
<tbody> //表体
<thead> //表头
<th>姓名</th> //th与td的差别在与th能将其内部的内容加粗,colspan(横向合并)
<th>性别</th> //rouspan(纵向合并) ,这个两个属性是包含在th和td中的
<th>婚否</th>
</teead>
<tr> //用于表示表格的列数
<td>张三</td>
<td>张三</td>
<td>张三</td>
</tr>
<tfoot></tfoot> //表的尾部
</tody>
</table>
二、在表格元素中还有colgroup标签,解释:colgroup标签,是为了处理某个列,span属性定义处理具体的列数。
<colgroup style="backround:red" span="2"> style是在css中所要学到的属性,background用于定义背景的颜色。
三、<col>更加灵活的设置列
colgroup设置时间的间位符
文档元素
header 存放页面的标头部分:例如,logo,标题
footer 存放页面尾部:版权声明,友情链接等
h1-h6 小标题,注意,它们之间的顺序是从大到小进行排序的
hgroup 组合标题
section 文档的主题部分
naw 增加导航
artitic 添加一个独立成篇的文档
aside 生成注释
address 表示文档或者article元素的联系信息
details 生成详情区域 summary 元素在其部位生成标签 解释:details与summary在大多数的主流浏览器上不支持