前端与 HTML | 青训营笔记

Teh
54 阅读3分钟

前端与HTML

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

前端与HTML.png

什么是前端

  • 解决GUI人机交互问题

  • 跨终端

    • pc/移动浏览器
    • 客户端/小程序
    • VR/AR等

  • Web技术栈

前端工程师是使用Web技术栈解决多端、图形用户页面交互问题的工程师

前端技术栈

最基础的技术栈：HTML（内容）、CSS（样式）、JavaScript（行为）、HTTP协议

前三者运行在浏览器中，浏览器可以通过HTTP协议与服务器进行通信。 浏览器通过HTTP协议拿到服务器的前端代码渲染成页面、浏览器也可以把用户的行为和数据提交到服务器

前端应该关注哪些方面？

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

边界（发展非常快，技术不断更新）

  • node.js 开发服务器端应用
  • Electron 开发客户端应用
  • React Native 在线传输，实现多人会议
  • WebRTC 3D游戏
  • WebGL 将c++等代码编译成可以直接在浏览器运行的代码

开发环境

浏览器+编辑器

HTML

HyperText Markup Language

image.png

<!doctype html>：标记当前文件的html版本，浏览器据此选择渲染模式
<html>：文档根标签
<head>：页面数据，页面需要但不需要直接展示给用户。eg.标题、使用什么样的编码
<body>：需要呈现给用户的内容

浏览器解析HTML文件生成DOM树

image.png

语法

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

标签

标题h1~h6

   <h1>这是标题 1</h1>
   <h2>这是标题 2</h2>
   <h3>这是标题 3</h3>
   <h4>这是标题 4</h4>
   <h5>这是标题 5</h5>
   <h6>这是标题 6</h6>
image.png

列表

有序列表无序列表定义列表
image.pngimage.pngimage.png
image.pngimage.pngimage.png

链接

<a href="https://juejin.cn/" target="_blank">访问稀土掘金!</a>

image.png

图片、视频、音频

图片视频音频
<img src="图片地址" alt="图片失效的提示文字" width="宽度" /><audio src="音频地址" controls(默认显示控件)></audio><video src="视频地址" controls(默认显示控件)></video>
2.jpgimage.pngimage.png

输入

名字代码效果
文本输入框<input placeholder="请输入用户名“>image.png
进度条<input type="range">image.png
数值<input type="number" min="1" max="10">image.png
日历<input type="date"min="2018-02-10">image.png
文本区元素<textarea>Hey</textarea>image.png

选择

名字代码效果
多选框image.pngimage.png
单选框image.pngimage.png
下拉框image.pngimage.png
提示框image.pngimage.png

文本类标签

标签
块引用image.pngimage.png
短引用<cite><p>我最喜欢的一本书是<cite>小王子</cite>。</p>

我最喜欢的一本书是小王子。

引用之前的内容<q><p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p>

在第一章，我们讲过字符串是不可变量。

代码标签<code>image.png
强调<strong><em>image.pngimage.png<strong>强调事情的紧急重要。<em>语气上的强调

语义化

HTML中的元素、属性、属性值都拥有某种含义

原则:传递内容而不是传递样式

谁使用HTML
  • 开发者：修改、维护页面
  • 浏览器：展示页面
  • 搜索引擎：提取关键字、排序
  • 屏幕阅读器：给盲人读页面内容
优点
  • 代码可读性
  • 可维护性
  • 搜索引擎优化
  • 提升无障碍性
内容划分
image.png
如何做
  • 了解每个标签和属性的含义：mdn w3c规范
  • 思考什么标签最适合描述这个内容
  • 不使用可视化工具生成代码

总结

这一节课了解了前端的定义、最基本的技术栈、前端需要关注的方向，使得我对前端有了一个宏观上的立即；也了解HTML的标签、语法和语义化，其中语义化对我启发较大。在上学期的学习过程中，常常是div梭哈到底，选择器名随意起，导致写的过程中大体结构不好区分，经常一不小心删了一个div找半小时。回css文件找选择器也是需要ctrl+f才能定位到，还经常忘记每个选择器对应区域（这还只是自己写的，要是团队合作多半已经被🔪了😭）。课中内容划分的图太工整了😍

avatar
文章
阅读
粉丝