从事前端开发工作差不多3年了,自己也从一个什么都不懂的小白积累了一定的理论和实践经验,并且自己也对这3年来的学习实践历程有一个梳理,以供后面来细细回忆品味。
1、为什么选择学习前端开发?
你可能是因为兴趣,完成一个网站、页面、功能的成就感。你也可能是因为现在前端岗位火爆,就业率高。不管是因为什么,只要找准了目标,学就是了!
标签语义化:
语义和默认样式的区别:
- 默认样式是浏览器设定的一些常用tag的表现形式;
- 语义化的主要目的就是让大家直观的认识标签和属性的用途和作用;
标签语义化作用:
- 当只有HTML页面时,没有CSS,我们仍然可以很清晰的看懂页面的DOM结构
- 团队维护,当团队来review代码或者重构时,增强代码的可读性,更利于维护
- 有利于SEO,搜索引擎爬虫依赖于标签来确定上下文和各个关键字的权重
- 提高用户体验,比如 title 和 alt 等用来解释内容信息
常用语义化的标签:
<header>
头部标签,用来写网页最上方的公共头部,也就是页眉。
<header>
<h1>一级标题</h1>
<h2>二级标题</h2>
</header>
<nav>
标签,用来写导航,一般写在<header>
标签里面,内部用<ul>
无序列表。
<nav>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
-
<code>
:code可以包裹html语句而不会被浏览器再去解析。 -
<pre>
,<samp>
:这是一段HTTP协议的内容描述,因为这段内容的换行是非常严格的,所以我们不需要浏览器帮我们做自动换行,因此我们使用了pre标签,表示这部分内容是预先排版过的,不需要浏览器进行排版。 -
<article>
标签,当我们要写网页文章的主要内容时,要用到这个标签。
<article>
<h2>标题</h2>
<p>内容</p>
</article>
<address>
标签,定义文档作者或拥有者的联系信息。
如果 <address>
元素位于<article>
元素内部,则它表示该文章作者或拥有者的联系信息。
通常的做法是将 address 元素添加到网页的头部或底部。
<p>
段落标签
知道了
作为段落,你就不会再使用<br/>
来换行了,而且不需要<br/>
来区分段落与段落。
<p></p>
中的文字会自动换行,而且换行的效果优于<br/>
。
<p>段落内容</p>
<span>
标签
<span>
标签的语义为被用来组合文档中的行内元素
<b>
、<em>
、<strong>
<b>
标签语义为“加粗”
<em>
标签语义为“强调”
<strong>
标签语义为“更强烈的强调” 而且em 默认用斜体表示,strong 用粗体表示。
自学几个月前端,为什么感觉什么都没学到??
这种现象在很多的初学者和自学前端的同学中是比较的常见的。
因为自学走的弯路是比较的多的,会踩很多的坑,学习的过程中是比较的迷茫的。
最重要的是,在学习的过程中,不知道每个部分该学哪些知识点,学到什么程度才算好,学了能做什么。
很多自学的朋友往往都是自己去找资料学习的,资料上有的或许就学到了,资料上没有的或许就没有学到。
这就会给人一个错误的信息就是,我把资料上的学完了,估计也-就差不多的了。
但是真的是这样的吗?非也,因为很多人找的资料就是很基础的。学完了也就是掌握一点基础的东西。分享给你一份前端分析路线,你可以参考。
[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](()
还有很多的同学在学习的过程中一味的追求学的速度,很快速的刷视频,写了后面忘了前面,最后什么都没有学到,什么都知道,但是什么都不懂,要具体说,也说不出个所以然。
所以学习编程一定要注重实践操作,练习敲代码的时间一定要多余看视频的时间。