虚元素
指只能使用一个标签表示,在其中放置任何内容都不符合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 {