前端与 HTML | 青训营笔记

张点心
461 阅读4分钟

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

一、本堂课重点内容：

- 前端概览
- 什么是前端
  • 前端的技术栈
  • 前端的边界
  • 前端的关注点
- HTML
  • HTML 简介
  • 常用标签
  • HTML 语义化

二、详细知识点介绍：

1.什么是前端？

前端工程师是使用web技术栈解决多端图形用户交互问题的工程师。

2.前端技术栈

  • HTML(最基础):负责页面的结构和内容
  • CSS（样式）：eg.位置、大小、颜色等信息
  • JavaScript：定义网页的行为

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

功能、美观、无障碍（Accessibility）、安全、性能、兼容性

4.前端的边界

  • nodejs：开发服务器端的应用
  • ELECTRON:开发客户端的应用
  • React Native：开发客户端的应用
  • Web RTC:进行P2P在线传输，实现多人的会议
  • WebGL：开发3D游戏
  • WebASSEMBLY：把c++、Rast等其他语言编写的代码编译成可以直接在浏览器运行的代码

4.开发环境

  • 浏览器：IE/Edge、Chrome、Firefox、Safari
  • 编辑器：VSCode、Vim、WebStorm

5.HTML（HyperText Markup Language）

image.png

-DOM树

image.png

-HTML语法

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

-标题h1~h6

-列表标签

  • <ul><li>无序列表标签
  • <ol><li>有序列表标签
  • <dl><dt><dd>定义性列表标签
<dl>
  <dt>第一项</dt>
  <dd>叙述第一项的定义</dd>
</dl>

-链接

<a href="网址" target="_self">链接显示的文本</a>
<a href="网址" target="_blank">链接显示的文本</a>

技术点解释：

  • a标签有target属性，代表标签打开的方式；
  • 默认值“_self”代表在当前页面打开链接；
  • “_blank”代表在新窗口打开链接

-多媒体（图片、音频、视频）

  • img
  • audio
  • video

-控件（输入和选择）

1. <input>标签
        <input placeholder="请输入用户名">
        <br>
        <input type="range">
        <br>
        <input type="number" min="1" max="10">
        <br>
        <input type="date" min="2018-02-10">
        <br>
        <textarea>Hey</textarea>

运行结果：

image.png 
<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>
技术点解释：
  • checkbox多选（方形选框）
  • radio单选（圆形选框）
运行结果：

image.png

2. <select>标签
  <select>
    <option>🥑</option>
    <option>🥩</option>
    <option>🥓</option>
  </select>
运行结果：

image.png

3.用户在文本框输入时给予一些提示，但不影响输入

代码实现：

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

运行结果：

image.png

- 文本标签

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

技术点解释：cite属性（文字的来源）

运行结果：

image.png

(2).<cite>标签 短意引用
  • 通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
  • 引用的文本将以斜体显示
代码实现：
<p>我最喜欢的一本书是<cite>小王子</cite>。</p>
运行结果：

image.png

(3).<q>标签 短意引用
  • 定义短的引用。
  • 浏览器经常在引用的内容周围添加引号。
代码实现：
<p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p>
运行结果：

image.png

(4).<code>标签 代码引用

是一个短语标签，用来定义计算机代码文本。

代码实现：
<p><code>const</code>声明创建一个只读的常量。</p>
<pre><code>
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
</code></pre>
运行结果：

image.png

(5).<strong>标签 强调此东西重要、严重、紧急

对文档中的文本进行格式化： <strong>加粗文本</strong>

代码实现：
<p>在投资之前，<strong>一定要做风险评估</strong>。</p>
运行结果：

image.png

(6).<em>标签 强调语气

告诉浏览器把其中的文本表示为强调的内容。文字用斜体显示

代码实现：
<p>Cats <em>are</em> cute animals.</p>
运行结果：

image.png

6.页面内容划分

image.png

7.语义化是什么？

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

8.谁在使用我们写的HTML？

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

9.语义化的好处？

  • 代码可读性
  • 可维护性
  • 搜索引擎优化
  • 提升无障碍性
HTML传达内容，而不是样式

10.如何做到语义化？

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

三.总结

通过第一节课的学习，对“前端要解决的基本问题”及“什么是 HTML”有了初步的了解，知道HTML中的元素、属性及属性值都有某些含义，开发者应该遵循语义来编写HTML，我们应该了解每个标签和属性的含义，思考什么标签最适合描述这个内容，不使用可视化工具生成代码。

avatar
文章
阅读
粉丝