前端开发 ｜ 青训营笔记

White羽
102 阅读2分钟

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

一.初识前端

什么是前端

  • 解决GUI人机交互问题
  • 跨终端
  • pc移动浏览器
  • 客户端/小程序
  • VR/AR等
  • Web技术栈

可以理解成我们前端人员就是使用Web技术栈（如HTML，CSS，JavaScript等）解决多端图形用户交互的问题。

前端三件套

graph TD
服务器端-->网络协议--> JavaScript控制行为
网络协议--> CSS控制样式
网络协议--> HTML控制内容

前端应关注点

前端技术应关注诸如界面的美观，功能的齐全，数据安全性，用户的体验，以及无障碍（兼容性问题），性能等等问题才能做出好的产品。

前端的边界

Node.js : 开发服务器端的应用

ELECTRON/React Native : 开发客户端应用

WebRTC : 实现P to P 形式的在线传输，实现多人会议

WebGL ：开发3D游戏

WebASSEMBLY ：可以将诸如C++等语言的代码在浏览器中实现编译

可以使用的编译器：如VSCode，Vim，WebStorm（WS）

二.初识HTML

HTML是什么？

HTML（HyperText MarkupLanguage）超文本编辑器

  • HyperText可以是图片<img>，标题<title>，连接<a href="">
  • MarkupLanguage是标记语言，如标签<h1>

HTML的属性值

  • 使用src来引用url
  • 如使用img标签调用图片url
    • <img src="图片地址.格式" /> （/的写法是因为img为自结束标签，src为属性名，引号内为属性值）

HTML的基础格式

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>

    </body>
    </html>

<!DOCTYPE html>作为文档声明，声明此文本类型为HTML

<html lang="en">为语言，默认为en（英文）

<head>放置页面的元数据，不呈现给用户的数据

<body>希望显示给用户的内容

DOM树结构

graph TD
Docement --> html
html --> head
html --> body
head --> meta
head --> title:PageTitle
body --> h1:Heading
body --> p:PageContent

HTML语法

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

HTML的部分常见标签使用

<h1>~<h6>表示不同等级的文本（文字大小可由后续CSS样式中修改font-size）

列表的表现形式：如ul->li标签或dl->dt->dd标签

    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表....</li>
    </ul>

超链接

使用a标签的表现形式

<a href = "url"></a>

多媒体元素

<img src="" alt="Metal movable type">

播放图片，其中 alt="Metal movable type是图片的压缩格式随不同用户而灵活变化。

<video src="" controls></video>

<audio src="" controls></audio>

其中controls是显示浏览器默认的播放控件。

输入

    <!-- 带有背景提示的输入栏 -->
    <input placeholder="请输入用户名">
    <!-- 拖动条 -->
    <input type="range">
    <!-- 输入数字 -->
    <input type="number">
    <!-- 输入日期 -->
    <input type="date" min="1" max="10">
    <!-- 输入文本 -->
    <textarea name="" id="" cols="30" rows="10"></textarea>

浏览器实现效果

image.png

HTML内容划分

一个html的基本布局思想—：header 为头部，main为主要内容涵盖article，aside为提示栏区域，footer为底部

graph TD
header --> body
main--> body
aside --> body
footer--> body

三.总结

通过简要了解前端三件套的基本作用，以及作为一名合格前端人员我们应该如何设计我们的前端界面达到用户期望的标准，和HTML的基本入门。 下面附上

--本文参考来源自字节跳动前端青训班韩广军老师的授课内容

avatar
文章
阅读
粉丝