前端与 HTML | 青训营笔记

沈点心
70 阅读5分钟

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

重点内容

  • 前端工作的定义
  • 前端技术栈拆解与分析
  • HTML 作用解析
  • HTML 语义化

前端的相关介绍

1. 什么是前端？

使用Web技术栈解决多终端图形界面下的人机交互问题

2. 前端技术栈

浏览器能够通过http协议和服务器进行通信 image.png

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

  • 产品的功能有哪些？可以解决什么样的问题？是否满足用户需求？
  • 产品的界面是否美观？
  • 是否所有人都能够无障碍地使用该产品？
  • 产品的安全性保证？产品是否存在可能被利用的漏洞？
  • 产品的运行速度是否足够快？运行是否流畅？用户体验如何？
  • 产品是否能够在多端正常使用？

4. 前端的边界？

  • node.js：能够开发服务器端的应用
  • ELECTRON、React Native：能够开发客户端的应用
  • WebRTC：能够进行PTP（Point to Point）即点对点的传输，比如实现多人会议
  • WebGL：能够开发更流畅的3D游戏
  • WebASSEMBLY：能够将c++等多种语言编译成可以直接在浏览器上运行的代码

image.png

5. 开发环境

image.png

HTML基础

1. HTML是什么？

  • HyPerText即为超文本，包括图片、标题、链接和表格
  • MarkUp Language即为标记语言 image.png
  • 示例一：使用img标签表示一张图片 image.png
  • 示例二：
    • <!DOCTYPE> 表示HTML版本
    • <html> 根标签
    • <head> 页面元数据，不直接呈现给用户
    • <body> 呈现给用户的页面内容
<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8">
   <title>页面标题</title>    
 </head>
 <body>
   <h1>一级标题</h1>
   <p>段落内容</p>
 </body>
</html>

运行效果 image.png

2. DOM树

把HTML结构转化成树形结构 image.png

3. HTML语法

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

4. 标题h1-h6

  • h1-h6 表示一级到六级标题
  • 示例代码
<h1>字体排印学</h1>
<h2>历史</h2>
<p>活字的雏形或可追溯至公元前两千年前后美
索不达米亚文明的乌鲁克和拉尔萨，砖块上面不
均匀的印花被视作有可能是活字思想雏形。</p>
<h3>印刷体源流</h3>
<p>中国在唐代就已经出现雕版印刷术，公元868
年的《金刚经》是现存最古老的印刷品之一，使用
的技术即是木雕版印刷。</p>
<h2>应用</h2>
<p>...</p>
  • 运行效果

image.png

5. 列表

  • <ol> 表示有序列表
  • <ul> 表示无序列表
  • <dl> 表示定义列表
  • <dt> <dd> 在定义列表中，使用<key,value>进行表示
  • 示例代码
<h2>世界电影票房排行榜</h2>
<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>复仇者联盟</li>
</ol>

<h2>购物清单</h2>
<ul>
  <li>🍇</li>
  <li>🍉</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>
  • 运行效果

image.png

6. 链接

  • <a> 网址链接
    • href ：值为超链接的引用地址
    • target ：值为"_blank"时表示新建标签页打开链接‘’
  • <img> 图片链接
    • src ：值为超链接的引用地址
    • alt ：值为图片加载失败时替代的文本内容
  • <audio> <video> 音频/视频链接
    • src ：值为超链接的引用地址
    • controls ：表示使用浏览器默认的音频控件
  • 示例代码1
<a href="https://www.bytedance.com/">
  字节跳动官网
</a>

<a href="https://www.bytedance.com/" target="_blank">
  字节跳动官网
</a>
  • 运行效果1

image.png

  • 示例代码2
<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>
  • 运行效果2

image.png

6. 输入

  • <input> 输入框
    • placeholder ：占位符，用户未输入内容时默认显示
    • type ：
      • 值为 range 时，表示一个滑动条
      • 值为 number 时，表示一个能够输入数值的输入框，可以使用min和max指定输入数值的最大最小值
      • 值为 date 时，表示一个日期选择器，可以使用min和max指定选择日期的最大最小值
      • 值为 checkbox 时，表示一个多选框
      • 值为 radio 时，表示一个单选框
    • list ：值为指定用户有哪些提示的选项
  • <textarea> 多行文本输入框，可以调整大小
  • <select> 选择框
    • <option> ：可选择的选项
  • <blockquote> 块级引用
  • <cite> 短引用，例如书名、章节名
  • <q> 短引用，例如前文提到的具体内容
  • <pre> <code> 代码引用
  • <strong> <em> 强调。strong 表示重要， em 表示语气上的强调
  • 示例代码1
<input placeholder="请输入用户名">

<input type="range">

<input type="number" min="1" max="10">

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

<textarea>Hey</textarea>
  • 运行效果1

image.png

  • 示例代码2
<p>
  <label><input type="checkbox" />🍎</label>
  <label><input type="checkbox" checked />🍏</label>
</p>

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

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

<input list="countries" />
<datalist id="countries">
  <option>Greece</option>
  <option>United Kingdom</option>
  <option>United States</option>
</datalist>
  • 运行效果2

image.png

  • 示例代码3
<blockquote cite="http://t.cn/RfjKO0F">
  <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>
  • 运行效果3

image.png

7. 内容划分

image.png

8. 语义化是什么？

  • HTML中的 元素 、 属性 及 属性值 都拥有某些含义
  • 开发者应该遵循 语义 来编写HTML
    • 有序列表用ol；无序列表用ul
    • lang属性表示内容所使用的语言

9. 谁在使用我们写的HTML

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

10. 语义化的好处

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

11. 如何做到语义化？

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

总结

对于前端的工作有了更清楚的了解，学习了HTML的一些重要标签，例如多媒体标签、列表、输入等等，还学习了一些HTML的基本概念和语法。

avatar
文章
阅读
粉丝