前端与HTML ｜ 青训营笔记

KrisLee
84 阅读2分钟

前端与HTML ｜ 青训营笔记

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

一、什么是前端？

早期

  • 前端是网页，网站的界面，网站的前台

现在

  • 跨终端
  • 开发用户界面和交互设计

二、前端技术栈

基础

  • HTML（内容和结构）
  • CSS（样式）
  • JavaScript（行为）

框架

  • Vue
  • React
  • Angular

工具

  • Node.js
  • Webpack
  • Git

拓展

  • 正则表达
  • TypeScript
  • Canvas
  • Electron
  • React Native
  • 小程序
  • WebRTC
  • WebGL
  • WebAssembly
  • SASS
  • LESS

计算机基础

  • 计算机网络
  • 数据结构与算法
  • 操作系统
  • 设计模式
  • 浏览器原理
  • 安全

三、前端注重点

  • 功能
  • 美观
  • 体验
  • 性能
  • 兼容
  • 安全
  • 无障碍

四、HTML是什么？

Hyper Text Markup Language 超文本标记语言

五、HTML元素

<div class="main">内容</div>
<img src="img.png"/>

元素由标签名、属性、属性值和内容组成。
HTML 元素参考

六、HTML文档结构

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>页面标题</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <p>段落内容</p>
    </body>
</html>

<html>元素表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素。所有其他元素必须是此元素的后代。
<head>元素规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。
<body>元素表示文档的内容。

更多HTML元素请查看：HTML 元素参考

七、HTML语法

  • 标签和属性不区分大小写，推荐小写
  • 属性值推荐用双引号
  • 空标签可以不成对（如<img/>)
  • 值为True/False的属性可以省略值

八、语义化

  • HTML元素、属性都拥有某些含义，开发者应遵循语义编写

好处

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

如何做到语义化

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

九、学习总结

avatar
文章
阅读
粉丝