【前端与HTML | 青训营笔记】

颜念爱吃水煮鱼
40 阅读2分钟

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

什么是前端？

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

前端技术栈

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

前端应该关注的问题

功能、美观、无障碍、安全、性能、兼容性、用户体验。

前端的边界

  • node.js——开发服务器端的相关应用
  • ELECTRON——客户端开发
  • React Native——客户端开发
  • Web RTC——P2P在线传输 实现多人会议等
  • WebGL——3D游戏开发
  • WebASSEMBLY——将C++等其他语言代码编写为能够直接在浏览器中运行的代码

HTML是什么？

5d53c1e0a5bc242d160f312567deb73.jpg

DOM树

8bf39836c31be71b805be4811574c6d.jpg

html语法

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

标题h1~h6

<h1>字体排印学</h1>
<h2>历史</h2>
<p>活字的雏形或可追溯至公元前两千年前后美
索不达米亚文明的乌鲁克和拉尔萨，砖块上面不
均匀的印花被视作有可能是活字思想雏形。</p >
<h3>印刷体源流</h3>
<p>中国在唐代就已经出现雕版印刷术，公元868
年的《金刚经》是现存最古老的印刷品之一，使用
的技术即是木雕版印刷。</p >
<h2>应用</h2>
<p>...</p >

标签

  • < font>定义文本的字体、尺寸、颜色
  • < hr>定义水平线
  • < b>定义粗体文本
  • < i>定义斜体文本
  • < p>定义段落

列表

  1. 有序列表：使用ol标签来创建有序列表
  2. 无序列表：使用ul标签来创建无序列表
  3. 定义列表:使用dl标签来创建有序列表，使用dt来表示定义的内容，使用dd来对内容进行解释说明

超链接

< a href="https://www.bytedance.com/" target="_blank">
  字节跳动官网
</ a>

HTML的语义化：

  • 规范元素、属性、属性值的含义
  • 便于团队维护
  • 提升无障碍性
  • 代码可读性
  • 搜索引擎优化
avatar
文章
阅读
粉丝