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

前端

前端技术栈

前端关注的方面

• 功能：满足用户的需求
• 美观
• 无障碍：让所有人在任何外部环境下都可以更好地使用
• 安全：保护用户数据
• 性能：响应速度快、动画流畅
• 兼容性：要可以在不同设备上正常适当显示
• 体验：前端直接影响用户的体验

HTML

什么是HTML

HyperText Markup Language
HyperText（超文本）	超出一般文本，如图片，标题，链接，表格
Markup Language（标记语言）	用标签来表述

一个html元素的构成

<p>hello everyone!</p>

• <p>hello everyone!</p>元素（Elemenet）:开始标签、结束标签与内容结合
• <p>开始标签（Opening tag）
• </p>结束标签（Closing tag）
• hello everyone! 内容（Content）

为元素添加属性

<p class="example">hello everyone!</p>

• class="example"属性（Attribute）包含以下内容

1. 空格 属性与元素名称之间 或 属性与前一个属性之间
2. 属性名称 后面跟等于号
3. 属性值 推荐用一对引号“”引起来

一段完整html代码

常用标签

标题h1-h6

1. <h1></h1>
2. <h1></h1>
3. <h1></h1>
4. <h1></h1>
5. <h1></h1>
6. <h1></h1>

列表

• 有序列表（Ordered list）<ol></ol>
  • 列表项（List item）<li></li>
• 无序列表（Unordered list）<ul></ul>
  • 列表项（List item）<li></li>
• 定义列表（definition list）<dl></dl>
  • 定义标题（definition title）<dt><dt>
  • 定义描述（definition description）<dd><dd>
  • 注意：定义标题与定义描述是多对多的关系，即多个标题可以共用一个描述，一个标题可以使用多个描述

链接

• 替换原页面<a href="bala">一个替换原页面的链接</a>
• 新窗口打开<a href="bala" target="_blank">一个新窗口打开的链接</a>

多媒体

• 图片<img src="bala" alt="图片"/>
  • src获取的是图片的url 即其相对或绝对路径
  • alt获取的是当图片无法加载时显示出的替代文字
• 音频<audio src="bala" controls></audio>
  • src同上
  • controls向用户显示控件 如播放按钮、进度条
• 视频<video src="bala" controls></video>

输入

• 在输入之前有占位内容<input placeholder="在用户输入前在输入框中的占位内容">
• 输入范围<input type="range">
• 输入数字<input type="number" min="1" max="10">
  • 可以通过max min指定可输入的最大最小值
• 输入日期<input type="date" min="2020-01-01">
• 多行文字输入<textarea></textarea>
• 辅助快速输入
  <input list="countries" />
<datalist id="countries">
<option>China</option>
</datalist>
  • 注：辅助输入不限制用户自由输入

选择

• 多选
  <label><input type="checkbox" />apple</label>
<label><input type="checkbox" />banana</label>

• 单选
  <label><input type="radio" name="fruit"/>apple</label>
<label><input type="radio" name="fruit"/>banana</label>

  • 多个radio之间若name相同只能选择一个

• 下拉选择<select></select>

  • 其中所包含的选项<option></option>

文本类标签

• 引用类
  • 长引用（引用了较长的作品内容）<blockquote cite="bala"></blockquote>
    • cite 给出引用文字的来源
  • 短引用（引用了作品的名字、章节标题等）<cite></cite>
  • 短引用（引用了较短的作品内容）<q></q>
• 代码标签（所写内容是一段代码）<code></code>
• 强调类
  • 强调内容的严重、紧急<strong></strong>
  • 语气强调（一段话中需要）<em></em>

内容划分

• 页头（logo、导航等等）<header></header>
• 导航 <nav></nav>
• 页面主体内容 <main></main>
• 与内容相关但又不属于内容（广告、文章推荐）<aside></aside>
• 文章正文<article></article>
• 页尾（链接、版权信息等等）<footer></footer>

语义化的好处

• html中所有元素以及元素的属性值就是语义，开发者应该遵循语义来编写代码

1. 遵循语义规范便于团队协作与后期维护
2. 遵循语义规范便于浏览器进行页面展示
3. 遵循语义规范便于搜索引擎提取页面关键词，进行排序（关键词出现在代码的不同位置的权重不同）
4. 遵循语义规范便于无障碍性的提升