开头
Web前端开发基础知识学习路线分享,前端开发入门学习三大基础:HTML、CSS、JavaScript。除此之外还要学习数据可视化、Vue、React、Angular相关框架,熟练运用框架提升开发效率,提升稳定性。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P8Df7Ow9-1622807228562)(//upload-images.jianshu.io/upload_images/23082890-b561553d82597393.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/771/format/webp)]
标签语义化:
语义和默认样式的区别:
- 默认样式是浏览器设定的一些常用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 用粗体表示。
结尾
学习html5、css、javascript这些基础知识,学习的渠道很多,就不多说了,例如,一些其他的优秀博客。但是本人觉得看书也很必要,可以节省很多时间,常见的javascript的书,例如:javascript的高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。
资料领取方式:戳这里免费获取
的书籍,以及设计者模式,在实践中都会用的到。
资料领取方式:戳这里免费获取