甜橘子，专注成都网站制作网站设计与营销型网站建设与优化
QQ :532337155
电话：028-86922220
新增的结构标签：
站在用户的角度思考问题，与客户深入沟通，找到碑林网站设计与碑林网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站建设、成都做网站、企业官网、英文网站、手机端网站、网站推广、申请域名、雅安服务器托管、企业邮箱。业务覆盖碑林地区。
1、header元素
表示页面中一个内容区块或真个页面的标题。
2、hgroup元素
表示对真个页面或页面中的一个内容区块的标题进行组合。
3、article元素
表示页面中一块与上下文不相关的独立内容。比如一篇文章。
4、aside元素
表示article元素内容之外的、与article元素内容相关的辅助信息。
5、footer元素
表示整个页面或页面中一个内容区块的脚注。一般来说，他会包含创作者的姓名、创作日期以及创作者的联系信息。
HTML5新规则：
新特性应该基于 HTML、CSS、DOM 以及 JavaScript。 减少对外部插件的需求（比如 Flash），更优秀的错误处理，更多取代脚本的标记，HTML5 应该独立于设备开发进程应对公众透明 ;
HTML5 新特性：
新的特殊内容元素，比如 article、footer等，新的表单控件，比如 calendar、date、time、email、url、search；用于媒介回放的 video 和 audio 元素；用于绘画的 canvas 元素
对本地离线存储的更好的支持。
一、Html的基本结构：
!DOCTYPE html
html
head
meta charset=utf-8"
title/title
/head
body
网页的文本、图片等信息；
/body
/html
二、Head部分：用于表示网页的元数据即描述网页的基本信息
其常用标签及属性有：
1、title标签：浏览器标签页显示的标题
2、meta标签：其常用属性
①charset:设置文档的字符集编码格式。HTML5中设置字符集编码：meta charset="UTF-8"
常见的字符集编码格式：
a.GB-2312:国标码，简体中文
b.GBK：扩展的国标码
c.UTF-8：万国码 Unicode 常用
②http-equiv属性:将我们的信息写给浏览器看，让浏览器按照这里面的要求执行，可选属性值：Content-Type(文档类型) refresh(网页定时刷新) set-cookie(设置浏览器cookie缓存) 需要配合content属性使用。（http-equiv属性只是表明需要设置哪一部分，具体的设置内容，放到content属性中）
③name属性：使用方法同“http-equiv”。将我们的信息写给搜索引擎看
常用且需要掌握的属性值：author（作者） keywords（网页关键字） description（网页描述） 这两个属性设置，网页必不可少。
3、link标签：链接网页图标（title前的小logo），其常用属性有：
①rel属性：声明链接文件的类型，此处选icon
②type属性：可以省略
③href属性：表示图片的路径地址
三、body部分：网页的文本、图片等信息
标签的分类：
块级标签：显示为块，前后隔一行（自动换行）
行级标签：按行从左往右逐一显示。
1、 常见的块级标签：
①h1/h1......h6h6：标题标签，自动加粗，h1最大，h6最小。
②hr/：水平线标签，添加一条水平线。
③p/p:段落标签，
④br/:换行标签，
⑤blockquote//blockquote:引用标签，cite属性，表明引用的来源，一般引用网址
浏览器默认首行缩进。
⑥pre/pre:预格式标签，用于重载代码。浏览器默认显示样式：1、显示为等宽字体。 2、代码中的换行、
空格等元素能在浏览器中显示。
【补充】html 文件中空格的表示：nbsp;
2、 基于布局的块级标签
列表：无序列表、有序列表、定义列表
①有序列表：ol/ol 列表项：li/li
②无序列表：ul/ul 列表项：li/li
③定义列表（实现图文混排）:dl/dl
列表标题：dt一般只有一项/dt
列表描述项：dd可以有很多项/dd
3、组合标签：figure/figure用于显示图片及图片标题
他有两个子标签：img /图片
figcaption/figcaption图片的标题
例如：figure
img src="img/EZ.jpg" height="20%" width="20%" alt="探险家"/
figcaption探险家 伊泽瑞尔/figcaption
/figure
4、分区标签：div/div
5、常见的行级标签
1span（文本）:无实际意义，用于包裹某部分文字，修改特定样式，例如：
这是span style="color: red;font-size: 36px;"span/span中的文字
img（图片）：其常用属性：①src:表示引用图片的地址。
路径地址的写法：相对路径：以当前文件为最准，去寻找图片地址
a、与文件处于同一层的图片，直接写图片名
b、图片在当前文件下一层：文件名/图片名
c、图片在当前文件上一层：../图片名
绝对路径:盘符：/文件夹/图片名，但 是严禁使用
图片网址：网络上的图片链接，但是一般不用
②height和width：图片的高度和宽度。可以用CSS样式代替
③title：图片标。当鼠标指上之后显示的文字
④alt:当图片无法显示的时候，显示的文字
2em（倾斜强调）
3strong（加粗强调）
4b（加粗）
5i（倾斜）
Strong、em、b、i的区别
1、Strong、em都表示强调，Strong为粗体，em为斜体，而Strong的强调 程度逗比em高
2、Strong和b都能加粗，em和i都能倾斜，，但是Strong和em多了一层强调的语义 。H5要求标签尽可能实现语义化。
6q（短引用）
7small/big（缩小/放大字体）：small和big分别是缩小和扩大字体，都可以多层嵌套直至上限或下限
8a（超链接）
1、href:超链接的路径，可以是网络链接，也可以是本地文件。
2、target:跳转页面打开的位置。_self自身页面，_blank新页面。
3、title:鼠标指在超链接上显示的名称。
4、Rel（被链接是当前的前/后一篇）:指定被链接文档与当前文档的关系,搜索引擎 会利用该属性 获取更多的有关链接的信息：
rel="prev"被链接文档是当前文档的前一篇文 档，
rel="next"被链接文档是当前文档的后一篇文档,
rel="icon"被链接文档是当前文档的图标
rel="stylesheet"被链接文档是当前文档的样式表
5、Rev（当前是被链接的前/后一篇）
锚链接：
①本页面锚链接:a、设置锚点：a name="top"/a
b、跳转锚点：#name名
①页面间锚链接:a、在即将跳转页面的指定位置设置锚点
b、跳转锚点：页面地址.html#name名
a href="02_常见的块级标签.html#Hbuilder"页面间锚链接/abr/
功能性链接： mailto用于给指定邮箱发送邮件
file：///e:/aaa.png打开本地文件
tencent://message/?uin=1315618220 给指定QQ发送息
9s标签，有误文本：删除线
s这是S标签中的文字/sbr /
10cite标签：浏览器显示为倾斜，常用于书、画作、作品的引用
cite这是cite中的文本/citebr /
11code:计算机代码，不保留代码格式
pre
code/code
/pre
12bdo:表示文本方向，属性：dir="ltr"表示从左往右，dir="rtl"表示从右往左
bdo dir="rtl"1234567/bdobr /
kbd:表示需要用户用键盘输入的内容，浏览器显示为等宽字体
请输入“kbdEsc/kbd”推迟系统br /
13sup:上标文本，sub:下标文本
xsub6/subbr /
© copy; 空格 nbsp;
© copy; 空格 nbsp;br /
14u:下划线
u这是下划线/ubr /
mark:高亮或标记文本，浏览器显示为黄色背景
markmark/markbr /
h5是html的最新版本，是14年由w3c完成标准制定。增强了，浏览器的原生功能，减少浏览器插件（eg：flash）的应用，提高用户体验满意度，让开发更加方便。
- h5新增的标签
新增元素
说明
video 表示一段视频并提供播放的用户界面
audio 表示音频
canvas 表示位图区域
source 为video和audio提供数据源
track 为video和audio指定字母
svg 定义矢量图
code 代码段
figure 和文档有关的图例
figcaption 图例的说明
main
time 日期和时间值
mark 高亮的引用文字
datalist 提供给其他控件的预定义选项
keygen 秘钥对生成器控件
output 计算值
progress 进度条
menu 菜单
embed 嵌入的外部资源
menuitem 用户可点击的菜单项
menu 菜单
template
section
nav
aside
article
footer
header
- css3
css3被划分为模块，最重要的几个模块包括：选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面
选择器
框模型
背景和边框
border-radius、box-shadow、border-image、
background-size：规定背景图片的尺寸
background-origin：规定背景图片的定位区域
background-clip：规定背景的绘制区域
文本效果（常用）
text-shadow：设置文字阴影
word-wrap：强制换行
word-break
css3提出@font-face规则，规则中定义了font-family、font-weight、font-style、font-stretch、src、unicode-range
2/3D转换
transform：向元素应用2/3D转换
transition：过渡
动画
@keyframes规则：
animation、animation-name、animation-duration等
用户界面（常用）
box-sizing、resize
css3新增伪类
：nth-child()
：nth-last-child()
：only-child
：last-child
：nth-of-type()
：only-of-type()
：empty
：target 这个伪类允许我们选择基于URL的元素，如果这个元素有一个识别器（比如跟着一个#），那么:target会对使用这个ID识别器的元素增加样式。
：enabled
：disabled
：checked
：not
HTML5 新增常用元素
HTML5的声明为：!DOCTYPE html
它不用再像之前的版本一样在声明中引用DTD。DTD(document type definition)定义合法的XML文档构建模块，它使用一系列合法的元素来定义文档的结构。在HTML中，DTD规定了标记语言的规则，使浏览器能正确地呈现内容。而HTML5不基于SGML，所以不需要引用DTD。
文档结构元素
article: 定义可以独立于内容其余部分的完整独立内容块。
header: 页面顶部。
nav: 导航栏(边导航,页面导,底部导)标签。
hgroup: 定义多个标题时。
section: 内容分块.可设置cite属性。
aside: 侧边栏，定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。
figure: 代表一个和文档有关的图例。
figcaption: 代表一个图例的说明（标题）。
footer: 页面底部。
dialog:定义对话框。
嵌入元素
video 代表一段视频 及其视频文件和字幕，并提供了播放视频的用户界面。属性有：
src
autoplay（控制自动播放）
loop（播放完后是否重新播放）
controls（显示用户界面）
width
height
audio 代表一段声音 ，或音频流。 标签内的文字会在标签不被支持时呈现。属性有：
src
autoplay
loop（播放次数，为-1时循环播放）
controls
volume(音量)
source 为 video 或 audio 这类媒体元素指定媒体源。属性有src\type（指定资源的MIME类型）。
track为 video 或 audio 这类媒体元素指定文本轨道（字幕） 。属性有：
kind（数据类型）
src
srclang（track文本数据的语言）
label 当列出可用的text tracks时，给浏览器使用的text track的标题，这种标题是用户可读的。
注意：一个media 元素的任意两个 track 子元素不能有相同的 kind, srclang, 和 label属性。
canvas 代表位图区域，可以通过脚本在它上面实时呈现图形，如图表、游戏绘图等。
embed 代表一个嵌入的外部资源，如应用程序或交互内容。属性有：
width
height
src
type 用于选择插件实例化的 MIME 类型。
表单元素
meter代表滑动条。显示实时状态。属性有:
value 当前数值，如果给定的值不在最小值和最大值之间，它的值就等于它最接近的一端的值。
min 值域的最小边界值，默认为0
max 值域的最大边界值，默认为1
low 定义了低值区间的上限值，当数值处于low-min或high-max时就会呈现不同的样式。
high 定义了高值区间的下限值。
optimum 最优值
output代表计算值 。
for 其它影响计算结果的标签的ID，可以多个。
form 与当前标签有关联的form（从属的表单）。该属性的值必须是当前文档内的表单元素的ID。如果未指明该属性，output标签必须是一个form的后代标签。该属性的用处在于可以让output标签脱离form标签，存在于一个网页文档的任意位置。
name
form oninput="result.value=parseInt(a.value)+parseInt(b.value)"
input type="range" name="b" value="50" / +
input type="number" name="a" value="10" / =
output name="result"/output
/form
1
2
3
4
5
progress代表进度条，表示任务过程，属性有max（任务总量）\value。
datalist为Input标记定义一个下拉列表，配合option标签。
其他
details创建一个挂件，仅在被切换成展开状态时，它才会显示内含的信息。
summary 是details 元素的子元素，表示其综述或标题 。
mark代表一段需要被高亮的引用文字。
ruby表示需要被ruby 注释 标记的文本，如中文汉字和它的拼音。
rt 表示ruby 注释 ，如中文拼音。
rp 在ruby 注释两边的额外插入文本 ，用于在不支持 ruby 注释显示的浏览器中提供友好的注释显示。
ruby夼rp(/rprtkuang/rtrp)/rp/ruby
1
顺便一提，html5删除了的元素：
纯表现的：basefont\big\center\font\s\strike\tt\u
对可用性有负面影响的：frame\frameset\noframes
产生混淆的：acronym\applet\isindex\dir
同时HTML5也对某些元素进行了重定义，改变了它们的语言内容但表现不变。如b标签、i标签，仍然表示为粗体、斜体，但代表了一段需要被关注的文字、一段不同性质的文字，如技术术语、外文短语等。
HTML5属性变化
新增类型
email \ url \ tel \ number
Datepickers:date \ month \ week（iphone不兼容） \ time \ datetime(UTC格式，安卓、i6+、PC端不兼容) \ datetime-local
针对PC端：range(水平杆，两边为min和max) \ search（有内容时右边出现×）\ color（颜色选择框）
表单属性
autocomplete属性：自动完成功能，适用于标签，以及以下类型的input标签：text \ search \ url \ tel \ email \ password \ datepickers \ range \ color
form autocomplete="on" //on为打开，Off为关闭
/form
1
2
autofocus属性：域自动地获得焦点，适用于所有的标签的类型
input autofocus="autofocus"/
1
multiple属性：规定输入域中可选择多个值，适用于email \ file类型的标签
input type="file" multiple="multiple" /
1
placeholder属性：提供一种提示，描述输入域所期待的值，适用于text \ search \ url \ tel \ email \ password 类型的标签
input type="text" placeholder="please input your name!"/
1
required属性：规定必须在提交之前填写输入域，且必须按照相应域的格式，如，email域必须要有@、邮件域。适用于text \ search \ url \ tel \ email \ password \ datepickers number \ checkbox \ radio \ file 类型的标签
input type="email" requried="required" /
1
链接属性
sizes
link rel="icon" href="icon.gif" type="image/gif" sizes="16*16"
//网页头部标题的logo，可根据不同分辨率引用不同的sizes
//type为该图标的类型，说明该图标格式为gif
1
2
3
target
base href="......" target="_blank"
1
base标签写在head标签内。target属性控制整个页面所有超链接的默认打开方式（本来是_self），href指定页面中所有相对链接的基准 URL；
超链接的属性
media=“handheld”（表示对设备进行优化，handheld对“手持”设备进行支持，tv对”电视“设备进行支持）；
hreflang=“zh”（设置语言，zh表示是简体中文）
rel=“external”（设置超链接的引用，external表示其为外部链接）
其他属性
script的属性
defer：加载完脚本后并不执行（延迟执行），而是等整个页面加载完之后再执行，只有ie兼容
async：对脚本进行异步加载，加载完脚本后立刻执行，而不用等整个页面都加载完才能执行。
如果 async=“async”：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
如果不使用 async 且 defer=“defer”：脚本将在页面完成解析时执行
如果既不使用 async 也不使用defer：在浏览器继续解析页面之前，立即读取并执行脚本
ol的属性
start：设置序号的起始值
reversed：倒叙排列 reversed=“reversed”
html的属性：manifest
!DOCTYPE HTML
html manifest="demo.appcache"
...
/html
1
2
3
4
通过在页面中设置manifest属性或在manifest文件中加入页面，可以将此页面缓存，这样我们就可以离线访问，且获得更快的速度，因为已缓存资源加载得更快。还可以减少服务器负载。
一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使修改了服务器上的文件。为了确保浏览器更新缓存，需要更新 manifest 文件。
style的属性scoped：内嵌CSS,可以写在任何位置，而不止是head。不过这样会违反我们低耦合的原则。
style scoped
...
style
这里只是部分哦-------------article 标签定义外部的内容（外部内容如blog,news）。 使用后感觉和P差不多，语义化的标签。 aside 标签定义article以外的内容（可用做文章的侧栏）. 语义化的标签。 audio标签定义音乐。 支持三种格式,ogg,mp3,wav。 Safari仅支持MP3 and WAV 两种格式. canvas使用JavaScript在网页上绘制图形图像。 学好算法JS无所不能. （浏览器说：鸭梨很大）. command 定义按钮用的. 说实话,没用明白。 datalist 定义选项列表. 又是一个不知道咋用的标签。 details 用于描述某个文档部分的内容。 语义化的标签。 summary 定义details元素标题。 语义化的标签。