前端与HTML | 青训营笔记

RMX08
457 阅读9分钟

欢迎来到 RMX08 的 金元宝集合箱！！

这是我参与「第五届青训营」伴学笔记创作活动的 第1天 ，作为一个前端只学过HTML的微小白，希望能在接下来的一个月中收获满满的 金元宝 。

什么是前端 & 前端工程师？

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

简而言之，前端工程师是使用 Web 技术栈解决多端图形用户界面交互问题的工程师。

前端技术栈

↓ ↓ ↓ 主要分为三层 ↓ ↓ ↓

  • HTML 最基础，负责页面、结构、内容
  • CSS 负责页面样式、颜色、大小等
  • JavaScript 定义网页的行为

三者都运行于浏览器中，而浏览器通过 HTTP 协议（即网络协议）和服务器进行通信，通过 HTTP 协议将前端代码渲染成我们所看到的页面，浏览器也可通过 HTTP 协议将用户在网页所输入的内容、数据、行为等提交到服务器端。

image.png

以上构成了前端最基础的技术栈。

前端所关注的方面

  1. 功能 —— 所做产品的功能、所解决的问题，是否满足用户的需求
  2. 美观 —— 所做的界面是否美观、好看
  3. 无障碍（Accessibility） —— 所做网站是否对于所有人皆可用，如色盲症患者等
  4. 安全 —— 所做网站是否能保障用户数据的安全，有无存在可被利用的漏洞
  5. 性能 —— 所做的网站速度是否足够快，动画是否流畅，用户体验是否足够好
  6. 兼容性 —— 所做网页是否能在各种终端上使用

用户对于产品的直观感受取决于前端，因此前端对于 用户体验 来说非常重要！

前端的边界

随着技术的发展，前端所能做的东西早已超出页面的简单范畴 ↓ ↓ ↓

  • Nodejs —— 开发服务器端的应用
  • electron / react native —— 开发客户端的应用
  • WebRTC —— 进行在线传输，实现多人会议
  • WebGL —— 开发 3D 游戏
  • WebAssembly —— 将C++等其他的语言所编写的代码编译成可直接在浏览器中可运行的代码

image.png

开发环境

前端开发入门较为简单，只需一个 浏览器 + 编辑器 即可。

image.png

HTML

HTML是什么？

含义

HyperText Markup Language，简称 HTML。

image.png

HyperText 为超文本，可包含图片、标题、链接、表格，并非简单文字。

Markup Language 为一种标记语言，通过可设置属性的标签来达到各种图形化展示的目的。

image.png

基础代码模板

以下为一段完整的前端代码

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

<!doctype html>标记了当前 HTML 的版本，浏览器从而决定用何种办法对页面进行渲染，若是不使用该行代码，浏览器将用一种老旧的方式渲染页面，从而无法达到想要的效果。

<html></html>为文档的 根 标签，其他标签都是写在根标签中。

<head></head>该标签中通常放一些页面的元数据 （页面需要这些数据，但无需呈现在用户面前）

<body></body>该标签中放置真正需要呈现给观众的内容

image.png

上图便为呈现在用户面前的网页。

DOM 树

浏览器在拿到 HTML 代码后便会将其解析成为 DOM 树

image.png

DOM 树结构 精确地描述了HTML文档中标签间的相互关联性。

一个 DOM 树 由 文档 、节点 以及 元素 组成。

详情移步 ⇨ 什么是DOM?你了解DOM树吗？_二哈汪汪叫的博客-CSDN博客_dom树

HTML 语法

image.png

  • 自定义的组件用 大写 表示，原生的 HTML 标签用 小写 表示。
  • 空标签 即标签内部不妨再放其他内容，那么可以省略结束标签。如<img src="photo.jpg"/>

HTML 标题

标题 （Heading） 是通过标签<h1>、<h2>、<h3>、<h4>、<h5>、<h6>进行定义。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
  </head>
  <body>
    <h1>这是标题 1</h1>
    <h2>这是标题 2</h2>
    <h3>这是标题 3</h3>
    <h4>这是标题 4</h4>
    <h5>这是标题 5</h5>
    <h6>这是标题 6</h6>
  </body>
</html>

image.png

<h1>定义的标题最大，<h6>定义的标题最小。

该样式为浏览器内置的样式，无需另加样式。

HTML 列表

分为三种： 有序列表、无序列表 和 自定义列表。每个列表由 列表 和 列表项 组成。

有序列表

有序列表是一个项目的列表，列表项目用数字进行标记。有序列表始于 <ol> (ordered lists) 标签。每个列表项始于 <li> (list item) 标签。

<h2>世界电影票房排行榜</h2>
<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>复仇者联盟</li>
</ol>

image.png

无序列表

无序列表也是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 <ul> (unordered lists) 标签。每个列表项始于 <li> (list item) 标签。

<h2>购物清单</h2>
<ul>
  <li>🍇</li>
  <li>🍉</li>
  <li>🍎</li>
</ul>

image.png

自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。 自定义列表以 <dl> (definition lists) 标签开始。每个自定义列表项以 <dt> (definition title/term) 开始。每个自定义列表项的定义以 <dd> (definition description) 开始。

<h2>霸王别姬</h2>
<dl>
  <dt>导演：</dt>
  <dd>陈凯歌</dd>
  <dt>主演：</dt>
  <dd>张国荣</dd>
  <dd>张丰毅</dd>
  <dd>巩俐</dd>
  <dt>上映日期：</dt>
  <dd>1993-01-01</dd>
</dl>

image.png

HTML 链接

互联网 之所以被称为互联网便是因为，网页之间是互通的，可以通过链接从一个页面到另一个页面。HTML使用标签 <a> （anchor） 来设置 超文本链接 。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，通过点击这些内容来跳转到新的文档或者当前文档中的某个部分。

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

image.png

默认情况下，链接将以以下形式出现在浏览器中：

  • 一个未访问过的链接显示为蓝色字体并带有下划线。
  • 访问过的链接显示为紫色并带有下划线。
  • 点击链接时，链接显示为红色并带有下划线。

可通过 CSS 对其样式进行其他设定。

href 属性

该属性用于描述目标地址。

target 属性

该属性用于规定在何处打开标签。

  • target="_self" 为 默认 打开方式。点击链接后，会在原窗口下打开。
  • target="_blank" 点击链接后将在新窗口中打开标签。
<a href="https://www.bytedance.com/" target="_blank">
  字节跳动官网
</a>

HTML 多媒体元素

图像

图像由 <img> 标签定义。<img> 是空标签，即它只包含属性，并且没有闭合标签。

<img
  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ubqnuhbnuho/movable_type.jpg"
  alt="Metal movable type"
  width="400"
/>

image.png

src 属性

要在页面上显示图像，你需要使用 源属性（src）。src 指 "source"。源属性 的值是图像的 URL 地址。URL 指存储图像的位置。如果名为 "pulpit.jpg" 的图像位于 www.runoob.com 的 images 目录中，那么其 URL为 http://www.runoob.com/images/pulpit.jpg。

alt 属性

该属性用来为图像定义一串 预备的可替换的文本 。替换文本属性的值是用户定义的。在浏览器 无法载入图像 时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用 纯文本浏览器 的人来说是非常有用的。

height 属性 和 width 属性

该属性用于设置图像的高度与宽度。属性值默认单位为 像素（px） 。

音频

直到现在，仍然不存在一项旨在网页上播放音频的标准。今天，大多数音频是通过 插件 （比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。

<audio 
  src="/assets/music.ogg"
  controls
></audio>

image.png

<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，以及浏览器不支持的 <audio> 元素的提示文本。浏览器将使用第一个支持的音频文件。

<audio controls> 
  <source src="horse.ogg" type="audio/ogg"> 
  <source src="horse.mp3" type="audio/mpeg"> 
  您的浏览器不支持 audio 元素。
</audio>

src 属性

该属性用于描述音频的 URL 地址。 （ 同 img ）

controls 属性

该属性供添加播放、暂停和音量控件。

type 属性

该属性用于规定音频的播放形式。目前, <audio> 元素支持三种音频格式文件: MP3, Wav, 和 Ogg。

视频

类似于 <audio> 元素，HTML5 规定使用 <video> 元素作为在网页上插入视频的标准方法。

<video
  src="/assets/video.mp4"
  controls
></video>

image.png

HTML 表单和输入

HTML 表单用于收集用户的输入信息，表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。多数情况下被用到的表单标签是输入标签 <input> 。输入类型是由 type 属性定义。

placeholder 属性

该属性表示一个占位符，在用户没有输入时的默认显示 （ 文本可自定义 ） 。

<input placeholder="请输入用户名">

type 属性

  • 范围滑块 range <input type="range">

    image.png

  • 密码字段 password <input type="password">

    密码字段字符不会明文显示，而是以星号 * 或圆点 . 替代。 image.png

  • 数字 number <input type="number" min="1" max="10">

    可设定最大最小值来规定范围。 image.png

  • 日期 date <input type="date" min="2018-02-10">

    image.png

  • 文本框 text <input type="text">

    image.png

  • 文本域 textarea <textarea>Hey</textarea>

    通常用于长段文字的输入。可通过 cols 、rows 属性调整文本域大小。也可手动拖取。

    image.png

  • 单选框 radio <input type="radio">

    <p>
  <label><input type="radio" name="sport" />⚽</label>
  <label><input type="radio" name="sport" />🏀</label>
</p>

    image.png

    此处将 label 与 input 绑定，点击⚽🏀也可选中，若不绑定，则需要点击圆圈才可选中。

  • 复选框 checkbox <input type="checkbox">

    <p>
  <label><input type="checkbox" />🍎</label>
  <label><input type="checkbox" checked />🍏</label>
</p>

    checked 属性规定在页面加载时应该被预先选中的元素。

    image.png

  • 带有提示的快捷文本框 <input list="countries" />

    <input list="countries" />
<datalist id="countries">
  <option>Greece</option>
  <option>United Kingdom</option>
  <option>United States</option>
</datalist>

    image.png

下拉列表

<p>
  <select>
    <option>🥑</option>
    <option>🥩</option>
    <option>🥓</option>
  </select>
</p>

image.png

HTML 文本类标签

引用

  • 快捷引用 (长引用） blockquote

    直接引用别人的一段话、一整段文字。

    <blockquote cite="http://t.cn/RfjKO0F">
<p>天才并不是自生自长在深林荒野里的怪物， 是由可以使天才生长的民众产生、长育出来的，所以没有 这种民众，就没有天才。</p>
</blockquote>

    image.png

    cite 属性表示文字的来源地址。

  • 短引用 cite 通常用于引用章节标题、书名等。

    <p>我最喜欢的一本书是<cite>小王子</cite>。</p>

    image.png

  • 短引用 q 通常用于引用较短的、前文讲过的内容。 （ 与 cite 不同 ）

    <p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p>

    image.png

代码

会用不同于正常字体的等宽字体展示。

  • 短代码句

    <p><code>const</code>声明创建一个只读的常量。</p>

    image.png

  • 长代码段

    <pre><code>
  const add = (a, b) => a + b;
  const multiply = (a, b) => a * b;
</code></pre>

    image.png

常用强调样式

  • 加粗

    <p>在投资之前，<strong>一定要做风险评估</strong>。</p>

    image.png

  • 斜体

    <p>Cats <em>are</em> cute animals.</p>

    image.png

HTML 页面结构

常见页面结构内容划分如下 ↓ ↓ ↓

image.png

  • <nav> 标签为页面导航
  • <header>、<footer>为页眉、页尾

语义化

语义化很重要 ！ ！ ！

image.png

强调语义化的原因 ↓ ↓ ↓

image.png

语义化的好处 ↓ ↓ ↓ 无障碍性 可读性 up！ up！ up！

image.png

如何做到可视化↓ ↓ ↓

image.png

多浏览 MDN 以及 W3C 上的代码及规范等

avatar
文章
阅读
粉丝