一、HTML5的发展和区别
XML:可扩展标记语言,类似HTML语言,设计宗旨是传输数据而非显示数据。1998年2月W3C推荐标准。
HTML:超文本标记语言,描述网页,包含HTML标签和纯文本。
XHTML:可扩展性超文本标记语言,上面两者的结合,与HTML4.0几乎相同。2001年1月W3C推荐标准。
HTML4.0:网页的基础语言标准。
HTML5:最新HTML标准。正式标准还没发布。
DHTML=HTML+DOM+CSS+JAVASCRIPT
SHTML:不是HTML而是一种服务器 API,SHTML是服务器动态产成的HTML。
DOM:浏览器对象模型脚本,可通过浏览器对象模型来对浏览器进行操作。
二、理论概念
1.绝对路径
<a href="file:///D:/备课/HTML5 第一季/code/index2.html">index2</a>
解释:首先是 file:///开头,然后是磁盘符,然后是一个个的目录层次,找到相应文 件。这种方式最致命的问题是,当整个目录转移到另外的盘符或其他电脑时,目录结构一旦 出现任何变化,链接当即失效
2.相对路径
<a href="index2.html">index2</a>
解释:相对路径的条件是必须文件都在一个磁盘或目录下,如果是在同一个目录下,直 接属性值就是被链接的文件名.后缀名。如果在同一个主目录下,有多个子目录层次,那就 需要使用目录结构语法。
3.锚点设置
超链接也可用来将同一个文档中的另一个元素移入视野。链接当前页面的某一部分,如很长的小说。通过属性 id 或 name 实现锚 点定位,不用href。
//链接 <a href="#1">第一章</a> <a href="#2">第二章</a> <a href="#3">第三章</a>
//锚点 <a name="1"></a> <a id="3"></a> 中间不需要写内容,只是做个锚点让你链接到当前位置。
4.HTML 实体
就是将有特殊意义的字符通过实体代码显示出来。
三、部分标签的使用
1
<!DOCTYPE html>
<!-- 文档类型声明 -->
2.
meta 元数据
1 指定名/值元数据对
<meta name="author" content="bnbbs">
给浏览器提供一些信息,这个的作者是bnbbs
<meta name="description" content="这是一个 HTML5 页面">
添加一个描述,“这是html页面”
<meta name="keywords" content="html5,css3,响应式">
它的关键字是什么
<meta name="generator" content="sublime text 3">
页面使用的编程工具是什么
2声明字符编码
<meta charset="utf-8">
<!-- 声明字符编码,不同的浏览器就不会出现乱码 -->
3.模拟 HTTP 标头字段
<meta http-equiv="refresh" content="5;http://li.cc">
5 秒跳转到指定 URL,刷新跳转到另一个页面。
<meta http-equiv="content-type" content="text/html charset=utf-8">
另一种声明字符编码 的方式,比较麻烦。
3.
<link rel="stylesheet" type="text/css" href="01.css">
<!-- 链接到外部样式文件
rel必需。定义当前文档与被链接文档之间的关系。
type规定被链接文档的 MIME 类型。 -->
4.
图像作为链接: <a href="http://www.w3cschool.cn">
<img alt="w3cschool" src="/statics/images/w3c/logo.png" >
<!-- alt:图片加载不出来的替代文本 -->
<!-- src链接到本地资源 -->
5.
P段落标签,标签之间有一个相当于br的空隙。
div之间无缝隙,后面的div在下一行。
<blockquote>大段的引用内容,与P相比,首尾有缩进。
.<pre>展现格式化内容 ,保留文本格式。编辑器怎么排,网页就怎么显示。
<br>换行
<hr> 水平线。可规定颜色。宽度,高度。
<ul><li>添加无序列表 。
<ol><li>添加有序列表。
文档标签:
参考代码:https://github.com/Cloud903/HTML/tree/master/template
<header>表示首部 。
<footer>表示尾部。
<hgroup>组合标题 。是当多个标题出现,干扰到一对或多个本身需要整合的 标题,这是使用此元素包含群组。
<hgroup>
<h1>标题部分</h1>
<h4>小标题部分</h4>
</hgroup>
<section>文档主题 。是定义一个文档的主题内容。
<article>添加一个独立成篇的文档 。
<aside>生成注释栏 。专门为某一段内容进行注释使用。
<address>表示文档或 article 元素的联系信息。
表单标签:
标签不多,但是每个标签需要掌握的属性多。
①form
该标签本身没有任何效果 主要是定义本身是一组表单。 action属性表示该表单提交到哪个页面。
②input
name属性不写,提交不出去
③<label>
添加说明标签 ,可以关联 input,让用户体验更好。且更加容易设置 CSS 样式。
不会向用户呈现任何特殊效果。为鼠标用户改进了可用性。
如果您在 label 元素内点击文本,就会触发此控件。
就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
④<fieldset>
可以将一些表单元素组织在一起,形成一个整体。类似form
⑤type属性
input 元素的属性之一
基础参考代码 https://github.com/Cloud903/HTML/blob/master/%E8%A1%A8%E5%8D%95.html
<table>里的标签:
<thead>添加表头 。无论在编辑器里的位置,包含内容始终在表格第一行。
.<tfoot>添加表脚 。同理。
<tbody>添加表主体 ,<tbody>元素主要是包含住非表头表脚的主体部分,有助于表格格式的清晰,更 加有助于后续 CSS 和 JavaScript 的控制。
<th colspan="2">Telephone</th> 单元格跨两格合并。
<th rowspan="2">Telephone:</th> 单元格跨两列合并。
6.
<figure>
<figcaption>这是一张图</figcaption>
<!-- 图片上面一行显示文字 -->
<img src="D:\图包\head.jpeg">
</figure>
<!-- 这两个元素一般用于图片的布局。 -->
7.嵌入元素标签
把外部的一些资源插入到 HTML 中。
.
8.
<progress value="30" max="200"></progress>
<meter value="30" min="10" max="100" low="10" high="80"></meter>
实现效果:
9.video播放视频文件,不同浏览器支持的视频格式有些不同。
10.播放音频文件
11.全局属性
id
class
accesskey
快捷键操作
<input type="text" name="user" accesskey="n">
windows 下 alt+指定键,前提是浏览器 alt 并不冲突 。使用不多。
contenteditable
让文本处于可编辑状态,设置 true 则可以编辑,false 则不可编辑。或者直接 设置属性。
<p contenteditable="true">我可以修改吗</p>
dir
<p dir="rtl">文字到右边了</p>
让文本从左到右(ltr),还是从右到左(rtl)。文字书写顺序不变,只是靠右显示。
hidden
<p hidden>文字到右边了</p>
隐藏元素。添加这个属性,页面上元素消失不见。
lang
<p lang="en">HTML5</p>
可以局部设置语言。显示的文字样式变成了英文。
title
<p title="HTML5 教程">HTML5</p>
对元素的内容进行额外的提示。鼠标放上去会出现悬停提示。
tabindex
<input type="text" name="user" tabindex="2">
<input type="text" name="user" tabindex="1">
表单中按下 tab 键,实现获取焦点的顺序,鼠标光标按tabindex规定的顺序跳转。如果是-1,则不会被选中。
style
<p style="color:red;">CSS 样式</p>
设置元素行内 CSS 样式。
四、Sublime Text3常用快捷键
1,标签名+Tab 标签自动补全(单标签不能用,也不用在前面打尖括号)。
2,ctrl+shift+p 调出Package Control命令。
3,ctrl+alt+c 打开浏览器快捷键。
4,Ctrl+shift+c 打开浏览器调试面板快捷键
5,tab键自动生成完整代码
生成带子标签的一组标签 ul+、ol+、dl+、table+
生成嵌套子标签 nav>ul>li
生成相邻兄弟标签 div+p+h1
生成乘积数量的标签 ul>li*5