⑴ 什么是 HTML 标签语义化
作为一个前端开发人员，你要是没有听说过 CSS，那你肯定是一个 “out-man” 。随着 CSS 的深入人心，结构、表现与行为的逐渐分离，HTML 语义化成了炙手可热的卖点。 语义化的 HTML 首先要强调 HTML 结构一个网页就好像一幢房子，HTML 结构就是钢筋混泥土的墙，一幢房子如果没有钢筋混泥土的墙那就是一堆废砖头，也就称不上是房子了。CSS 是装饰材料，是油漆，是用来装饰房子的。CSS 如果没有 HTML 结构那也就什么都不是了，没有了实际使用价值。CSS 完全依靠引用它的 (X)HTML 文档。如果你想使 CSS 的能力发挥到极致，提供一个既干净又有结构的 HTML 是非常必要的。 其实HTML 中的标签都有他自身的含义，只是常常被忽视——就像表格一直充当着网页布局的角色。还好随着 CSS 的重现江湖，表格也终于回到他的本质工作——列表数据。它会告诉我们说：“这行是一个标题；这几行组成了一个段落；这些文字是项目列表……”在做前端开发的时候要记住：HTML 告诉我们一块内容是什么（或其意义），而不是它长的什么样子。写语义化的 HTML 结构其实很简单，首先掌握 HTML 中各个标签的语义，在看到内容的时候想想用什么标签能更好的描述它，是什么就用什么标签。<Hx><h1>、<h2>、<h3>、<h4>、<h5>、<h6> 作为标题使用，并且依据重要性递减，<h1> 是最高的等级。<p>段落标记，知道了 <p> 作为段落，你就不会再使用 <br /> 来换行了，而且不需要 <br /> 来区分段落与段落。<p> 中的文字会自动换行，而且换行的效果优于 <br />。段落与段落之间的空隙也可以利用 CSS 来控制，很容易而且清晰的区分出段落与段落。<ul>、<ol>、<li><ul> 无序列表，这个被大家广泛的使用，<ol> 有序列表也挺常用。在 web 标准化过程中，<ul> 还被更多的用于导航条，本来导航条就是个列表，这样做是完全正确的，而且当你的浏览器不支持 CSS 的时候，导航链接仍然很好使，只是美观方面差了一点而已。<dl>、<dt>、<dd><dl> 就是“定义列表”。比如说词典里面的词的解释、定义就可以用这种列表。<em>、<strong><em> 是用作强调，<strong> 是用作重点强调。<table>、<td>、<th>、<caption>、 summary(X)HTML中的表格不再是用来布局。如果是为了标记列表的数据，就应该使用表格了。<th>为表格标题，属性 summar 为摘要（要想提高搜索的排名这个绝对不应该少），<caption> 标签为首部说明，<thead> 标签为表格头部，<tbody> 标签为表格主体内容，<tfoot> 标签为表格尾部。<ins>、<del>知道<del> ，就不要再用 <s> 做删除线了，用 <del> 显然更具有语义化。而且 <del> 还带有 <cite> 和 <datetime> 来表明删除的原因以及删除的时间。<ins> 是表示插入，也有这样的属性。<abbr>、<acronym><abbr> 标签是表示 web 页面上的简称，<acronym> 标签为取首字母缩写。alt 属性和 title 属性title 属性用来为元素提供额外说明信息，但是并不是必须的。alt 属性为不能显示图像、窗体或 applets 的用户代理（UA），指定替换文字。替换文字的语言由 lang 属性指定。让你语义化 HTML 结构的无数条理由：1、去掉或样式丢失的时候能让页面呈现清晰的结构。HTML 本身是没有表现的，我们看到例如 <h1> 是粗体，字体大小 2em；<strong> 是加粗的， 不要误会这是HTML的表现，这些其实是 HTML 默认的 CSS 样式在起作用。所以去掉或样式丢失的时候,也能让页面呈现清晰的结构，增强页面的可读性。 2、屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页。如果你使用的含语义的标记，屏幕阅读器会根据你的标签来判断网页的内容，而不是一个字母一个字母的拼写出来。 3、PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（因为这些设备对 CSS 的支持较弱）使用语义标记可以确保这些设备以一种有意义的方式来渲染网页。理想情况下，观看设备的任务是符合设备本身的条件来渲染网页。 4、搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。搜索引擎的爬虫也是网站的“访客”，现在它们是极其宝贵的用户。没有他们的话，搜索引擎将无法索引你的网站，然后一般用户将很难过来访问。 5、便于团队开发和维护在团队中大家都遵循同一个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。
⑵ 前端语义化是什么意思
1、“语义化”指的是机器在需要更少的人类干预的情况下能够研究和收集信息，让网页能够被机器理解，最终让人类受益。
2、语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用
3、根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
⑶ 前端是有多难看完你就知道了
最近感觉追不动前端的发展了，写篇文章感叹一下。
HTML
我知道有一些学校会教一些简单的网页制作，就是用 Dreamweaver 点一点的那种。大多也会留作业，最后交作业的时候看起来也像模像样。
只要不看代码。
看了代码感觉宁愿选择死亡。
table 布局，无意义的 dom 节点。大小写混用，缩进混乱。
作为一个前端工程师，至少要写明白自己写的声明是什么意思对吧？
然后还得减少不必要的 dom 节点，毕竟很多文章说节点多会影响渲染速度(ps: 我是不在乎的，我觉得有点儿矫枉过正的味道了)
然后比较重要的一点儿是对于语义化标签的见解。比如什么时候该用 ul, 什么时候该用 section, aside
至于 head 里面的那些无聊的声明只要会复制粘贴就好了，我觉得没什么意思
自信做到这些的应该算差不多了
文章说的是前端有多难，很多人都觉得这些标签简单。然而想象一下，要写多少的标签才能理解语义化的意义？要写多少页面才能真正的明白这个节点应该写什么标签？如何组合才算合理？
CSS
然后是关于 CSS，我觉得这方面是很复杂的。并不像很多人觉得只是一些单词的组合。
一开始我会改 background-color 觉得开心得不行，以为掌握了
后来无限突破视野。
在第一次写超过50个class之后就感觉想死，重复性劳动，样式修改调试，写法丑。。。
接触到 Sass 之后像是发现了新大陆，有一段时间甚至不会写原生 css 语法了。
然后折腾: Sass -> Stylus
到这里结束了么？ naive
后面还有postcss, cssnext 这些东西。
在 react 生态中还有 css-moles, css-in-js 这些鬼东西。
虽然语法都不是很难。但是这么长时间的折腾下来，虽说提升是有的，但并没有感觉到生产力有多少巨大的提升。
css 到这里还没完。
还有BEM的命名方式要去理解。
到这里依旧没有完。
css3 的新特性，还有各种 hack。比如如何实现footer始终在底部，内容始终撑满全局？如何实现条纹？
到这里结束了么？
依旧没完。
css stage 4 等着去学习。
还有精力？
可以试着多做些兼容性相关的东西。会崩溃，相信我
到这里？
在我的视野中差不多算结束了，然而有谁能确定明天有没有一个什么new-css之类的东西解决什么问题。
JS
来了来了，前端的一个核心。
说JS轻松么？咱们来扯扯。
首先是各种 dom 的增删改，然后是ajax相关。学会了差不多能做简单的页面了。
然后对异步的理解。只有理解了异步才能正常地写js。
然后是对js语言特性的理解。比如ES5如何实现继承什么的，闭包。
总之这些就是面试题总是会问的东西。
之后还应该理解设计模式对吧？
到这里是正常的语言应该学习的内容了。然而js到这里只是起步。
之后一个前端工程师还得会 ES2015/2016 之类的吧。现在不写个async谁好意思说自己是写前端的？
之后应该是配合工具了，后文说。
继续顺着语言往下说。会了 ECMAScript 就能做个合格的前端了么？
还早呢。
之前火的 coffee script 现在不行了，然而 TypeScript 火了啊。不学一下怎么好意思追前端？
ts 对于之前写 Java, C# 的非常友好，基本语法没什么变化。然而可苦了那些不写这些语言的同学。语法改变倒是其次，思维方式的转变才是难以接受的。
现在还有 Elm 了。。。
我觉得我老了，追不上了
⑷ 前端基础必备知识有哪些
基础：HTML/CSS/JavaScript
框架：VUE
UI：elementUI
⑸ 为什么前端那么多div
其实并不是div多不多的问题，发展到现在前端代码编写鼓励使用语义化标签，如
<title>：页面主体内容。
<hn>：h1~h6，分级标题，<h1>与<title>协调有利于搜索引擎优化。
<ul>：无序列表。
<li>：有序列表。
<header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。
<nav>：标记导航，仅对文档中重要的链接群使用。
<main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
<article>：定义外部的内容，其中的内容独立于文档的其余部分。
<section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
<footer>：页脚，只有当父级是body时，才是整个页面的页脚。
<small>：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。
<strong>：和em标签一样，用于强调文本，但它强调的程度更强一些。
等等...
但是实际编写过程中的div使用更方便，所以频率比较高而已
⑹ 学习前端html与html5有什么区别
HTML代表超文本标记语言，用于使用标记语言设计网页。HTML是超文本和标记语言的组合，超文本定义了网页之间的链接；标记语言用于定义标记内的文本文档，该文档定义网页的结构。此语言用于注释（在计算机注释中）文本，以便机器可以理解它并相应地操作文本。
大多数标记（例如HTML）语言都是人类可读的。该语言使用标签来定义必须对文本进行哪些操作。它用于在网页上构造和呈现内容。
HTML5是HTML的第五个版本，HTML5中删除或修改了许多元素。
HTML5和HTML的区别
首先，HTML5已经远远超越了标记语言的范畴，它的设计目的是在移动设备上支持多媒体，和HTML比起来，深度和广度上都做了进一步提升。
接着，我们来看一下两者的声明文件类型：
HTML：
HTML5.0：文档声明HTML5方便书写，精简，有利于程序员快速的阅读和开发。
2、结构语义区别
html：没有体现结构语义化的标签，如：<div id="nav"></div>
html5：添加了许多具有语义化的标签，如：<article>、<aside>、<audio>、<bdi>...
相对于HTML，HTML5中新增和修改了一些元素。
3、绘图区别
HTML：指可伸缩矢量图形，用于定义网络的基于矢量的图形。
HTML5：HTML5的canvas元素使用脚本（通常使用JavaScript）在网页上绘制图像，可以控制画布每一个像素。
4、音频和视频的支持
HTML如果不使用Flash播放器支持，它不支持音频和视频。HTML5使用<audio>和<video>标签来支持音频和视频控制。
5、语法的处理
HTML无法处理不准确的语法；HTML5能够处理不准确的语法。
⑺ 前端设计为什么要进行标签语义化
打个比方，今日头条里的新闻都是从各大新闻媒体的网站中搜集新闻（如新浪网，光明网等），头条就需要处理大量的来自不同网站的新闻页面，细看每个新闻页面，需要挑出页面里的正文内容，作者的名字还有发稿的时间等等。这时候包裹这些重要信息的标签就起到了重要的作用——帮助识别标签里的内容。
语意化标签能够让机器可以读懂内容。
如果希望进一步了解可以看一下知乎：http://www.hu.com/question/20455165
⑻ 前端需要哪些知识
前端前景是很不错的，像前端这样的专业还是一线城市比较好，师资力量跟得上、就业的薪资也是可观的，学习前端可以按照路线图的顺序，
0基础学习前端是没有问题的，关键是找到靠谱的前端培训机构，你可以深度了解机构的口碑情况，问问周围知道这家机构的人，除了口碑再了解机构的以下几方面：
1. 师资力量雄厚
要想有1+1>2的实际效果，很关键的一点是师资队伍，你接下来无论是找个工作还是工作中出任哪些的人物角色，都越来越爱你本身的技术专业前端技术性，也许的技术专业前端技术性则绝大多数来自你的技术专业前端教师，一个好的前端培训机构必须具备雄厚的师资力量。
2. 就业保障完善
实现1+1>2效果的关键在于能够为你提供良好的发展平台，即能够为你提供良好的就业保障，让学员能够学到实在实在的知识，并向前端学员提供一对一的就业指导，确保学员找到自己的心理工作。
3. 学费性价比高
一个好的前端培训机构肯定能给你带来1+1>2的效果，如果你在一个由专业的前端教师领导并由前端培训机构自己提供的平台上工作，你将获得比以往更多的投资。
希望你早日学有所成。
⑼ 前端常用的框架有哪些
一、 Web前端框架之Angular 2+
Angular 2+优点解析：
Angular 2+ 的最大优势在于它的流行程度。也有人认为它和 Google 密切相关的名字，会影响团队使用它。Angular 1 的迅速流行是因为那些来自其他交互式应用程序开发环境的人会发现对于开发单页面 Web 应用程序具有相似的模型-视图模式。通过对 Angular 1 进行现代化演变和重新构建框架的某些部分，Angular 2+ 已经真正的爆发了，大量的正式的和非正式培训机构数量都让人印象深刻，开发者有很强的市场竞争力。对于用户来说它有一套用于构建用户界面的丰富组件，这也是本系列中少有的几个框架能够做到这点。
缺点解析：
我们觉得 Angular 框架着重于在单个页面应用程序中创建用户界面并没有处理构建完整的 Web 应用这个更大的关注点，如果不及早确定下来，这将会导致整个项目难以维护，在实际项目中，运行时提供不属于核心框架的技术往往让人觉得不可思议，这大大降低了 TypeScript 对最终开发者的价值。
发展方向：
Angular 5 刚刚发布，这看来是 Angular 已经成功的印证了快速发布版本的承诺，在 Google 的持续支持下，Angular 会越来越成熟。
像许多的大型组织一样，Google 具有多重(分裂)的人格，从外表上看，Angular 团队和那些专注于浏览器标准的团队之间显得很和谐。但我们的观点是，和谐只是一层薄薄的窗户纸。Angular 团队对于 Web 组件和渐进式 Web 应用没有一个真正解决方案。我们认为，业界普遍认可的标准将会在 Angular 框架中会逐步实现，这将会影响到如何更好的构建 Angular 应用将成为一个中/长期的风险。
使用环境：
如果你需要在一个大型的框架内获取技术资源，框架内的技术通常很容易移植;或者你需要在框架中训练开发人员，并且还要有一定的信心，他们会在短期内获得一定的开发能力，这样的话你可以考虑 Angular 2+ 。需要注意的是 Angular1(angular.js)与 Angular2+ 是截然不同的，其中的应用、技术和经验不能直接移植到 Angular2+ 的开发中去。
如果你的 Web 应用能够很好的转化为标准的模型-视图模式，那么你也可以忽略其他直接考虑使用 Angular2+ 。
如果你对 Google Material UX 设计模式满意，那么 Material Angular 是遵循该模式的一种快速、简单且可靠的方式。
二、Web前端框架之React + Rex
React + Rex优势解析：
React 和 Rex 的最大优势在于它们相对简单和专注。做一件事情并把它做好是非常困难的，但这两个库都很有效地完成了它们的目标。虽然对于某些状态容器方法可能是外部的，但大多数开发人员还是可以轻松掌握概念，并了解单向数据体系结构的好处，简化大量的用户界面应用程序。
缺点解析：
React 和 Rex 最大的弱点不是它们是什么，而是它们不是什么。要构建一个功能丰富的 Web 应用程序，你需要许多功能，一旦脱离 React 和 Rex 和其他一些库的核心，你将发现一个非常分散的社区，拥有无数的解决方案和模式，不容易整合在一起。
因此，虽然 React 和 Rex 都是非常专注的库，但缺乏经验的团队还是会很容易地生成不可维护的解决方案，而不是意识到他们所做的选择会导致性能不佳或错误。即使有经验的开发人员也可能意识到，一个松散的架构或惯例可能会在未来困扰他们。
假省钱是一种对自己的欺骗，组织范围内采用 React 和 Rex 将轻松降低无效率问题。没有其他库和模式的广泛约定和标准化，标准化 React + Rex 比较于我们正在采用的 JavaScript 来编写我们的应用程序效率要高。
发展方向：
Facebook 和 React 最近从繁琐的附加专利纠纷中抽离，他们认识到，就像其他项目一样，更广泛的社区能够提高自己的声音。我觉得这有助于 Facebook 意识到他们还不能更好地了解我们，相信我们来引导项目。希望这将继续贯穿项目的特点和技术方向。
很难预测 React 和 Rex 的未来。但是，将库集中在一起，确实会显着提高适应性，大多数React + Rex 模式都会促进一个分离的体系结构，从而可以轻松地进行重构和迭代。两年前，大家喜欢的还是React + Flux，但整个社区很快就拥抱了Rex。思维或模式的其他重大转变可能很容易被采纳。这种关键能力可能会持续到未来。
使用环境：
如果你很少需要手把手指导，并且正在寻找更好的库而不是全面的框架，那么 React + Rex 可能是正确的。在这一过程中，你不仅需要对你的团队和组织的能力保持诚实，还要在你的初始开发过程中，以及在整个应用程序的长期维护过程中保持诚实。
三、Web前端框架之Vue.js
vue.js优势介绍：
渐进式构建能力是vue.js最大的优势，vue 有一个简洁而且合理的架构，使得它易于理解和构建。
vue 有一个强大的充满激情人群的社区，这为vue.js增加了巨大的价值，使得为一个空白项目创建一个综合的解决方案变得十分容易。
缺点介绍：
在模型-视图应用程序和状态容器类型的应用程序之间的互相转换可能会令人感到困惑，即使没有完美包含一个模式到另一个模式的完美转换，但让人感觉希望能维持两个模式的相关性。对于那些期待vue.js完美解决方案，并可能导致难以维护不一致的应用程序的人来说，这至少是令人困惑的。
一个更大的挑战是vue.js依赖于一个单独的人，很明显，其他的项目基本是由一个组织提供支持，但这让人感觉更加有意义，虽然它有一个强大文件的社区和许多有创新的新增项目，但是 vue 核心的开发基本落在一个人身上。
我们很高兴看到 vue 更加容易接受新兴的标准方法，但是它的类似于 Web 组件的模式，而不是真正的 Web 组件，这可能是 vue 所得不偿失的地方。
发展前景：
虽然vue.js有相当广泛的应用，但也很难预测在中期发展中这个势头能持续多久，它不是由一个商业组织直接支持并维护，因此，这很大程度上依赖于维护者的生存能力和继续维护下去的愿望来决定。
它也表现出了一定程度的语言适应能力，并且随着某些模式的落伍和失宠而继续保持自身语言的现代化和时代性，目前没有迹象表明vue.js架构将来无法适应进一步发展。
使用场景：
如果你有一个传统的Web应用程序，并需要一个强壮稳健的应用程序层，那么vue.js 可能是一个很好的选择，它有清晰的模式，即使没有经验的团队也能正确或者错误的使用它。尽管vue UX框架没有开箱即用的功能，但在vue.js上也能大量持续性构建应用，这将有利于你的项目。