web前端——HTML5笔记整理与心得分享

、

或

更符合状况，不要使用

。
3、不要为没有标题的内容区块使用

。

（6）footer

用法
footer标签定义 section 或 document 的页脚。
在典型情况下，该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。

例子


    整个页面的头部


    
        article的头部
    
    
        
            section的头部
        
        section的内容部分
        
            section的尾部
        
    
    
        article的尾部
    


    整个页面的尾部

2、分组元素

（1）figure和figcaption

figure用法

标签用于对元素进行组合。

标签规定独立的流内容（图像、图表、照片、代码等等）。

元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。

figcaption用法

标签定义 figure 元素的标题（caption），“figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

注意：一个figure元素内最多只允许放置一个figcaption元素，其他元素可无限放置。

例子
不带有标题的figure元素：

带有标题的figure元素：



Web前端之家，专注Web前端，HTML5、CSS3、JavaScript、JQuery、移动开发、页面性能优化等开发前端技术的交流平台

多个图片，同一个标题的figure元素





Web前端之家，专注Web前端，HTML5、CSS3、JavaScript、JQuery、移动开发、页面性能优化等开发前端技术的交流平台

（2）hgroup

用法

标签用于对网页或区段（section）的标题进行组合。当标题有多个层级（副标题）时，元素被用来对一系列

-

元素进行分组。

例子


  Welcome to my WWF
  For a living planet

3、页面交互元素

（1）details

用法

标签规定了用户可见的或者隐藏的需求的补充细节。

标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在

标签里边。

标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。与一起使用，来制作 detail 的标题。该标题对用户是可见的，当在其上点击时可打开或关闭 detail。

元素的内容对用户是不可见的，除非设置了 open 属性。

例子


Copyright 2011.
All pages and graphics on this web site are the property of W3School.

（2）summary

用法

标签包含 details 元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素。

例子


HTML 5
This document teaches you everything you have to learn about HTML 5.

（3）progress

用法
标签运行中的进程。可以使用标签来显示 JavaScript 中耗费时间的函数的进程。

例子

85%

（4）meter

用法
在全新的HTML 5中，可以使用< meter >标记元素实现百分比效果。< meter >是HTML 5中新增的标记，用于表示在一定数量范围中的值，例如，投票中各个候选人各占比例情况及考试分数等。< meter >元素仅是帮助浏览器识别HTML中的数量，而不对该数量做任何的格式修饰。在< meter >元素中有6个属性，通过这些属性会根据浏览器的特征以最好的方式展示这个数量。

例子

十分之三
60%

4、文本层次语义元素

（1）time

用法
time是HTML 5新增加的一个标记，用于定义时间或日期。该元素可以代表24小时中的某一时刻，在表示时刻时，允许有时间差。在设置时间或日期时，只需将该元素的属性“datetime”设为相应的时间或日期即可。

例子





Time 元素


2017/3/6

（2）mark

用法
mark元素是HTML 5中新增的元素，主要功能是在文本中高亮显示某个或某几个字符，旨在引起用户的特别注意。其使用方法与和有相似之处，但相比而言，HTML 5中新增的元素在突出显示时，更加随意与灵活。

例子

Do not forget to buy milk today.

注意：虽然元素在使用效果上与或元素有相似之处，但三者的出发点是不一样的。元素是作者对文档中某段文字的重要性进行的强调；元素是作者为了突出文章的重点而进行的设置；<mark>元素是数据展示时，以高亮的形式显示某些字符，与原作者本意无关。

（3）cite

用法
元素可以创建一个引用标记，用于文档中参考文献的引用说明，如书名或文章名称。一旦在文档中使用了该标记，被标记的文档内容将以斜体的样式展示在页面中，以区别于段落中的其他字符。

例子

《富春山居图》由黄公望始画于至正七年(1347)，于至正十年完成。

5、全局属性

（1）draggable

用法
在HTML5中要想实现拖放操作，至少要经过两个步骤：
1.将想要拖放的对象元素的draggable属性设为true，这样才能将该元素进行拖放。另外，img元素和a元素（必须指定href属性）默认允许拖放。
2.编写与拖放有关的事件处理代码。关于拖放存在的几个事件如下所示：
dragstart开始拖放操作。
drag 拖放过程中。
dragenter 拖放过程中鼠标经过的元素，被拖放的元素开始进入本元素的范围内。
dragover 拖放过程中鼠标经过的元素，被拖放的元素正在本元素范围内移动。
dragleave 拖放过程中鼠标经过的元素，被拖放的元素离开本元素的范围。
drop拖放的目标元素，有其他元素被拖放到了本元素中。
dragend 拖放的目标元素，拖放操作结束。

例子

施放示例简单拖放示例请施放

（2）hidden

用法
hidden 属性是布尔属性。如果设置该属性，它规定元素仍未或不再相关，浏览器不应显示已规定 hidden 属性的元素。
hidden 属性也可用于防止用户查看元素，直到匹配某些条件（比如选择了某个复选框）
当一个网页元素有了hidden属性后，它的表现跟CSS的display: none;作用非常相似，元素将会消失，而且不占用任何页面空间。

例子

You can't see me!

（3）spellcheck

用法
spellcheck 属性规定是否对元素内容进行拼写检查。可对以下文本进行拼写检查：类型为 text 的 input 元素中的值（非密码）；textarea 元素中的值；可编辑元素中的值。
属性值：
true 规定应当对元素的文本进行拼写检查；
false规定不应对元素的文本进行拼写检查。

例子

这是可编辑的段落。请试着编辑文本。

（4）contenteditable

用法
contenteditable 属性规定是否可编辑元素的内容。

属性值：
true规定可以编辑元素内容；
false规定无法编辑元素内容；
classname 继承父元素的 contenteditable 属性。

例子

这是一段可编辑的段落。请试着编辑该文本。

三、CSS常用选择器

CSS选择器的作用是从HTML页面中找出特定的某类元素，而常用的CSS选择器有如下几类，一起来看看吧！

1、通配符选择器

通配符选择器常用 ‘*’ 号表示，它是所有选择器里作用范围最广的，能匹配页面中所有的元素。

基本语法格式：*{ 属性1：属性值1；属性2：属性值2；}

例子
使用该选择器定义样式，清除所有HTML标记的默认边距。

*{ margin：0； /*定义外边距*/ padding：0； /*定义内边距*/ }

但实际开发中不建议使用通配符选择器，因为它设置的样式对所有的HTML标记都生效，不管标记是否需要该样式，反而降低了代码的执行速度。

2、标签选择器

标签选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标签指定统一的CSS样式。

基本语法格式：标签名{ 属性1：属性值1；属性2：属性值2；}

所有的HTML标记名都可以作为标签选择器，例如a、body、p、h1等等。用标签选择器定义的样式对页面中该类型的所有标签都有效。

例子
使用p选择器定义HTML页面中所有段落的样式。

p{ font-size: 12px; color: #666; font-family:"微软雅黑"; }

标签选择器最大的优势是能快速为页面中同类型的标签统一样式，同时这也是它的缺点，不能设计差异化样式。

3、类选择器

类选择器使用**‘.’**(英文点号)进行标识，后面紧跟类名。

基本语法格式：.类名{ 属性1：属性值1；属性2：属性值2；}

该语法中，类名即为HTML元素的class属性值，大多数HTML元素都可以定义class属性。

例子

1 2 3 4 5 类选择器 6 12 13 14 二级标题文本 15 段落文本内容 16 段落二文本内容 17 段落三文本内容 18 19

类选择器最大的优点是可以为元素对象定义单独或相同的样式，而且多个标记可以使用同一个类名，可以实现为不同类型的标记指定相同的样式。同时，一个HTML元素也可以应用多个class类，设置多个样式，此时多个类名之间需要用空格隔开，如上述代码中的前两个
标记。

注意：类名的第一个字符不能使用数字，并且严格区分大小写。一般采用小写的英文字符。

4、id选择器

id选择器使用**‘#’**进行标识，后面紧跟id名。

基本语法格式：#id名{ 属性1：属性值1；属性2：属性值2；}

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

例子

1 2 3 4 5 id选择器 6 10 11 12 段落1: id="bold",设置粗体文字。 13 段落2: id="font24", 设置字号为24px。 14 段落3: id="font24", 设置字号为24px。 15 段落4: id="bold font24",同时设置粗体和字号24px。 16 17

注意：同一个id不允许应用于多个标记，虽然很多浏览器并不会报错，但JavaScript等脚本语言调用id时会出错。另外，id选择器不支持像类选择器那样定义多个值。

5、属性选择器

属性选择器可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

语法格式：[标签名称] { 属性1：属性值1；属性2：属性值2；}

注意：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

CSS 选择器参考手册：

选择器描述

[attribute] 用于选取带有指定属性的元素

[attribute=value] 用于选取带有指定属性和值的元素

[attribute~=value] 用于选取属性值中包含指定词汇的元素

[attributeI=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词

[attribute^=value] 匹配属性值以指定值开头的每个元素

[attribute$=value] 匹配属性值以指定值结尾的每个元素

[attribute*=value] 匹配属性值中包含指定值的每个元素

例子

1、为带有 title 属性的所有元素设置样式：

[title] { color:red; }

2、为 title=“W3School” 的所有元素设置样式：

[title=W3School] { border:5px solid blue; }

3、为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：

[title~=hello] { color:red; }

4、为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：

[lang|=en] { color:red; }

5、设置表单的样式
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：

input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; } input[type="button"] { width:120px; margin-left:35px; display:block; font-family: Verdana, Arial; }

使用属性选择器，可以只指定元素的某个属性，还可以同时指定元素的某个属性和其对应的属性值。

6、并集选择器

并集选择器是同时匹配多个选择器，取多个选择器的并集，选择器之间用逗号隔开，如em,strong{ }。

语法格式：
标签名称1,标签名称2 { 属性1：属性值1；属性2：属性值2；}

例子

博客园给最苦网页设计

并集选择器的优点是将多个标签的相同样式提取出来，集体声明，优化代码，方便阅读。

7、后代选择器

后代选择器也称包含选择器，用来选择特定元素的后代。如.asideNav li{ }，表示先匹配第二个选择器的元素，并属于第一个选择器内。

语法格式：
标签名称1 标签名称2{ 属性1：属性值1；属性2：属性值2；}

在CSS中，后代是根据HTML文档中的DOM上下文来决定的。当元素发生嵌套时，内层的元素就成为外层元素的后代。如元素B嵌在元素A内部，B就是A的后代。而且，B的后代也是A的后代，就像家族关系。

定义后代选择器时，外层的元素写在前面，内层的元素写在后面，中间用空格分隔。后代选择器会影响到它的各级后代，没有层级限制。如：

div p { color: red; }

上述选择器中，div 为祖先元素，p 为后代元素，其作用就是选择 div 元素的所有后代 p元素，不管 p 元素是 div 元素的子元素、孙辈元素或者更深层次的关系，都将被选中。换句话说，不论 p 是 div 的多少辈的后代，p 元素中的文本都会变成红色。

例子

后代选择器中的空格，是用来表示后代层级的，当然就不限于二级的。根据需要，从任一个祖先元素开始，直到想应用样式的那个元素，都可以被放到后代选择器链中。如：

首页新房二手房出售房源求购房源租房

上述导航菜单中，假如希望所有锚文本的字体大小是16px，就可以通过后代选择器ul a来选择 ul 元素的所有后代，因为后代选择器会影响到它的各级后代。如：

ul a { font-size: 16px; }

假如又希望第二级列表项的锚文本的字体大小是12px，就可以通过ul.nav ul a的这种多层后代关系的后代选择器，它只选择第二级列表项的锚文本。

ul li a { font-size: 12px; }

当然，这个后代选择器也可以写成ul、li、ul、li、a，以实现更精准的控制。

注意：
1、后代包括儿子，孙子，只要是放在指定标签的后代都是。
2、也可以不用标签名称1、2，也可以用id和class名，分别用id和class来选择。
3、后代选择器可以无限衍生。

8、子代选择器

子代选择器使用**‘>’**表示，如ul>li{ }，表示匹配第二个选择器，且为第一个选择器的元素的后代。

语法格式：
标签名称1>标签名称2{ 属性1：属性值1；属性2：属性值2；}

例子

实例狸花猫大橘猫

注意：
1、只会查找儿子，不会查找其他被嵌套的标签。
2、子元素选择器也可以用其他的id和class选择器来进行查找。 3、子元素选择器也可以通过>符号一直延续下去。

9、兄弟选择器（+和~）

相邻兄弟选择器使用+号表示，如p+a{ }，表示匹配紧跟第一个选择器并匹配第二个选择器的元素，如紧跟p元素后的a的元素。
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。

语法格式：标签名称1+标签名称2 { 属性1：属性值1；属性2：属性值2；}

例子

Document This is paragraph. This is a heading. This is paragraph. This is paragraph.

兄弟只会影响下面的p标签的样式，不影响上面兄弟的样式。
注意这里的’+’的意义跟’and’意义不一样，兄弟选择器的样式是应用在兄弟元素上，跟参照的元素样式无关，如上例只影响p元素的样式，而不影响h1标签的样式。
当两个兄弟元素相同时，会实现一次循环查找：

Document List item 1 List item 2 List item 3

而~ 选择器：作用是查找某一个指定元素的后面的所有兄弟结点。

Document 1 2 3 4 5

10、伪选择器
伪选择器是一种特殊的选择器，它分为伪类选择器和伪对象选择器2种。

1.伪类选择器：
CSS提供了五种基本伪类选择器，分别对应HTML标记的五种状态。

伪类选择器作用应用对象

:hover 定义标记在鼠标悬停(划过)时的样式所有显示标记

:link 定义标记在超链接状态下的样式 a标签

:focus 定义标记在获取焦点时的样式 a标签(IE浏览器不支持)

:visited 定义标记被访问过后的样式 a标签

:active 定义标记在选定时刻下的样式 a标签

例子

以下是5个a标签

链接1 链接2 链接3 链接4 链接5

加点CSS样式：

a{ padding: 10px; color:black; /*初始颜色全为黑色*/ font-weight: bold; } #a1:hover{ color:red; /*当鼠标悬停时链接1变成红色*/ } #a2:link{ background-color: blue; /*给链接2添加蓝色的背景色*/ } #a3:focus{ color:yellow; /*当链接3获取焦点时变为黄色,失去焦点时恢复黑色*/ } #a4:visited{ color:green; /*被访问过后的链接4变为绿色*/ } #a5:active{ background-color: blue; /*鼠标点击的那一瞬间给链接5添加蓝色的背景*/ }

除了以上五种基本伪类选择器之外，CSS还支持诸如：”:first-child“首元素选择器和“:lang()”语言选择器等伪类选择器。

2.伪对象选择器
伪对象选择器根据对象内部的局部元素定义其样式。

伪对象选择器作用

:first-letter 定义文本的第一个字符样式

:first-line 定义文本的首行样式

:before 定义对象之前内容的样式

:after 定义对象之后内容的样式

例子

我是文本我是文本我是文本我是文本

使用:before和:after样式后：

p:before{ content:'我说：“';/*在文本前面追加内容*/ color:red; } p:after{ content:'。”我说完了！';/*在文本结尾追加内容*/ color:red; }

四、HTML5中常用的文本标签

1、标题标签
（1）定义及用法：
HTML中，定义了6级标题，分别为h1. h2、h3、h4、 h5. h6,每级标题的字体大小依次递减，1级标题字号最大，6级标题字号最小。
（2）语法格式：

1号标题 2号标题 3号标题 4号标题 5号标题 6号标题

h系列标签中的内容显示为粗体，而且字的大小从大到小；h系列标签一般只用来定义标题，不建议随便使用。
（3）例子

html中h1~h6标题标签的详细介绍 1号标题 2号标题 3号标题 4号标题 5号标题 6号标题

2、段落标签
（1）定义及用法：

标签用于定义段落。
【注】在HTML5中，段落标签既可以成对使用，也可以单独使用，为规范代码，建议成对使用

标签。
（2）语法格式：

段落文字

（3）例子

段落标签这是段落。这是段落。这是段落。段落元素由 p 标签定义。

3、标签与标签
（1）定义及用法：
标签可插入一个简单的换行符，用来输入空行，而不是分割段落。
标签是一个空标签，意味着它没有结束标签。
规定在文本中的何处适合添加换行符。作用是建议浏览器在这个标记处可以断行，只是建议而不是必定会在此处断行还要根据整行文字长度而定。除了Internet Explorer,其他所有浏览器都支持标签。
（2）语法格式：

文本文本文本文本文本

（3）例子

Document hehhhhhhh hhhhhhh hhhhhh hhhhh tqwetuqwty qwyie gafjksgjsDJGDGASGHGG hfskfjdkafasd

4、标签
（1）定义及用法：
标签用于设置一段文本，使其脱离其父标签的文本方向设置。在发布用户评论或其他您无法完全控制的内容时，该标签很有用。标签主要是让文字的方向发生变化，从左向右或者从右向左。它有一个属性dir，用来定义文本的方向，属性值为ltr，文本从左向右正常方向，属性值为rtl，文本从右向左；默认属性值为auto。
（2）语法格式：

内容

（3）例子

This is an bdi. This is an bdi. This isan bdi.

5、标签、标签与标签
（1）定义及用法：
标签用于定义ruby往释(中文注音或字符)。与标签- 同使用。
标签用于定义字符(中文注音或字符)的解释或发音。
标签在ruby注释中使用，以定义不支持标签的浏览器所显示的内容。
（2）语法格式：

内容(内容)内容(内容)

（3）例子

Document 吉林大学 ( きつりんだいがく ) 吉林大学 ( ji lin da xue )

6、标签
（1）定义及用法：
标签主要用来在规觉上向用户呈现那些需要突出显示或高亮显示的文字，典型应用是搜索结果中高亮显示捏素关键字。
（2）语法格式：

内容

（3）例子

Do not forget to buy milk today.

注意：虽然元素在使用效果上与或元素有相似之处，但三者的出发点是不一样的。元素是作者对文档中某段文字的重要性进行的强调；元素是作者为了突出文章的重点而进行的设置。

7、标签
（1）定义及用法：
标签用于定义日期或时间，也可以两者同时。该元素可以代表24小时中的某一时刻，在表示时刻时，允许有时间差。在设置时间或日期时，只需将该元素的属性“datetime”设为相应的时间或日期即可。
（2）语法格式：

日期

（3）例子

Time 元素 2017/3/6

8、标签
（1）定义及用法：
标签用于定义任何类型任务的运行进度，可以使用标签显示JavaScript中时间函数的进程。属性max：规定需要完成的值；属性value：规定进程的当前值。

（2）语法格式：

（3）例子

html5中progress标签（进度条）的详细介绍 progress标签演示

五、知识应用

1、制作HTML5 logo

源代码

HTML5 logo

2、html制作超级课程表界面

先看看制作的效果

整体构思：综合使用了
标记、列表以及CSS样式。
详细源代码如下：

超级课程表超级课程表周一周二周三周四周五周六周日 03/02 03/03 03/04 03/05 03/06 03/07 03/08 1 2 3 4 5 6 7 8 9 10 11 12 操作系统@第五教学楼南201 电路与电子技术@五教北301 【非本周】形势与政策@五教北702 UI界面设计@第三实验大楼209 视觉设计基础@第三实验大楼207 大学体育（四）武术操@西区山顶球场 Photoshop图像处理@第三实验大楼205 软件工程导论@五教南101 UI界面设计@五教南508 毛泽东思想和中国特色社会主义@五教北504 Photoshop图像处理@第三实验大楼205 电路与电子技术@五教南201 【非本周】操作系统@第三实验大楼209 【非本周】Web前端高级技术@第三实验大楼209 Web前端高级技术@第三实验大楼209 【非本周】电路与电子技术@第三实验大楼209 毛泽东思想和中国特色社会主义@五教北503 软件工程导论@一教307 操作系统@八教底阶1 UI界面设计实验课@第三实验大楼209 Web前端高级技术@第三实验大楼205

心得：通过以上几节课程内容的学习，了解了HTML5的新特性以及一些新增元素及其用法，对web前端设计有了心得认识，通过整理笔记的形式也加深1了自己对所学知识的理解和掌握，能设计出一些简单的样式，有收获是件开心的事！

web前端——HTML5笔记整理与心得分享

一、响应式web设计简介

二、HTML5 新增元素的用法

nav的使用方法

我是Article

读者评论

读者评论

Web编程语言比较

asp

asp.net

php

Welcome to my WWF

For a living planet

简单拖放示例

三、CSS常用选择器

二级标题文本

This is a heading.

2

四、HTML5中常用的文本标签

1号标题

2号标题

3号标题

4号标题

5号标题

6号标题

1号标题

2号标题

3号标题

4号标题

5号标题

6号标题

progress标签演示

五、知识应用

1、制作HTML5 logo

2、html制作超级课程表界面

你可能感兴趣的:(web前端——HTML5笔记整理与心得分享)