前端与 HTML | 青训营笔记

Cooyper
60 阅读3分钟

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

前端与 HTML

前端工作的定义

  • 解决 GUI 人机交互问题

  • 跨终端

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

  • Web 技术栈

前端技术栈

前端的技术栈包括 HTML（内容）、CSS（样式）、JavaScript（行为）等。

前端应该关注的方面

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

前端的边界

  • node
  • ELECTRON
  • React Native
  • Web RTC
  • WebGL
  • WebASSEMBLY

开发环境

  • 浏览器

    • Chrome
    • Edge
    • Firefox
    • Safari

  • 编辑器

    • VSCode
    • Vim
    • WebStorm

HTML

HyperText Markup Language（HTML），超文本标记语言。其中 HyperText 表示图片、标题、链接和表格等元素，Markup Language 则表示类似于 <h1>文章标题</h1> 的语言语法 。

一个 HTML 元素包含元素名、属性和属性值等各种元素，例如：

<img src="photo.jpg" />

一个简单的 HTML 页面结构示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>一级标题</h1>
    <p>段落内容</p>
</body>
</html>

HTML 语法

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

标题 h1~h6

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

列表

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
​
<body>
    <h2>世界电影票房排行榜</h2>
    <ol>
        <li>阿凡达</li>
        <li>泰坦尼克号</li>
        <li>复仇者联盟</li>
    </ol>
    <h2>购物清单</h2>
    <ul>
        <li>晚</Ti>
        <li>O</li>
        <li>的</li>
    </ul>
    <h2>霸王别姬</h2>
    <dl>
        <dt>导演: </dt>
        <dd>陈凯歌</dd>
        <dt>主演: </dt>
        <dd>张国荣</dd>
        <dd>张丰毅</dd>
        <dd>巩俐</dd>
        <dt>上映日期: </dt>
        <dd>1993-01-01</dd>
    </dl>
</body>
​
</html>

链接

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
​
<body>
    <a href="https://www.bytedance.com/">字节跳动官网</a>
    <a href="https://www.bytedance.com/target=" _blank">字节跳动官网</a>
</body>
​
</html>

多媒体

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
​
<body>
    <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ubqnuhbnuho/movable_type.jpg" alt="Metal movable type"
        width="400" />
    <audio src="/assets/music.ogg" controls></audio>
    <video src="/assets/video.mp4" controls></video>
</body>
​
</html>

输入

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
​
<body>
    <input placeholder="请输入用户名">
    <input type="range">
    <input type="number" min="1" max="10">
    <input type="date" min="2018-02-10">
    <textarea>Hey</textarea>
</body>
​
</html>

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
​
<body>
    <p>
        <label><input type="checkbox /> </label>
        <label><input type=" checkbox" checked /></label>
    </p>
    <p>
        <label><input type="radio" name="sport" />Q</label>
        <label><input type="radio" name="sport" />S</label>
    </p>
    <p>
        <select>
            <option>a</option>
            <option>b</option>
            <option>c</option>
        </select>
    </p>
    <input list="countries" />
    <datalist id="countries">
        <option>Greece</option>
        <option>United Kingdom</option>
        <option>United States</option>
    </datalist>
</body>
​
</html>

其他元素

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
​
<body>
    <blockquote cite="http://t.cn/RfjK00F">
        <p>天才并不是自生自长在深林荒野里的怪物，是由可以使天才生长的民众产生、长育出来的，所以没有 这种民众，就没有天才。</p>
    </blockquote>
    <p>我最喜欢的一本书是<cite>小王子</cite>。</p>
    <p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p>
    <p><code>const</code>声明创建一个只读的常量
    </p>
    <pre><code>
    const add = (a,b)=> a+ b;
    const multiply =(a,b)=> a*b;
    </code></pre>
    <p>在投资之前，<strong>一定要做风险评估</strong>。</p>
    <p>Cats <em>are</em> cute animals.</p>
</body>
​
</html>

内容划分

在设计页面时，应该根据内容进行划分，通常会把页面划分为 header、main、aside 和 footer 等部分。

语义化

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

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

    • 有序列表用 ol；无序列表用 ul
    • lang 属性表示内容所使用的语言

使用 HTML 的对象：

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

语义化的好处：

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

做到语义化的方式

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