前端与HTML | 字节青训营笔记

知识就是力量812
120 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的的第一天！

今天的课程，首先简单介绍了一些前置知识，帮助我们提高效率。比如插件的正确使用、H5的一些基本标签的介绍、前端工程师的职责，总体来说第一天主要是偏向于前端知识的补充。

什么是前端？

就是解决人机交互问题，处理跨终端的工程师。

笼统的概括前端技术栈：

image.png

image.png

因此，本人认为前端工程师的职责就是通过各种技术栈，在合适的位置和时间展示合适的数据。因此前端应该关注兼容，性能，用户体验，美观等各个方面。

image.png

HTML标签

作为前端基础中的基础。HTML有着举足轻重的作用，前端三剑客中,HTML负责结构展示，CSS负责页面的美化，js负责交互效果，就好比人的骨架，皮肤，和行为的关系。因此学号HTML至关重要。

基本结构：

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    // ...
</body>

</html>

HTML的语法：

  • 标签和属性不区分大小写，但推荐小写
  • 空标签可以不闭合，因为标签中间不会再放其他内容，例如input，meta
  • 属性值推荐使用双引号来包裹
  • 某些属性值可以省略，比如required，readonly

列表标签： 列表标签主要有三类

  • 有序列表 ol：在ol标签中使用li标签可以实现1-n的数字排序
  • 无序列表 ul：在ul标签中使用li标签可以实现 . 的项目符号排序
  • 定义列表 dl：在dl标签中可以使用dt（标题）dd（标题具体描述的值），且一个dt可以对应多个dd
<ul>
    <li>无序列表项1</li>
    <li>无序列表项2</li>
    <li>无序列表项3</li>
</ul>

<ol>
    <li>有序列表项1</li>
    <li>有序列表项2</li>
    <li>有序列表项3</li>
</ol>


<dl>
    <dt>Poftut.com</dt>
    <dd>IT Tutorial Web Site</dd>
    <dt>Kaleinfo.com</dt>
    <dd>KaleInfo Company Web Site</dd>
    <dt>SiberHavadis.com</dt>
    <dd>Cyber News Site</dd>
</dl>

image.png

超链接标签

<a href ="https://www.baidu.com"> 百度 </a> 
<a href ="#" target="_blank">

一些其他的标签

  • blockquote:快捷引用标签，表示较长的引用，一般用于直接引用其他文章的一段话，使用cite属性指明文章的来源。

  • cite标签：短引用标签，引用较短的文字，例如引用其他人的作品名字，类似功能的有q标签。

  • code标签：代码标签，引用长段代码和较短的代码关键字。

  • strong标签：通常用于文本标签中，表示强调，突出所描述内容的严重性和紧急性，类似的有em标签，em标签主要侧重于在语气上的强调，通常去强调一个词的重音。 这些标签平常不太常用，了解即可。

标签的语义化

一个页面的通常布局如下： image.png

语义化标签使我们可以很容易的直到，具体代码的含义。

常见的语义化标签：

<header>      <!--：页眉通常包括网站标志、主导航、全站链接以及搜索框。-->
<nav>           <!--：标记导航，仅对文档中重要的链接群使用。-->
<main>         <!--：页面主要内容，一个页面只能使用一次。-->
<article>       <!--：定义外部的内容，其中的内容独立于文档的其余部分。-->
<section>     <!--：定义文档中的节。比如章节、页眉、页脚或文档中的其他部分。-->
<aside>        <!--：定义其所处内容之外的内容。如侧栏、文章链接、广告、相关产品列表等。-->
<footer>        <!--：页脚，只有当父级是body时，才是整个页面的页脚。-->

语义化的好处

  • 提高代码的可读性和可维护性
  • 搜索引擎优化
  • 提升无障碍行
  • 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页
  • 便于团队开发和维护: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。

如何做到语义化

  • 我们需要了解每个标签和属性的含义，因此建议过一遍菜鸟教程或者w3c的教程
  • 思考描述的内容应该用什么标签
  • 不使用可视化工具生成代码

如何学习HTML

html主要是一些标签，相对比较简单，但是简单不意味着不重要。 根据我的学习经验，我学习html时，会把官方文档给过一遍，也可以过一遍菜鸟文档。HTML标签众多，我们不可能全部记住只需要记住常用的和常见的布局手段即可，过一遍主要是为了眼熟，让自己知道有这么个东西，用到的时候便可以查阅文档或者笔记，快速定位。 还有一点很重要，就是多看别人的优秀代码，取其精华，思考一下为什么这么写，自己写的时候，往优秀代码上靠，这一点适用于所有技术栈的学习，不局限于HTML。

总结

今天初步了解了课程规模，进行了小组内的讨论和分工，很庆幸和志同道合的人同行，加入到青训营，一起进步。希望以后每天进步一点，做个不摆烂的人。

avatar
文章
阅读
粉丝