本文详细介绍了HTML5中的各种元素，包括虚元素、自定义属性、用户代理，以及文档结构、文本、表格、表单、多媒体等方面的元素。讲解了如虚元素的表示方法，自定义属性的规则，用户代理的概念，以及全局属性如accesskey、class等的用途。此外，还深入探讨了video和audio元素的使用，以及如何通过DOM操作来控制嵌入式媒体。
虚元素
指只能使用一个标签表示，在其中放置任何内容都不符合html规范。
- 表示方法
- 用单个开始标签表示
- 用空元素结构表示
- 用单个开始标签表示
自定义属性
用户可以自定义属性，这种属性必须以data-开头
用户代理
用于处理html文档的各种软件的共同名称，浏览器是最流行的用户代理，但不是唯一的一种
元素分类
-
html5将元素分为三大类
-
元数据元素
用来构建html文档的基本结构，以及就如何处理文档向浏览器提供信息和指示
-
流元素
流元素和短语元素都是确定一个元素合法的父元素和子元素的范围，短语元素是html的基本成分，流元素是短语元素的超集
-
短语元素
-
全局属性
-
accesskey
使用快捷键访问经常用到的元素
alt+* -
class
将元素归类
-
contenteditable
让用户能够修改页面上的内容
-
contextmenu
为元素设定快捷菜单，这种菜单会在受到触发的时候弹出来
-
dir
用于规定元素中文字的方向，从左到右，或者从右到左
-
draggable、dropzone
表示元素是否可以被拖放，两者搭配使用
-
hidden
隐藏相关元素
-
id
给元素分配一个唯一的标识符，通常用来将样式应用到元素上或者在js程序中用来选择元素；
还可以导航到文档中的特定位置，如果有一个名为example.html的文档中包含id为element的元素，那么使用example.html#element这个url即可直接导航至该元素，#element称为URL片段标识符
-
lang
说明元素内容使用的语言，属性值使用的是有效的ISO语言代码
-
spellcheck
用来表明浏览器是否应该对元素的内容进行拼写检查，只有用在用户可以编辑的元素上时才有意义
-
style
用来直接在元素身上定义css样式
-
tabindex
html页面上的键盘焦点可以通过按Tab键在各元素之间切换，使用tabindex属性可以改变默认的转移顺序
-
title
提供元素的额外信息
文档和元数据元素
-
DOCTYPE,html,head,body,base,meta,title,link,script,noscript,style- html根元素，文档中html部分的开始
- head包含文档的元数据，还可以包含脚本和对外部资源的引用
- body包含文档内容
- base设置基准url，html文档中写相对连接，虚元素形式，局部属性有href,target
- meta可以定义文档的各种元数据，虚元素形式，局部属性有name,content,charset,http-equiv
- name的值有application name,author,description,generator,keywords
- http-equiv的值有refresh,default-style,content-type
- title设置文档的标题或名称，没有局部属性
- link指定外部资源，局部属性有href,rel,hreflang,media,type,sizes
- rel的属性值有alternate,author,help,icon,license,pingback,prefetch,stylesheet
- script脚本元素，局部属性有type,src,defer,async,charset
- defer和async控制脚本的执行方式
文本元素
-
a,b,em,i,s,strong,u,small,sub,sup,br,wbr,code,var,samp,kbd,abbr,dfn,q,cite,ruby,rp,rt,bdo,bdi,span,mark,ins,del-
a元素可以链接到外部资源、使用相对url、生成内部超链接（形如css中id选择器的表达式，如果根据id找不到会找name属性值匹配的元素）
//生成内部超链接 <a href="#fruits"></a> <p id="fruits"> apple,orange,strawberry </p> -
b元素加粗,em和i元素斜体,s元素加删除线
-
strong也是加粗但比b多的一点是会赋予文字重要性
-
u元素添加下划线（为避免与a元素混淆，尽量不使用）
-
small元素小号字体内容
-
sub下标，sup上标
-
br强制换行，wbr指明可以安全换行的建议位置，换不换行由浏览器决定
-
abbr,dfn,q,cite元素表示使用标题引用、引文、定义和缩写
-
ruby,rp,rt,bdo,bdi是语言元素，前三者表示注音，bdo使用dir属性改变文字方向,bdi校正文字方向
-
分组元素
-
p,div,pre,blockquote,hr,ol,li,ul,dl,dt,dd,figure- p元素表示段落
- div相当于流元素中的span
- pre预先编排好内容格式
- blockquote用在引用内容更多的情况下
- hr代表段落级别的主题分割
- ol有局部属性reversed,type,start;ul没有局部属性;li元素有一个局部属性value
- figure使用插图，可以包含一个figcaption元素表示插图的标题；但是figcaption元素必须是figure元素的第一个或最后一个子元素
划分内容
-
h1-h6,hgroup,section,header,footer,nav,article,aside,address,details- hgroup隐藏子标题，避免无法区分子标题和节标题
- section表示文档中的一节，包含的是应该列入文档大纲或目录中的内容，不能是address的后代元素
- header表示一节的首部
- footer表示一节的尾部
- nav表示导航区域
- article表示文档中一段独立成篇的内容
- aside用来表示与周边内容稍微沾一点边的内容，类似杂志的侧栏
- address表示文档或article元素的联系信息，后代元素不能是h1-h6,header,footer,article,nav,aside,section
- details在文档中生成详情区域，使用子元素summary生成说明标签或标题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1,h2,h3,article > footer{
background: grey;
color:white;
}
hgroup > h1 {
margin-bottom: 0;
margin-top: 0;
}
hgroup > h2 {
background: grey;
color:white;
font-size: 1em;
margin-top: 0px;
margin-bottom: 2px;
}
body > header *, body > footer * {
background: transparent;
color: black;
}
article{
border:thin black solid;
padding:10px;
margin-bottom: 5px;
}
article > footer {
padding: 5px;
margin: 5px;
text-align: center;
}
article > footer > nav > a {
color:white
}
body > article >section,body > article > section > section{
margin-left:10px
}
body > header, body > footer{
border: medium solid black;
padding-left: 5px;
margin: 10px 0 10px 0;
}
body > nav {
最低0.47元/天 解锁文章
275
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
