前端与 HTML | 青训营笔记

Artemis
688 阅读2分钟

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

课堂笔记

本课重点

  1. 前端工作的定义
  2. 前端技术栈拆解与分析
  3. HTML 作用解析
  4. HTML 语义化

前端工作的定义

那我们首先是思考一下什么是前端呢

  • 解决GUI人机交互问题
  • 跨终端(PC/移动浏览器、客户端/小程序、VR/AR等)
  • Web技术栈
我们作为前端工程师又要考虑哪些内容
  • 兼容性
  • 功能
  • 性能
  • 用户体验
  • 安全性
  • 美观
  • ......

HTML

HTML到底是什么

HyperText Markup Language

具体使用例子

如下面的代码，img就是一个标签，src是一个属性名，后边的"picture.png"即为src对应的属性值

<img src="picture.png" />

一些HTML5的新标签

audio标签

其中audio标签是html5新增标签的一大特性，在HTML5之间，浏览器若想播放音视频，是要通过Flash来实现，我们现在有可能还会在浏览一些“年久失修”的网页内容时，还会让我们下载Flash插件。
然而现在我们可以通过audio标签直接插入一段音频，并且可以通过source标签插如不同文件形式的音频，以免有些浏览器不支持某些形式的文件。
比如在某个浏览器不支持mp3文件，就会向下解析，直到成功。

<audio controls="controls"> 
    <source src="./media/bbh.mp3"></source> 
    <source src="./media/bbh.ogg"></source>
</audio>
video标签

video标签用法与audio用法相似，可参照audio标签用法。是用来播放视频的

HTML5语义化标签

在不使用HTML5的语义化标签时，我们整个页面可能是div标签满天飞，但是有了这些语义化标签之后我们就可以清晰明了的看清整个页面的结构 如下面代码所示

<article> 
    <h1>文章标题</h1> 
    <p>具体内容</p> 
    <footer> 
        <p>
            <small>版权：青训营，作者：Artemis</small>
        </p> 
    </footer>
</article>

通过上面代码我们可以很清楚的就知道，这一段内容具体是在干嘛，这就是语义化标签的意义
HTML5还有许多有意思的标签和语义化标签需要我们慢慢去学习

HTML语法

  • 标签和属性不区分大小写，但是推荐小写
  • 空标签可以不闭合，比如 input、meta
  • 属性值推荐用双引号包裹
  • 某些属性值可以忽略，比如readonly、required

写在结尾

通过本节课的学习，我对前端开发工程师的职责有了更加清楚的认知。在知识内容上，我对语义化的理解更加深刻，希望在今后的学习中再接再厉！

avatar
文章
阅读
粉丝