输入“/”快速插入内容

HTML常用标签

1、导学
HTML5HTML语言的第五次重大修改版本,提供了新的元素,属性和行为。也就是说,它是在我们前面所学习的HTML语言中增加了新的标签,新的属性和行为,目的就是为了更好的适应移动开发。所以说,在学习HTML5的时候,就是学习新增的内容。
那么HTML5增加了哪些新的内容呢?
语义特性,本地存储特性,设备兼容特性,网页多媒体特性,三维,特效(动画),CSS3(后面课程会详细讲解) 特性等。
通过上面的描述,我们发现新增的内容中包含了新增的标签,新的CSS(css3),新的JavaScript(上面提到的行为就是指的JavaScript)等,而这些技术的集合我们有时称之为HTM5和它的朋友们,但是为了简单方便,我们一般把这些新增内容统称或者是缩写为HTML5.这时,我们就明白了以上就是HTML5的一种广义的说法。
所以说广义的HTML5指的就是HTML5本身+CSS3+JavaScript.
关于HTML5在这还需要你注意一个问题就是关于浏览器兼容性的问题,目前所有的主流浏览器(Firefox(火狐浏览器),IE9及其更高版本,Chrome(谷歌浏览器),SafariOpera等)都支持HTML5,IE9以下浏览器是不支持的,但是HTML5是未来的趋势,所以我们必须要学习。
对于本节课,我们就来学习HTML5新增的特性,但是在这还是有必要声明一下,关于HTML5新增的特性非常多,但是我们主要专注的是开发中常用的新特性。
通过本节课的学习,希望你掌握以下关于HTML5 的新特性。
HTML5新增语义化标签
HTML5新增多媒体标签
HTML5新增input表单,表单属性
2、HTML5新增语义化标签
在讲解HTML5新增语义化标签内容前,需要你先来思考一个问题就是什么是语义化标签?
回答非常好,就是我们看到这个标签,就知道该标签的作用是什么。例如<p>标签就是用来分段,<h1>设置标题等。
但是在以前我们所学习的HTML标签语义化中,还是有一定的问题的。例如:对网页进行布局,以前我们基本都是使用<div>标签来完成,但是对搜索引擎来说,<div>标签是没有语义的。这样不利于搜索引擎优化
关于搜索引擎优化,在这做一个简单的介绍,这块内容只要了解一下就可以。
搜索引擎优化,也称之为SEO(Search Engine Optimization)优化.
搜索引擎,对我们来说并不陌生,我们经常使用的“百度搜索”,“谷歌搜索”等都是搜索引擎。那么什么是搜索引擎优化呢?简单理解就是,当我们做完了一个网站例如一个电商网站,然后上传到了互联网。
那么我们非常希望用户通过百度等搜索引擎可以搜索到我们的网站,并且希望排名尽量靠前,例如在搜索结果的第一页就能展示我们的网站,你可以想一下,如果在搜索结果第一页展示我们的网站,那么我们网站被用户访问的概率就非常大,这样就能给我们的网站带来很大的流量,所以说搜索引擎优化其实就是改进网站在搜索引擎中排名的一种技术。
当然现在有专门的人员来做搜索引擎优化,但是,对我们前端开发人员来说,在设计网页的时候也要尽量考虑到这块内容,让所设计的网页更容易被搜索引擎搜索到,例如,在设计网页的时候尽量使用具有语义化的标签来进行设计,因为标签语义化的目的就是为了对搜索引擎更加的友好,这样有了良好的语义和网页结构,我们的网页就更容易被搜索引擎搜索到(关于搜索引擎优化更多内容,大家可以学习这门课程:https://www.boxuegu.com/freecourse/detail-1210.html)。但是,在以前进行网页布局设计的时候,我们大部分情况都是使用<div>标签来完成的,例如:
代码块
<div class="header">头部内容区域</div>
<div class="nav">导航条</div>
<div class="content">具体内容</div>
<div class="footer">底部区域</div>
以上的代码,是我们以前经常使用的方式,可以通过这种方式,对网页进行布局的划分。但是问题是,<div>标签是没有语义的,也就是说搜索引擎无法识别这些<div>具体的含义是什么,对搜索引擎来说这些就是一些基本的标签,不利于搜索引擎的优化。在HTML5中,为了解决这个问题,新增了一些语义化的标签,如下所示:
<header> 头部标签
<nav> 导航标签
<article> 内容标签
<section> 块级标签
<aside> 侧边栏标签
<footer> 尾部标签
在什么场景下会使用这些标签呢?
<header> 头部标签:用来包含所有通常放在页面头部的内容,例如页面的标题,网站Logo图片,搜索框等内容,如下图所示
在上图中,页面的标题,Logo图片等都是放到<header>标签中的。
<nav> 导航标签: 通过这个名字,我们就可以想到在这个标签中通常放的是具有导航性质的链接,例如导航条。如下图所示: