H5
HTML是网页的内容和结构
CSS 是网页的表现形式
JavaScript 是网页的控制
HTML的概念
数据格式：
HTML即超文本标记语言，是用来描述网页的一种语言，其中规范了一组定标记。HTML 文档也被称为网页
HTML不是一种编程语言，而是一种标记语言 (markup language)
Html5历史
1993年HTML首次以因特网草案的形式发布，然后经历了2.0、3.2和4.0，直到1999年的HTML4.01版本稳定下来。由于发展缓慢，逐渐的被更加严格的XHTML取代。
HTML5的功能
HTML5 核心： 这部分主要由W3C官方的规范组成，涉及新的语义元素、新增强的Web 表单、音频和视频以及通过JavaScript绘图的Canvas。这部分大多数主流浏览器均得到很好的支持
曾经的HTML5标准： 这部分主要来自于最初制定的HTML5规范，其中大多数功能需要JavaScript且支持富Web应用开发。比如：本地数据存储、离线应用和消息传递
非HTML5标准： 这部分通常指下一代功能，虽然从未进入HTML5标准，但人们还是会把它认做 HTML5 的一部分。这些包括最为常见的CSS3，以及很热门的地理定位。 对于最为常用且实用的部分，基本上主流的浏览器都支持的比较好。而那些特殊需求的部分，则需要根据不同的浏览器检测才能知道是否支持自己想要的功能
HTML5的特点
向下兼容
用户至上，要求浏览器最大程度容错显示
化繁为简
无插件范式
访问通用性
引入语义
引入原生媒体支持
引入可编程内容
浏览器选择
IE9+
Firefox 3.5+
Chrome 3.0+
Safari 3.0+
Opera 10.5+
开发工具
文本编辑器 记事本/EditPlus
可视化的编辑器 Dreamweaver
带有代码提示等工具的专业前端开发工具 webstorm、Hbuilder、VSCode
Hello H5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>我的第一张网页</title>
</head>
<body>
你好，前端开发！
</body>
</html>
Html基本格式
<!DOCTYPE html> //文档类型声明，定义当前文档所遵循的标准
<html lang="zh-cn"> //表示HTML文档开始
<head> //包含文档元数据开始
<meta charset="utf-8"> //声明字符编码
<title>基本结构</title> //设置文档标题
</head> //包含文档元数据结束
<body> //表示HTML文档内容
具体显示内容
<a href="http://www.baidu.com">百度</a> //一个超链接元素（标签）
</body> //表示 HTML
</html> //表示 HTML 文档
HTML 标签
HTML标记标签通常被称为HTML标签 (HTML tag)
HTML标签是由尖括号包围的关键词，比如
一般来说HTML中的标签通常是成对出现的，比如 和 ，但是也有些标签是不成对出现的，他们叫做自闭合标签，比如
，在某些严格的文档类型下XHTML需要把它写成
的形式
HTML标签是不区分大小写的，但是在某些严格的文档类型下XHTML，需要全部写成小写
元素就是标签的意思，html元素即html标签。
html元素是文档开始和结尾的元素。它是一个双标签，头尾呼应，包含内容。这个元素有一个属性和值lang=“zh-cn”， 表示文档采用语言为简体中文
//如果是英文则为 en百度标签内可以指定其属性，每个标签所具有的属性不完全一致，其中所有涉及到样式表现的属性都应该被css替代。属性值可以使用单双引号括起来
属性可以被自定义，自定义属性一般是用来存储数据或是相关依据的，自定义的属性名称不能使用系统已有的关键字。
id 定义的名称在html中是唯一的，不能重复，通常用来表示一部分内容的语义
class 属性用来定义标签所采用的css样式类的名称。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
</body>
</html>
HTML文档
是表示html文档内容段，它通常由2部分构成， 1、文档头部分，定义文档的基本信息，用来包含页面的元数据内容，是不在页面中渲染显示的内容。 head部分通常有如下的标签可被使用<base target="_blank" /> 当前页面中的a链接默认新开窗口打开
<base href="http://www.baidu.com" /> 如果使用相对路径定义地址如果不设置base则默认相对于上一个页面的地址；如果设置base则相对base的路径
HTML文档的标签是以树形结构呈现的，有着严谨的层级关系，不允许交叉嵌套，也称做文档对象模型DOM，每个元素称为节点node
document.getElementById().innerHTML=’’;
合理的嵌套
交叉嵌套，不允许这种写法，但是在某些浏览器中显示正常，这是因为html规范要求浏览器最大程度容错显示
文本元素
所谓文本元素，就是将一段文本设置成相匹配的结构和含义
文本元素总汇
HTML5规范指出：使用元素应该完全从元素的语义出发。但是由于历史遗留及用户至上的原则，这种语义会宽松许多。
元素名称 说明
a 生成超链接
br 强制换行
wbr 可安全换行
b 标记一段文字但不强调
strong 表示重要
i 表示外文或科学术语
em 表示强调
code 表示计算机代码
var 表示程序输出
samp 表示变量
kdb 表示用户输入
abbr 表示缩写
cite 表示其他作品的标题
del 表示被删除的文字
s 表示文字已不再确认
dfn 表示术语定义
mark 表示与另一段上下文有关的内容
q 表示引自他处的内容
bdo 控制文字的方向
small 表示小号字体内容
sub 表示下标字体
sup 表示上标字体
time 表示时间或日期
u 标记一段文字但不强调
span 通用元素，没有任何语义,一般配合 CSS 修饰
从表格中发现文本元素还是非常多的。但实际上在现实应用中，真正常用的也就是那么几个，因为绝大部分是针对英文的。
文本元素解析
表示关键字和产品名称
这个一个令人伤心的故事!
HTML5 解释：元素实际作用就是加粗。从语义上来看，就是标记一段文字，但并不是特别强调或重要性。比如：一段文本中的某些关键字或者产品的名称
表示重要的文字
这个一个令人伤心的故事!
HTML5解释：元素实际作用和一样，就是加粗。从语义上来看，就是强调一段重要的文本
强制换行、
Thisabc
解释：br在任意文本位置键入都会被换行，而在wbr英文单词过长时使用会根据浏览器的宽度适当的裁切换行。
表示外文词汇或科技术语
Html5
HTML5解释：元素实际作用就是倾斜。从语义上来看，表示区分周围内容，并不是特别强调或重要性
加以强调
Html5
HTML5 解释：元素实际作用和一样，就是倾斜；从语义上来看，表示对一段文本的强 调
表示不准确或校正
Html5
HTML5解释：元素实际作用就是删除线；从语义上来看，表示不准确的删除
表示删除文字
Html5
HTML5 解释：元素实际作用和一样，就是删除线；从语义上来看，表示删除相关文字
表示给文字加上下划线
Html5
HTML5 解释：元素实际作用就是加一条下划线；从语义上来看，并不强调此段文本
添加一段文本
Html5
HTML5 解释：ins元素实际作用和u一样，加一条下划线；从语义上来看，是添加一段文 本，起到强调的作用
添加小号字体
Html5
HTML5 解释：small元素实际作用就是将文本放小一号。从语义上来看，用于免责声明和澄清声明。至于具体的字号控制可以采用css中font-size进行设置
添加上标和下标
Html5
Html5
解释：sup和sub元素实际作用就是数学的上标和下标。语义也是如此
<code>等表示输入和输出
<code>Html5</code>
<var>Html5</var>
<samp>Html5</smap>
<kdb>Html5</kdb>
解释：code表示计算机代码片段；var表示编程语言中的变量；samp表示程序或计算机的输出；kdb表示用户的输入。这里主要是语义标签
由于这属于英文范畴的，必须将 lang="en"英语才能体现效果
表示缩写
Html5
HTML5解释：abbr元素没有实际作用；从语义上看，是一段文本的缩写
表示定义术语
Html5
HTML5解释：dfn元素就是一般性的倾斜；从语义上看，表示解释一个词或短语的一段文本
引用来自他处的内容
Html5
HTML5解释：q元素实际作用就是加了一对双引号。从语义上来看，表示引用来自其他地方的内容。
引用其他作品的标题
Html5
HTML5 解释：元素实际作用就是加粗。从语义上来看，表示引用其他作品的标题
设置文字方向
Html5
HTML5 解释：必须使用属性dir才可以设置，一共两个值：rtl从右到左和 ltr从左到右。一般默认是 ltr。还有一个元素也是处理方向的，由于是特殊语言的特殊效果，且主流浏览器大半不支持，忽略
突出显示文本
Html5
HTML5 解释：实际作用就是加上一个黄色的背景，黑色的字；从语义上来看，与上下文相关而突出的文本，用于记号
解释：元素没有实际作用；从语义上来看，表示日期和时间
表示一般性文本
Html5
HTML5 解释：span元素没有实际作用；语义上就是表示一段文本，我们经常用它来设置 CSS 等操作
物理样式
加粗 打字机 删除字 斜体字
大字 小字 下标 上标
在讨论基于语义的样式标签时，经常会用到意图这个词。这是因为由标签传达的含义比浏览器显示文本的方式更为重要。以上标签尽量避免使用。样式显示应该采用css进行控制
基于内容的样式
缩写 首字母缩写 引用、引证 代码
一个术语的定义 着重 需要从键盘输入
强调：基于内容的样式标签会告诉搜索引擎它所包含的文本具有特定的含义，搜索引擎会依据这些含义来归类网页。搜索引擎并不关心网页外观如何
标签分类
所有的body下可用的标签从布局上可分为两大类：块级元素、行内元素
网页平面布局是以行为单位的，块级元素独占一行【还可以通过css设置块标签所占区域的宽和高】，行内元素可与其他行内元素共享一行。
div标签是没有任何其他样式的块级元素
span标签是没有任何其他样式的行内元素
除了具有特殊意义的标签外，大部分标签都可以看作是具有了一些默认css样式的div标签。
是不是这些标签都可以用div代替呢？
不同的标签有不同的名称，代表其所包含的内容是什么，比如h1~h6代表不同级别的标题，form代表表单等
HTML标签种类很丰富，随着HTML语言的发展，一些标签被弃用，新的标签不断产生。标签也支持自定义，但为了使文档具有更通用的语义，尽量避免自定义标签。为了方便可以把标签分类：标题、段落、列表、文本格式化、链接、媒体、表格、表单、框架
标题
h1 ~ h6表示标题，按1~6 级别逐渐降低
1695
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
