Web前端开发现状及基础内容

·  阅读 598

主要内容

1、Web前端现状

2、IDE介绍

3、Webstorm使用

4、HTML介绍

学习目标

节数知识点要求
第一节Web前端现状了解
第二节IDE介绍了解
第三节Webstrom使用掌握
第四节HTML介绍熟悉

Web前端现状

市场缺口

前端程序员缺口非常大,因为它正式成为一个岗位才几年,国内最早出现前端招聘岗位在2012年左右,在此之前,前端工作基本上都是由服务端工程师包办的,或者是由设计师来产出HTML页面。随着现代互联网应用的火爆,前端难度加大,导致后台程序员不能完全搞定,所以企业们急切需要真正懂前端技术的“前端人员”。

发展前景

近十年以来,IT行业发展火热,衍生了很多新职业,例如UI设计师、开发工程师、软件测试工程师等等,在众多备受瞩目的新生职业中,Web前端工程师是其中的一员。

Web前端在IT行业真正受到重视大概也就六七年的时间。随着互联网的迅猛发展,各种互联网项目也不断兴起,对用户体验提出了更高的要求,前端开发也由此逐渐成为了重要的研发角色。从2012年至今,“Web前端工程师”的需求持续走高,薪酬也是水涨船高,所以,有不少人立志要成为前端开发工程师,但同时又担心Web前端开发到底还能热多久。

“女怕嫁错郎,男怕入错行”,今天,就让我这位资深的Web前端的“程序猿”来给大家分析一下Web前端开发在2019年的发展前景和就业形势吧。

在了解Web前端的发展前景和就业形势前,我们还是来了解一下什么是Web前端和学习Web前端应该掌握哪些知识吧!

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PvlqJFD7-1631930828652)(010100-前端开发现状及基础内容.assets/clip_image002.jpg)]

什么是web前端

Web前端是互联网时代软件产品研发中不可缺少的角色。从广义上来讲,所有用户终端产品与视觉和交互有关的部分,都属于前端工程师的专业领域。

从狭义上讲,Web前端就是使用HTML、CSS、JavaScript等专业技能和工具将产品的UI设计稿实现成网站产品,涵盖用户PC端、移动端等网页,处理视觉和交互问题。

在Web前端这个岗位兴起之前,html+css的工作是被视觉人员所承担的,而js这部分则是由后端完成的。随着智能手机和移动互联网的普及,PC端、手机端等五花八门的应用占领着每个人的手机,随之而来各种定制化的UI风格让兼容问题变得越来越头疼。因此,有企业开始把html+css+js这部分工作独立出来,由一个新的岗位来处理,成为了一个处理视觉和交互的综合岗位,这才有了Web前端这个岗位的出现。

因此,Web前端开发行业是伴随Web兴起而细分出来的行业。实际上,Web前端是最接近产品和设计的工程师,起到衔接产品和技术的作用,它存在在互联网的每个角落,我们使用的微信里面的各种功能、小程序等都离不开web前端技术。

做一名web前端工程师需要哪些知识

与其他计算机主流技术所不同的是,Web前端所包含的知识模块很多,就目前而言,HTML、CSS、JS、DOM是目前前端技术最为基础也是最为主要的四大模块,但会随着实际需求而有所改变。

一名优秀的Web前端工程师,需要JavaScript语言基础扎实,具有良好的规范开发习惯;熟悉常用的设计模式,熟练使用Vue、Angular技术栈开发;能够熟练使用angular、vue、echarts、jquery、react等框架进行传统开发;要熟悉MVVM、MVC开发模式;熟悉前端工程化、自动化技术,可以根据需求配置Gulp文件及更改Webpack配置文件;熟练使用git版本管理工具。

此外,还要熟悉HTML5、CSS3的新特性,了解不同浏览器之间的差异,制作出的页面能够有很好的兼容性。

Web发展得很快,几乎每天都在变化!如果没有快速学习的能力,就跟不上 Web发展的步伐。作为前端工程师仅仅依靠今天的知识是无法适应未来的,必须不断提升自己,不断学习新技术、新模式。因此,不仅作为新人小白要努力学习,提高自己;就连已经入职三五的前端开发工程师,也需要不断学习,了解前端技术的变化,提高自己的技术技能。

web前端的前景和就业形势

学习Web前端的就业面很广,选择的岗位有:前端开发工程师、资深前端开发工程师、网站重构工程师、前端架构师等等。

虽然近两年大数据、人工智能等很火,但Web前端开发依然是十分热门的,特别是随着谷歌、YouTube、FireFox等大型企业纷纷将视线转向HTML5,前端开发已经进入HTML5时代,所以,Web前端在今后十年仍有很大的发展空间。

据统计,我国HTML5前端工程师人员的缺口将达到10多万,因此,Web前端工程师是一个非常有“钱”途的职业,并且薪酬会根据技能的深入而有不同程度的增长,其中北京、上海、广州、深圳等地前端工程师的薪资待遇更是一路飙升。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1BJ4B7lv-1631930828655)(010100-前端开发现状及基础内容.assets/clip_image003.png)]

所以总的来说, web前端在目前和未来都是稀缺的,是一个有“钱”途的职业。

谁和前端人员打交道

产品经理把用户可能的需求提出来,和前端还有后端交涉,这个东西如何实现。确定可行后,由设计设计出UI图,前端把它做出来,第一步可能是静态的,纯html css,然后我们再用angularjs、js实现一些业务方面的功能,最后和后台的接口进行联调,一般会是这么一个过程。那运营呢?有时候会需要你配合他们的营销方案对产品做一些调整,比如圣诞节到了,它要求你对公司的官网加一些雪花的特效。这也是需要你配合的。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N1Nm3Um4-1631930828659)(010100-前端开发现状及基础内容.assets/clip_image006.jpg)]

常用网站

w3cschool、w3c菜鸟、百度

前端全套教程

这个里面是前端全套教程,你们有时间要多去学习,里面推荐几个人,阮一峰,有句话叫阮一峰出品,必属精品,他是学金融的,现在在IT方面这么有成就,转行过来的同学是不是更有信心了?

IDEA介绍

IDEA介绍

我们都知道网上的页面是编程人员写出来的,用什么写的呢?用编码工具或IDE集成开发环境。

编码工具:

辅助程序员编写源代码的工具,它类似word,我们写文档会打开word文档来编写。

写代码也一样,需要借助工具来开发。

常见的编码工具有记事本、sublime Text、notepad++、VSCode、HBuilder等

记事本sublime TextVSCodenotepad++HBuilder
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TI1zGqFr-1631930828662)(010100-前端开发现状及基础内容.assets/clip_image012.jpg)]屏幕快照 2020-09-26 下午9.03.01
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YsYZTMqM-1631930828663)(010100-前端开发现状及基础内容.assets/clip_image013.jpg)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ET1Fep6E-1631930828664)(010100-前端开发现状及基础内容.assets/clip_image014.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TWFmy3oL-1631930828665)(010100-前端开发现状及基础内容.assets/clip_image016.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yWHdaF0W-1631930828665)(010100-前端开发现状及基础内容.assets/clip_image018.jpg)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2qv8Jqls-1631930828666)(010100-前端开发现状及基础内容.assets/clip_image020.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vtNoooqh-1631930828667)(010100-前端开发现状及基础内容.assets/clip_image022.jpg)]

这里我们是不推荐使用Dreamweaver,它更多的是针对前端设计人员来用,而不是我们编程人员。

其它语言的常见IDE有:eclipse、visio studio等。

浏览器介绍

前面讲了IDE用来编码,写好的代码如何展示?通过浏览器来展示。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CzdloFUo-1631930828668)(010100-前端开发现状及基础内容.assets/clip_image024.jpg)]

以上这些,都不要再使用,身为前端,要不论是学习还是工作都应该使用更符合业W3C规范的浏览器。

推荐使用的浏览器:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pFjGGtAY-1631930828668)(010100-前端开发现状及基础内容.assets/clip_image029.jpg)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Eoff9e7t-1631930828670)(010100-前端开发现状及基础内容.assets/clip_image030.jpg)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f85g0s2r-1631930828671)(010100-前端开发现状及基础内容.assets/clip_image028.jpg)]

前两者都非常的优秀,它们比其它浏览器优先之处在于

1.速度快,不是指打开的速度,而是指解析页面CSS、JS的速度

2.支持更多新的功能,比如最新的标准html5、css3的一些新功能

3.插件化开发,chrome和firefox提示了应用商店,你可以安装自己喜欢的插件,定制自己的浏览器

调试工具

chrome自带的开发者工具、firebug、IE有HttpWatch

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zoHN43ik-1631930828672)(010100-前端开发现状及基础内容.assets/clip_image034.jpg)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9TPm8j3L-1631930828672)(010100-前端开发现状及基础内容.assets/clip_image035.jpg)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zi1s2559-1631930828673)(010100-前端开发现状及基础内容.assets/clip_image036.jpg)]

Webstorm使用

安装

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kUSAzhDX-1631930828674)(010100-前端开发现状及基础内容.assets/clip_image038.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ag7FGkHO-1631930828675)(010100-前端开发现状及基础内容.assets/clip_image040.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ClzNdShS-1631930828675)(010100-前端开发现状及基础内容.assets/clip_image042.jpg)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CtE5Gzbg-1631930828675)(010100-前端开发现状及基础内容.assets/clip_image044.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RGYZDbq1-1631930828676)(010100-前端开发现状及基础内容.assets/clip_image046.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jOMqbOUJ-1631930828676)(010100-前端开发现状及基础内容.assets/clip_image048.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m3OMFVPh-1631930828677)(010100-前端开发现状及基础内容.assets/clip_image050.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pZUPdZen-1631930828678)(010100-前端开发现状及基础内容.assets/clip_image052.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9mi1Qgue-1631930828678)(010100-前端开发现状及基础内容.assets/clip_image054.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6dY3cUB7-1631930828679)(010100-前端开发现状及基础内容.assets/clip_image056.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aRkQKe09-1631930828679)(010100-前端开发现状及基础内容.assets/clip_image058.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XofDqwzM-1631930828680)(010100-前端开发现状及基础内容.assets/clip_image060.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lq941LRq-1631930828681)(010100-前端开发现状及基础内容.assets/clip_image062.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GCLim035-1631930828682)(010100-前端开发现状及基础内容.assets/clip_image064.jpg)]

常规操作

创建项目

file-->new project-->指定路径-->点击上面的新建按钮创建一个文件夹,然后ok,创建好项目后,项目文件夹中会带有.idea这样一个文件

创建文件

右击项目-->new-->html file-->输入文件名-->下面的下拉框可以选择h5还是h4或是xhtml类型的文档,我们选择h5,也就是默认的。写名字的时候不用加html后缀,webstrom会自动为我们添加

重命名

右击html文件-->refactor-->rename---改好后回车

删除文件

右击html文件-->delete-->ok(或者直接按电脑上的del键,回车)

常规配置

如何更改主题

file->setting->editor->colors Scheme ->General->scheme选择你的主题

如何更改字体大小

file->setting->editor->colors Scheme->Color Scheme Font->Size修改字体大小

如何设置代码自动换行

file-settings-editor->general-> Soft-wrap files:*.md; .txt; .rst; .adoc;.html;.css;.js;

修改快捷键主体

file->settings->keymap

导入主题

file->import settings->导入文件后重启,再去主题设置里面选择刚导入的主题

HTML介绍

什么是HTML

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: HyperText Markup Language

(HTTP,HTTPS,XML)

· HTML 不是一种编程语言,而是一种标记语言

· 标记语言是一套标记标签 (markup tag)

· HTML 使用标记标签来描述网页

· HTML 文档包含了HTML 标签及文本内容

· HTML文档也叫做 web 页面

· 用该语言编写的文件,以 .html或 .htm为后缀

· HTML不区分大小写,建议小写

什么是标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

· HTML 标签是由尖括号包围的关键词,比如

· 封闭类型标记(也叫双标记),必须成对出现,如

· 标签对中的第一个标签是开始标签,第二个标签是结束标签

· 开始和结束标签也被称为开放标签和闭合标签

· 非封闭类型标记,也叫作空标记,或者单标记,如

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zuhacLps-1631930828682)(010100-前端开发现状及基础内容.assets/clip_image066.jpg)]

什么是元素

"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签,如下实例:

HTML 元素:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7LE2K2iM-1631930828683)(010100-前端开发现状及基础内容.assets/clip_image068.jpg)]

web浏览器

Web浏览器(如谷歌浏览器,Internet Explorer,Firefox,Safari)是用于读取HTML文件,并将其作为网页显示。

浏览器并不是直接显示的HTML标签,但可以使用标签来决定如何展现HTML页面的内容给用户:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2cOVxBJ7-1631930828684)(010100-前端开发现状及基础内容.assets/clip_image070.jpg)]

HTML版本

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bqXjXp3z-1631930828684)(010100-前端开发现状及基础内容.assets/clip_image071.png)]

HTML属性

属性是用来修饰元素的,属性必须位于开始标签里,一个元素的属性可能不止一个,多个属性之间用空格隔开,多个属性之间不区分先后顺序。

每个属性都有值,属性和属性的值之间用等号链接,属性的值包含在引号当中,属性一般以属性名/值对的形式出现。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6dMLBpLx-1631930828685)(010100-前端开发现状及基础内容.assets/clip_image074.jpg)]

HTML注释

为代码添加适当的注释是一种良好的编程习惯,注释只在编辑文本情况下可见,在浏览器展示页面是并不会显示,注释标签不支持任何属性。

语法:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oF9rYvS9-1631930828685)(010100-前端开发现状及基础内容.assets/clip_image076.jpg)]

HTML基本结构

<!DOCTYPE html>  
<html lang="en">  
  <head>       
    <meta charset="UTF-8"/>       
    <title>标题</title>  
  </head>  
  <body>  
  </body>  
</html>  
复制代码

doctype的作用

DOCTYPE是document type (文档类型) 的缩写。声明位于文档的最前面,处于标签之前,它不是html标签。主要作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分

删除会发生什么

在W3C标准出来之前,不同的浏览器对页面渲染有不同的标准,产生了一定的差异。这种渲染方式叫做混杂模式。在W3C标准出来之后,浏览器对页面的渲染有了统一的标准,这种渲染方式叫做标准模式。不存在或者形式不正确会导致HTML或XHTML文档以混杂模式呈现,就是把如何渲染html页面的权利交给了浏览器,有多少种浏览器就有多少种展示方式。因此要提高浏览器兼容性就必须重视

严格模式和混杂模式

严格模式和混杂模式都是浏览器的呈现模式,浏览器究竟使用混杂模式还是严格模式呈现页面与网页中的DTD(文件类型定义)有关。

严格模式:又称标准模式,是指浏览器按照W3C标准来解析代码,呈现页面

混杂模式:又称为怪异模式或者兼容模式,是指浏览器按照自己的方式来解析代码,使用一种比较宽松的向后兼容的方式来显示页面。

我们写好一份HTML文档,这时候全是代码,用户看不懂,是不是得用浏览器里的引擎给翻译一下?用户才看得到界面。关键是HTML有好多个版本,浏览器怎么知道按哪个版本解释?你老爸让你去扫地,你老妈让你去洗碗,你是听谁的,都是长辈,这时候如果你们家规定好了,凡事都听你老爸的,这个就很好解决了,去扫地。这个DTD文档模型就是这个意思,管它多少个HTML版本,我规定好我写的这个HTML文档以哪个为准就行,那我就知道我最终页面会被解释成一个什么样子。

​ DTD文档模型=DOCTYPE=DOCTYPE文档声明

常见的DOCTYPE声明

HTML5

<!DOCTYPE html>
复制代码

HTML 4.01 Strict 该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
复制代码

HTML 4.01 Transitional 该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
复制代码

HTML 4.01 Frameset

该 DTD 等同于 HTML 4.01 Transitional,但允许框架集内容。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">  
复制代码

XHTML 1.0 Strict 该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。必须以格式正确的 XML 来编写标记。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
复制代码

XHTML 1.0 Transitional 该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。必须以格式正确的 XML 来编写标记。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
复制代码

XHTML 1.0 Frameset

该 DTD 等同于 XHTML 1.0 Transitional,但允许框架集内容。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">  
复制代码

HTML标签

定义 HTML 文档,这个元素我们浏览器看到后就明白这是个HTML文档了,所以你的其它元素要包裹在它里面,标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。

<html>
  <head>
    <title>我的第一个 HTML 页面</title>
  </head>
  <body>
  </body>
</html>

复制代码

head标签

Head标签用于定义文档的头部,它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

     <head lang="en"></head>  
复制代码

​ 下面这些标签可用在 head 部分:

​ 、、、、 。

​ 应该把 标签放在文档的开始处,紧跟在 后面,并处于 标签之前。

​ 文档的头部经常会包含一些 标签,用来告诉浏览器关于文档的附加信息。

lang是language的意思,lang=”en”属性对每张页面中的主要语言进行声明,en代表了英文,只是个声明,声明了它,对搜索引擎和浏览器更友好,并不会更改显示内容。它还有常见的值是zh-CN,代表了中文。(搜索引擎不会判断该站点是中文还是英文,它让搜索引擎知道你的站点是中文站,这些都是html规范,越规范,越容易被收录)

title标签

1.可定义文档的标题。

2.它显示在浏览器窗口的标题栏或状态栏上。

3.当把文档加入用户的收藏夹或书签列表时,标题将成为该文档的默认名称。

4. 标签是 标签中唯一必须要求包含的东西,就是说写head一定要写title,不是说其它的不加,而是title一定要加。

5.title写和你网页相关的关键词有利于SEO优化

<html>
  <head>
    <title>我会显示在收藏栏里</title>
  </head>
      <body>...</body>
</html>	

复制代码

SEO是搜索引擎优化的英文缩写。通过对网站内容调整,满足搜索引擎的排名需求,从而提高自己网站被搜索引擎平台录取的几率,从而把精准用户带到网站。

​ 网站都有目标群体,通过title、meta标签可以让目标群体通过关键词找到你的网站,所以你定义的关键词决定了会吸引什么样的群体。

meta标签

META标签用来描述一个HTML网页文档的属性,此处的charset=”utf-8”是说当前使用的是utf-8编码格式,在开发中我们经常会看到utf-8,或是gbk,这些都是编码格式。国外一般会用gbk、gb2312,国内通常使用utf-8。

元素可提供有关页面的元信息(meta-information),用来向浏览器或搜索引擎描述页面。比如文档的描述和关键词。它只可以放在head中。属于元信息标签。

常见的meta有:

Keywords(关键字) keywords用来告诉搜索引擎你网页的关键字是什么。

<meta name="keywords" content="web前端,乐字节">    
复制代码

description(网站内容描述) description用来告诉搜索引擎你的网站主要内容。

<meta name="description" content="乐字节,web前端培训">      
复制代码

author作者 标注网页的作者

 <meta  name="author" content="root,root@xxxx.com">    
复制代码

标签相互嵌套

标签之间可以相互嵌套,但要注意嵌套顺序

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TjW7X6nn-1631930828687)(010100-前端开发现状及基础内容.assets/clip_image078.jpg)]

语义化标签

什么是HTML语义化标签

语义化的标签,旨在让标签有自己的含义。

<p>一行文字</p>
<span>一行文字</span>
<nav></nav>
<footer></footer>
复制代码

如上代码,p 标签与 span 标签都区别之一就是,p 标签的含义是:段落。而 span 标签则没有独特的含义。

语义化标签的优势

1、代码结构清晰,方便阅读,有利于团队合作开发。

2、方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以语义的方式来渲染网页。

3、有利于搜索引擎优化(SEO)。

作业

安装IDE、熟练使用快捷键

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改