前端与HTML|青训营笔记

罗罗ll
148 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的的第一天，今天主要学习前端与HTML。

本堂课重点内容

  • 前端技术栈
  • 前端的边界
  • HTML入门介绍
  • 语义化

详细知识点介绍

什么是前端？

  1. 解决GUI人机交互问题
  2. 跨终端（pc/移动浏览器，客户端/小程序，VR/AR等）
  3. web技术栈 总结：前端工程师是使用web技术栈解决多端图形用户界面交互问题的工程师

前端技术栈

IMG_20220725_143503.jpg

前端应该关注哪些方面？

image.png

前端的边界

随着前端技术快速发展，已经远远页面的简单范畴，能开发的内容越来越丰富，我们应持续学习跟上技术发展。

image.png

开发环境

浏览器+编辑器

image.png

HTML

  • 超文本+标签语言

image.png

  • 标签中包含属性名和属性值

image.png

  • 一个完整的HTML代码的例子

image.png <!DOCTYPE html>声明必须是 HTML 文档的第一行。它不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
<html>文档根标签
<head>它的内容不会在浏览器中显示，它的作用是保存页面的一些元数据。
<body>的内容呈现在页面中。

  • 浏览器解析HTML代码，构建DOM树 在 DOM 模型中，节点的概念很宽泛，整个文档 （Document） 就是一个节点，称为文档节点。除此之外还有元素（Element）节点、属性节点、Entity节点、注释（Comment）节点等。

image.png

  • 总结
  1. 标签和属性不区分大小写，推荐小写
  2. 空标签可以不闭合，比如 input，meta
  3. 属性值推荐双引号包裹
  4. 某些属性值可以省略，比如 required，readonly

内容划分

image.png

语义化是什么？

HTML的元素、属性及属性值都有某种含义，开发者应遵循语义编写HTML。 HTML是传达内容，而不是样式。

  • 如何做到语义化
  1. 了解每个标签和属性含义（参考MDN文档、W3C）
  2. 思考哪个标签最合适描述这个内容
  3. 不使用可视化工具生成代码

实践练习例子

标题h1-h6

<h1>字体排印学</h1>
<h2>历史</h2>
<h3>印刷体源流</h3>
<h4>发展</h4>
<h5>应用</h5>
<h6>创新</h6>

运行一下：

image.png

列表

<h2>有序列表</h2>
<ol>
    <li>Coffee</li>
    <li>Milk</li>
</ol>
<h2>无序列表</h2>
<ul>
    <li>Coffee</li>
    <li>Milk</li>
</ul>
<h2>定义列表</h2>
<dl>
    <dt>Coffee</dt>
    <dd>Black hot drink</dd>
    <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

运行一下：

image.png

多媒体

 <img src="dog.jpg" alt="金毛" width="400px">
    
    <audio controls>
        <source src="./music/See You Again.mp3">
        <source src="./music/See You Again.wav">
        <source src="./music/See You Again.ogg">
    </audio>

    <video src="./video/movie.mp4" controls="controls"></video>

运行一下： image.png

输入

<input placeholder="请输入用户名">
    <input type="range">
    <input type="number" min="1" max="10">
    <input type="date" min="2018-01-01">
    <textarea name="" id="" cols="30" rows="10"></textarea>

运行一下： image.png

课后个人总结

本节课了解前端的背景和学习了HTML相关内容，对日后更深入学习打下基础。在本堂课中，让我最印象深刻的是HTML是传达内容，而不是样式。从中我思考到HTML语义化的重要性，做好HTML的搭建，才能使页面传达的内容更准确清晰。所以课后我将计划去再熟悉了解每个标签和属性含义，做好HTML的语义化。

引用参考

developer.mozilla.org/zh-CN/docs/… blog.csdn.net/userkang/ar… juejin.cn/post/701137…

avatar
文章
阅读
粉丝