前端与HTML | 青训营笔记

小崔迷路了
87 阅读3分钟

这是我参与「第四届青训营 -前端基础场」笔记创作活动的第1天

1. 什么是前端？

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

[ 利用Web技术栈解决多端图形用户界面交互问题，即网页、app制作 ]

2. 前端技术栈

  • JavaScript（定义网页行为）
  • CSS（设计网页样式）
  • HTML（网页内容及结构）
  • 网络协议（如HTTP协议）

[ 浏览器通过HTTP协议和服务器端通信，从服务器端获取前端的代码从而渲染为我们所看到的页面，也可以将用户的行为通过HTTP协议提交给服务器端。]

3. 前端应该关注哪些方面？

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

4. 前端的边界

5aVDKEefUX.jpg

5. 开发环境

image.png

6. HTML是什么？

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

Markup Language（标记语言）：用一对标签来表示一段内容（如<h1>文章标题</h1>）

  • <!doctype html>：标记HTML版本
  • <html>：HTML页面的根标签
  • <head>：包含文档的元数据
  • <title>：页面标题
  • <body>：页面主体内容
  • <h1>：一级标题
  • <p>：段落内容

浏览器通过解析HTML代码得到如下的一个DOM树，然后再将其渲染。

image.png

7. HTML语法

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

8. HTML标签

8.1 标题标签

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

[ 1-6级重要程度依次递减 ]

8.2 列表标签

① 有序列表（orderlist）

<ol>
   <li>No.1</li>
   <li>No.2</li>
   <li>No.3</li>
</ol>

② 无序标签（unorderlist）

<ul>
    <li>  </li>
    <li>  </li>
    <li>  </li>
</ul>

③ 定义列表（definitionlist）

<dl>
    <dt>标题</dt>
    <dd>内容</dd>
    <dd>内容</dd>
</dl>

[ 标题和内容可以多对多 ]

8.3 链接标签

① 替换原有页面

<a href="输入网址">
网站
</a>

② 新窗口打开

<a href="输入网址"
target="_blank">
网站
</a>

href : 跳转目标

8.4 多媒体标签

① 图片标签 < img >

② 音频标签 < audio >

③ 视频标签 < video >

8.5 输入标签 < input >

  • placeholder :占位符（用户未输入时的默认显示）
  • type :包括数字（number）、范围（range）、日期（date）等

textarea :长文本域

8.6 选择标签

  1. 选项较少（在页面展示）
  • 选多个 ：
<input type="checkbox" />
<input type="checkbox" checked />

  • 选一个 ：

    < input type="radio" name="限制类别" />

  1. 选项较多（下拉选项栏）
<select>
    <option>选项</option>
    <option>选项</option>
    <option>选项</option>
</select>

3.用户输入+提示选项

<input list="类别" />
<datalist id="类别">
    <option>选项</option>
    <option>选项</option>
    <option>选项</option>
</datalist>

8.7 文本标签

① 引用标签

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

② 强调标签

  • < strong> : 含义上的强调
  • < em > : 语气上的强调

8.8 内容主体标签

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

9. 语义化是什么

  • HTML 中的元素、属性及属性值都拥有某些含义
  • 开发者应该遵循语义来编写HTML

10. 谁在使用我们写的 HTML

  • 开发者 : 修改、维护页面
  • 浏览器 : 展示页面
  • 搜索引擎 : 提取关键字、排序
  • 屏幕阅读器 : 给盲人读页面内容

11. 语义化的好处

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

12. 如何做到语义化？

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

HTML原则：传达内容，而不是标签

以上就是我的第一篇青训营笔记，如有不对，希望大家多多指正。通过此次学习，我对HTML已经有了初步的了解，重点内容也已经基本掌握，明天继续加油！！

avatar
文章
阅读
粉丝