前端与HTML | 青训营笔记

石泽林
72 阅读3分钟

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

前端相关概念

什么是前端

前端工程师使用Web技术栈来解决多种终端图形用户界面下的人机交互问题。

前端技术栈

分为三层 + 网络

  • HTML:负责页面的结构
  • CSS负责页面的样式
  • JavaScript负责页面的行为。
  • 网络协议 （如HTTP协议）

浏览器通过HTTP协议与服务器端进行通信
浏览器把前端的HTML、CSS、JS代码从服务器获取到，然后对页面进行渲染
浏览器也可以把用户填写的内容或行为通过HTTP协议提交到服务器端

前端应该关注的方面

image.png 核心是功能哦

前端的边界

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

前端的开发环境

1658638636023.png

推荐使用Chrome和 VSCode

HTML

定义： HTML --> 超文本 标记语言

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

标记语言：Markup Language（标记语言）：使用标签表示各种各样的元素。

DOM树

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

浏览器通过解析HTML结构就会得到这样的一个DOM树，然后再将其渲染。

image.png

HTML 语法

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

常用HTML标签

标题 h1 ~ h6
列表
  1. 有序：<ol> <li>内容</li> </ol>

  • 无需：<ul> <li>内容</li> </ul>

    自定义列表：<dl> <dt>标题</dt> <dd>内容</dd> </dl>

image.png

链接

<a href="目标网址" target='操作'></a>

target的属性值如下：

  • _self（默认）：响应显示在当前窗口中；
  • _blank：在新窗口中载入目标文档；
  • _parent：响应显示在父框架中；
  • _top：响应在当前窗口打开并替换当前的整个框架页
多媒体标签

<img>：图像标签
<audio>：音频标签
<video>：视频标签

src表示多媒体内容的URL地址

输入

内容划分

image.png

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

语义化

  • HTML 中的元素、属性及属性值都拥有某些含义

  • 开发者应该遵循语义来编写HTML

    • 有序列表用 ol；无序列表用 ul
    • lang属性表示页面使用的语言

为什么要使用HTML语义化

  1. 便于开发者修改、维护页面；
  2. 便于浏览器展示页面；
  3. 便于搜索引擎提取关键词、排序；
  4. 便于屏幕阅读器等识别（给盲人读页面内容）。

如何做到语义化

  1. 了解每个标签及其属性的含义；
  2. 思考什么标签最适合描述这个内容；
  3. 不使用可视化工具生成代码。

最后附上MDN文档链接，需要多多查阅哦

avatar
文章
阅读
粉丝