前端与 HTML | 青训营笔记

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

什么是前端

解决GUI人机交互清问题
跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR等
Web技术栈

前端关注的方面

功能：满足用户的需求
美观：界面好看
无障碍：针对色盲或盲人是否能正常使用
安全：用户数据等安全
性能：使用过程的体验以及动画的流畅
兼容性：在多端中运行

HTML

作用：标记当前使用的html文件的版本，用来告诉浏览器，要以标准模式来解析HTML页面，这个声明必须放在HTML文档的第一行。

如果没有<!doctype html>，浏览器会以**BackCompat：怪异模式（默认）**来渲染页面，最后导致页面与实际不符

head标签

作用：用于放置页面的元数据 —— 页面需要的数据，但是不需要展示

meta标签

指定文档字符的编码：

<meta charset="utf-8">

<meta>元素包含了 name 和 content 属性：

name 指定了 meta 元素的类型；说明该元素包含了什么类型的信息。
content 指定了实际的元数据内容。

比如以下代码是介绍作者：

<meta name="author" content="Chris Mills">

许多 <meta> 特性已经不再使用。例如，keyword <meta> 元素（<meta name="keywords" content="fill, in, your, keywords, here">）——提供关键词给搜索引擎，根据不同的搜索词，查找到相关的网站——已经被搜索引擎忽略了，因为作弊者填充了大量关键词到 keyword，错误地引导搜索结果。

作用：配置元数据，使其对页面产生影响

以下代码可在移动端，将尺寸缩放到原来的0.5倍

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

DOM树

浏览器获取到HTML，将其解析成一个DOM树，每个节点称为DOM节点

列表标签

有序列表

<ol>
    <li>阿凡达</li>
    <li>复仇者联盟</li>
</ol>

效果：

阿凡达
复仇者联盟

无需列表

<ul>
    <li>阿凡达</li>
    <li>复仇者联盟</li>
</ul>

效果：

阿凡达
复仇者联盟

key value形式列表

<dl>
    <dt>导演：</dt>
    <dd>陈凯歌</dd>
    <dt>主演：</dt>
    <dd>张国荣</dd>
    <dd>张丰毅</dd>
    <dd>巩俐</dd>
    <dt>上映时间</dt>
    <dd>1993-01-01</dd>
</dl>

效果：

导演：: 陈凯歌
主演：: 张国荣; 张丰毅; 巩俐
上映时间: 1993-01-01

<dl>：定义列表
<dt>：列表的标题(key)
<dd>：内容值(value)

input 输入标签

MDN input

Type	描述
button	没有默认行为的按钮，上面显示 value 属性的值，默认为空。
checkbox	复选框，可设为选中或未选中。
color	用于指定颜色的控件；在支持的浏览器中，激活时会打开取色器。
date	输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。
datetime-local	输入日期和时间的控件，不包括时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。
email	编辑邮箱地址的区域。类似 `text` 输入，但在支持的浏览器和带有动态键盘的设备上会有确认参数和相应的键盘。
file	让用户选择文件的控件。使用 accept 属性规定控件能选择的文件类型。
hidden	不显示的控件，其值仍会提交到服务器。
image	带图像的 `submit` 按钮。显示的图像由 `src` 属性规定。如果 src 缺失，alt 属性就会显示。
month	输入年和月的控件，没有时区。
number	用于输入数字的控件。如果支持的话，会显示滚动按钮并提供缺省验证（即只能输入数字）。拥有动态键盘的设备上会显示数字键盘。
password	单行的文本区域，其值会被遮盖。如果站点不安全，会警告用户。
radio	单选按钮，允许在多个拥有相同 name 值的选项中选中其中一个。
range	此控件用于输入不需要精确的数字。控件是一个范围组件，默认值为正中间的值。同时使用 min 和 max 来规定值的范围。
reset	此按钮将表单的所有内容重置为默认值。不推荐。
search	用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标。
submit	用于提交表单的按钮。
tel	用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘。
text	默认值。单行的文本区域，输入中的换行会被自动去除。
time	用于输入时间的控件，不包括时区。
url	用于输入 URL 的控件。类似 `text` 输入，但有验证参数，在支持动态键盘的设备上有相应的键盘。
week	用于输入以年和周数组成的日期，不带时区。
废弃的值
datetime	已弃用用于输入基于 UTC 时区的日期和时间（时、分、秒及秒的小数部分）。

使用name属性实现单选框互斥

<label>
    <input type="radio" name="sport">篮球
</label>
<label>
    <input type="radio" name="sport">足球
</label>

输入框提示

<input list="colorsxx">
<datalist id="colorsxx">
  <option>#ff0000</option>
  <option>#ee0000</option>
  <option>#dd0000</option>
  <option>#cc0000</option>
  <option>#bb0000</option>
</datalist>

input中list属性与datalist标签的id对应，当在输入与option标签内容相关的文字，就会出现对应的提示

文本类标签

blockquote 块级引用元素

<blockquote cite="https://tools.ietf.org/html/rfc1149">
  <p>Avian carriers can provide high delay, low
  throughput, and low altitude service.  The
  connection topology is limited to a single
  point-to-point path for each carrier, used with
  standard carriers, but many carriers can be used
  without significant interference with each other,
  outside of early spring.  This is because of the 3D
  ether space available to the carriers, in contrast
  to the 1D ether used by IEEE802.3.  The carriers
  have an intrinsic collision avoidance system, which
  increases availability.</p>
</blockquote>
<p>
    ****
</p>

效果：

HTML <blockquote> 元素（或者 HTML 块级引用元素），代表其中的文字是引用内容。通常在渲染时，这部分的内容会有一定的缩进。

若引文来源于网络，则可以将原内容的出处 URL 地址设置到 cite 特性上，若要以文本的形式告知读者引文的出处时，可以通过 <cite> 元素

使用备注

修改缩进距离：

修改被引用内容的缩进距离，可以使用 CSSmargin-left和/或 margin-right
若想使用在行内引用较短的内容而非创建一个单独的引用块，可使用 <q>（Quotation）元素。

<q>与<cite>的区别：具体的内容一般使用<q>，书名、章节之类的一般使用<cite>

pre 预定义格式文本

在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。

<pre>
  L          TE
    A       A
      C    V
       R A
       DOU
       LOU
      REUSE
      QUE TU
      PORTES
    ET QUI T'
    ORNE O CI
     VILISÉ
    OTE-  TU VEUX
     LA    BIEN
    SI      RESPI
            RER       - Apollinaire
</pre>

效果：

  L          TE
    A       A
      C    V
       R A
       DOU
       LOU
      REUSE
      QUE TU
      PORTES
    ET QUI T'
    ORNE O CI
     VILISÉ
    OTE-  TU VEUX
     LA    BIEN
    SI      RESPI
            RER       - Apollinaire

code

<code>元素呈现一段计算机代码

使用<pre>标签与<code>标签实现代码块

<pre><code>
const add = (a,b) => a + b;
console.log(add(a,b))
</pre></code>

语法

标签和属性不区分大小写，推荐小写
空标签不可以闭合，比如 input、meta
属性值推荐用双引号包裹
某些属性值为布尔类型时可以直接写入属性名来表示true，比如require，readonly

语义化

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

<header>：头部标签
<main>：主要内容标签
<aside>:表示一个和其余页面内容几乎无关的部分
....

很多标签都可以用<div>标签来替代，但是语义化HTML会有更多的好处：

有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。
在没有CSS的时候能够清晰的看出网页的结构，增强可读性。
便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。
提高无障碍性