HTML5新增元素和css介绍

最新推荐文章于 2023-01-06 10:10:41 发布

luck738

最新推荐文章于 2023-01-06 10:10:41 发布

阅读量306

点赞数

分类专栏： web 前端框架

原文链接：www.lezijie.com

版权

前端同时被 3 个专栏收录

55 篇文章 0 订阅

订阅专栏

框架

25 篇文章 0 订阅

订阅专栏

web

12 篇文章 0 订阅

订阅专栏

HTML5新增元素和css介绍

主要内容

1、HTML5新增元素

2、CSS介绍

3、引入css的方式

4、CSS基础选择器

5、Div+CSS布局

学习目标

节数	知识点	要求
第一节	HTML5新增布局标签	掌握
	视频和音频	掌握
第二节	HTML5新增标签	了解
第三节	css概念	了解
	css作用	掌握
	css语法	掌握
	css特点	了解
第四节	css引入方式	掌握
第五节	基础选择器	掌握
第六节	Div+CSS布局	掌握

HTML5新增布局标签

HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。

1993年HTML的草案发布，在html5版本之前，html共有4个版本.2.0版、3.2版、4.0版，再到1999年的4.01版。

在HTML5出现之前，我们一般采用DIV+CSS布局我们的页面。但是这样的布局方式不仅使我们的文档结构不够清晰，而且不利于搜索引擎爬虫对我们页面的爬取。为了解决上述缺点，HTML5新增了很多新的语义化标签

请添加图片描述

Div+css布局

请添加图片描述

HTML5

<header>...</header>     头部
<nav>...</nav>	          导航
<section>...</section>定义文档中的节。比如章节、页眉、页脚或文档中的其它部分 
<aside>...</aside>        侧边栏
<footer>...</footer>	      页脚
<article>...</article>代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等

请添加图片描述

使用HTML5的新的结构标签，做出上面的布局，代码如下：

<header>定义一个页面或是区域的头部</header>
<div>
     <section>定义一个区域</section>
     <aside>定义页面内容的侧边框部分</aside>
</div>
<footer>定义一个页面或是区域的底部</footer>


/*页面顶部 header*/
header{
    height:150px;
    background-color:#abcdef;
}
/*页面中间 div*/
div{
    margin-top:10px;
    height:300px;
}

section{
    height:300px;
    background-color:#abcdef;
    width:70%;
    float:left;
}
article{
    background-color:#F33;
    width:500px;
    text-align:center;
    margin:0px auto;
}
aside{
    height:300px;
    background-color:#abcdef;
    width:28%;
    float:right;
}
/*页面底部*/
footer{
    height:100px;
    background-color:#abcdef;
    clear:both;
    margin-top:10px;
}

视频和音频

HTML5未出来之前，在线的音频和视频都是借助Flash或者第三方工具实现的，现在HTML5也支持了这方面的功能。在一个支持HTML5的浏览器中，不需要安装任何插件就能播放音频和视频。原生的支持音频和视频，为HTML5注入了巨大的发展潜力。

视频

Video标签定义视频，比如电影片段或其他视频流。

<video src="movie.mp4" controls>
		您的浏览器不支持 video 标签。
</video>

请添加图片描述

音频

audio 标签定义声音，比如音乐或其他音频流。


 <audio src="someaudio.mp3">
		您的浏览器不支持 audio 标签。
</audio>

请添加图片描述

source

标签为媒介元素（比如和）定义媒介资源。标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

<audio controls>
  	<source src="horse.ogg" >
  	<source src="horse.mp3" >
	Your browser does not support the audio element.
</audio>

HTML5新增标签（了解）

figure

用于对元素进行组合。多用于图片与图片描述组合。

<figure>
	<img src="img.gif" alt="figure标签"  title="figure标签" />
	<figcaption>figure的标题</figcaption>
</figure>

请添加图片描述

details

details 用于描述文档或文档的某个部分的细节，类似于下拉列表，兼容性较差，chrome与Safari支持。

<details>
      <summary>指定的标题，用户点击标题时展示下面的所有内容，内容可以是任何形式的内容</summary>
      <div>
          <p>内容描述</p>
      </div>
</details>
当增设open属性时，描述内容默认展示。
<details open>
     <summary>指定的标题，用户点击标题时展示下面的所有内容，内容可以是任何形式的内容</summary>
     <div>
         <p>内容描述</p>
     </div>
</details>

请添加图片描述

mark

主要用来在视觉上向用户呈现那些需要突出的文字。标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。

<p>你是<mark>大长腿</mark>吗？</p>

请添加图片描述

meter

定义度量衡。仅用于已知最大和最小值的度量

<meter min="0" max="100" value="81" low="20" high="80"></meter>

low:最低临界点

high：最高临界点

Min：最小值

Max：最大值

Value：当前值

请添加图片描述

progress

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

<progress max="100" value="20"></progress>

max：定义完成值

value：定义当前值

请添加图片描述

datalist

定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。

datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。

请使用 input 元素的 list 属性来绑定 datalist。

<input id="myCar" list="cars" />
<datalist id="cars">
      <option value="BMW">
      <option value="Ford">
      <option value="Volvo">
</datalist>

请添加图片描述

canvas

定义图形，比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

<canvas id="myCanvas">你的浏览器不支持canvas标签</canvas>
<script type="text/javascript">
    var canvas=document.getElementById('myCanvas');
    var ctx=canvas.getContext('2d');
    ctx.fillStyle='#FF0000';
    ctx.fillRect(0,0,100,100);
</script>

请添加图片描述

CSS介绍

为什么需要CSS

使用css的目的就是让网页具有美观一致的页面，另外一个最重要的原因是内容与格式分离，在没有CSS之前，我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性，当HTML内容非常多时，就会定义很多重复的样式属性，并且修改的时候需要逐个修改，费心费力。是时候做出改变了，所以CSS就出现了。

CSS概念

CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表

1、用于HTML文档中元素样式的定义

实现了将内容与表现分离

提高代码的可重用性和可维护性

2、文件后缀是.css

CSS发展史

1990年，Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年，Web真正走出实验室。

从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。

随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。

1994年哈坤·利提出了CSS的最初建议。而当时伯特·波斯（Bert Bos）正在设计一个名为Argo的浏览器，于是他们决定一起设计CSS。

其实当时在互联网界已经有过一些统一样式表语言的建议了，但CSS是第一个含有“层叠”丰意的样式表语言。在CSS中，一个文件的样式可以从其他的样式表中继承。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合每个人的爱好。

哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议，1995年的www网络会议上CSS又一次被提出，博斯演示了Argo浏览器支持CSS的例子，哈肯也展示了支持CSS的Arena浏览器。

同年，W3C组织（World WideWeb Consortium）成立，CSS的创作成员全部成为了W3C的工作小组并且全力以赴负责研发CSS标准，层叠样式表的开发终于走上正轨。有越来越多的成员参与其中，例如微软公司的托马斯·莱尔顿(Thomas Reaxdon)，他的努力最终令Internet Explorer浏览器支持CSS标准。哈坤、波斯和其他一些人是这个项目的主要技术负责人。1996年底，CSS初稿已经完成，同年12月，层叠样式表的第一份正式标准（Cascading style Sheets Level 1）完成，成为w3c的推荐标准。

1997年初，W3C组织负责CSS的工作组开始讨论第一版中没有涉及到的问题。其讨论结果组成了1998年5月出版的CSS规范第二版。

CSS和HTML之间的关系

1、HTML用于构建网页的结构

2、CSS用于构建HTML元素的样式

3、HTML是页面的内容组成，CSS是页面的表现

语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

请添加图片描述

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

CSS样式表特征

1、继承性

指被包含在内部的标签可以拥有外部标签的样式，比如：text-、font-、line-height，但有些属性不能继承，比如：border、padding、margin

2、层叠性

简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。

3、优先级

样式定义冲突时，按照不同样式规则的优先级来应用样式

CSS注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。

CSS注释以 “/*” 开始, 以 “*/” 结束, 实例如下:

/*这是注释*/

CSS的引入方式

内联样式（行内样式）

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。

特点：缺乏整体性和规划性，不利于维护，维护成本高；

<p style="background: orange; font-size: 24px;">CSS<p>

请添加图片描述

内部样式

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用

<style></style>

标签在文档头部定义内部样式表

特点：单个页面内的CSS代码具有统一性和规划性，便于维护，但是在多个页面之间容易混乱

<head>
    <style> 
       h1 { background: red; } 
    </style>
</head>

外部样式（推荐）

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在（文档的）头部：

<link rel="stylesheet" type="text/css" href="xxx.css">

导入式（了解）

<style type="text/css">
   @import url("css文件路径");
</style>

@import和link的区别？

1、@import是CSS提供加载样式的一种方式，只能用于加载CSS。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义rel连接属性等。

2、加载顺序的差别。当一个页面被加载的时候，link引用的CSS会同时被加载，@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候会比较明显。

3、兼容性的差别。@import在IE5以上才能识别，而link标签无此问题。

4、使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为dom操作元素的样式时，用@import方式的样式也许还未加载完成。

5、使用@import方式会增加HTTP请求，会影响加载速度，所以谨慎使用该方法。

优先级

行内样式>内部样式（外部样式）

注意：内部样式和外部样式优先级一样，写在后面的生效

基础选择器

全局选择器

可以与任何元素匹配，优先级最低，不推荐使用。

*{
     margin: 0;
     padding: 0;
 }
div{
  margin:0 auto;
}

元素选择器

HTML文档中的元素，p、b、div、a、img、body等。

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”。

p{
    font-size:14px;
}

再比如说，我想让“学完前端，继续学Java”这句话中的“前端”两个变为红色字体，那么我可以用标签把“前端”这两个字围起来，然后给标签加一个标签选择器。

<p>学完了<span>前端</span>，继续学Java</p>
 span{
            color: red;
 }

【总结】需要注意的是：

（1）所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等。

（2）无论这个标签藏的多深，一定能够被选择上。

（3）选择的所有，而不是一个。

类选择器

规定用圆点.来定义，针对你想要的所有标签使用。

优点：灵活。


<h2 class="oneclass twoclass">你好</h2>
/*定义类选择器*/
.oneclass{
		width:800px;
}

class属性的特点：

特性1：类选择器可以被多种标签使用。

特征2：类名不能以数字开头

特性3：同一个标签可以使用多个类选择器。用空格隔开。举例如下

     <h3 class="classone classtwo">我是一个h3啊</h3>

而不能写成：

     <h3 class="teshu" class="zhongyao">我是一个h3啊</h3>

ID选择器

针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以”#”来定义。

<h2 id="mytitle">你好</h2>
#mytitle{
    border:3px dashed green;
}

特别强调的是：HTML页面，不能出现相同的id，哪怕他们不是一个类型。比如页面上有一个id为pp的p，一个id为pp的div，是非法的！ID名字不能以数字开头。

一个标签可以被多个css选择器选择：

比如，我们可以同时让标签选择器和id选择器作用于同一个标签。（用到了层叠）如下：

请添加图片描述

然后我们通过网页的审查元素看一下效果：

请添加图片描述

现在，假设选择器冲突了，比如id选择器说这个文字是红色的，标签选择器说这个文字是绿色的。那么听谁的？
实际上，css有着非常严格的计算公式，能够处理冲突.

一个标签可以被多个css选择器选择，共同作用，这就是“层叠式”的第一层含义

合并选择器

语法：选择器1,选择器2,…{ }

作用：提取共同的样式，减少重复代码

.header,.footer{height:300px;}

选择器的优先级

css中用四位数字表示权重，权重的表达方式如：0，0，0，0
元素选择器的权重为0001
class选择器的权重为0010
id选择器的权重为0100
内联样式的权重为1000

优先级从高到低：

行内样式>ID选择器>类选择器>元素选择器

Div+CSS布局

优点

1、符合W3C标准。这保证您的网站不会因为将来网络应用的升级而被淘汰。
2、对浏览者和浏览器更具亲和力。由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形。这样就支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是什么，您的网站都能很好的兼容。
3、使页面载入得更快。页面体积变小，浏览速度变快，由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小。相对于表格嵌套的方式，DIV+CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。
4、保持视觉的一致性。以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS的制作方法，将所有页面，或所有区域统一用CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差。
5、修改设计时更有效率。由于使用了DIV+CSS制作方法，使内容和结构分离，在修改页面的时候更加容易省时。根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式，在团队开发中更容易分工合作而减少相互关联性。
6、搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页，由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中代码更加简洁，正文部分更为突出明显，便于被搜索引擎采集收录。

DIV

可定义文档中的分区或节（division/section）。

标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是

固有的唯一格式表现。可以通过

的 class 或 id 应用额外的样式。



<div class="news">
  <h2>News headline 1</h2>
  <p>some text. some text. some text...</p>
  ...
</div>

布局时需要的属性

width:数值; 宽度

height:数值; 高度

background-color:颜色; 背景颜色

float:left; 使div不占据一行浮动

实例


<body>
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</body>


<style>
        .header{
            height: 100px;
            background-color: #fcc;
        }
        .content{
            height: 400px;
            background-color: #ff9;
        }
        .footer{
            height: 100px;
            background-color: #ccf;
        }
</style>

请添加图片描述