前端与HTML | 青训营笔记

0絔0
70 阅读2分钟

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

什么是前端?

  1. 解决GUI人机交互问题

  2. 跨终端

      PC/移动浏览器
  
  客户端/小程序
  
  VR/AR 
  
复制代码

  3. web技术栈

一句话总结：前端工程师是使用web技术栈解决多端下面的图形交互的工程师。

前端技术栈

分为三层，最基础的为HTML，负责页面的结构；CSS负责页面的样式；JavaScript负责页面的行为。
复制代码

image.png

前端应该关注哪些方面？

image.png

前端的边界？

无边界，未来将有无限可能。

image.png

  • Node.js：服务器端应用
  • ELECTRON、React Native：客户端应用
  • WebRTC：点对点在线传输（多人聊天室）
  • WebGL：3D游戏
  • WebASSEMBLY：使C++/Rust等语言代码可以在浏览器运行

前端技术发展更新很快，只有不断持续学习才能跟上技术发展。

HTML的定义

image.png

HyperText（超文本）：如图片、标题、链接、表格

Markup Language（标记语言）：<h1>文章标题</h1>

image.png

HTML 基本结构

  • <!doctype html>：声明为 HTML5 文档
  • <html>：HTML 页面的根元素
  • <head>：包含了文档的元（meta）数据
  • <title>：文档标题
  • <body>：可见的页面内容
  • <h1>：一级标题
  • <p>：段落内容

image.png

image.png

image.png

HTML 语法

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

h1 ~ h6

列表

  • 有序：ol>li

  • 无序列：ul>li

    自定义列表：dl>dt(标题)>dd(内容)

链接

<a href=juejin.cn/user/937247… >我的掘金主页

  • href：跳转目标
  • target：打开新的标签（_blank）
多媒体标签

<img>、<audio>、<video>

输入

<input>

  • plcaeholder：用户未输入，默认显示
  • type：范围（range）、数字（number）、多选框（checkbox）、单选框（radio）
  • min/max：最大值最小值（type="number"）、日历（type=“date”）

textarea ：文本域

列表
  • <select>><option>
  • <datalist>><option>
文本

引用：

  • <blockquote>：快捷引用
  • <cite>：短引用，标题
  • <q>：短引用，具体引用内容
  • <code>：单行代码的引用
  • <pre>><code>：多行代码的引用

强调：

  • <strong> ：含义的强调
  • <em>：语气的强调
基础内容划分

image.png

  • <header>：页头
  • <nav>：导航
  • <main>：主体
  • <article>：文章
  • <aside>：侧边栏
  • <footer>：页尾

语义化是什么

image.png

语义化的好处

  • 代码可读性
  • 可维护性
  • 搜索引擎优化
  • 提升无障碍性

怎样做到语义化

  • 了解每个标签和属性的含义
  • 思考什么标签最适合描述这个内容
  • 不使用可视化工具生成代码

传达内容,而不是样式

今天分享到这里，觉得不错的话请给我点赞，以后会有更多干货分享！

avatar
文章
阅读
粉丝