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

什么是前端？

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

前端技术栈

前端应该关注哪些方面？

前端的边界？

开发环境

HTML是什么？

HyperText：图片，标题链接，表格

Markup Language:标签

例：<img src="photo.jpg"/> \src=属性名，photo.jpy=属性值

<html>                                       \\根标签
   <head>                                     \\里面放一些原数据
       <meta charset="UTF-8">
       <title>页面标题</itle>
   </head>
   <body>
        <h1>一级标题</H1>                     \\展示给用户的内容
        <P>段落内容</P>
   <body>
   </html>

DOM树

HTML语法

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

举例

排序类举例 ol,li,ul,dl,dt,dd

<ol>                                \\<ol>表示有序列表
      <li>阿凡达<li>                \\ <li>表示列表项
      <li>泰坦尼克号<li>             
</ol>

输出：

1.阿凡达

2.泰坦尼克号

<ul>                       \\无顺序列表
   <li>你<li>
   <li>我<li>
</ul>

输出：

·你

·我

<dl>                   \\定义列表
   <dt>导演：</dt>        \\标题
   <dd>陈凯歌</dd>          \\具体表述
</dl>

输出：

导演：

陈凯歌

多媒体类例 a,href,sre,alt,width,controls

<a href="https://www.bytedance.com/"    target="_blank">    \\a表示链接  href表示超链接      字节跳动官网                        \\ target="_blank"表示不替换原有界面，而是新窗口打开
</a>

输出：字节跳动官网

<img           \\img片使用标签
      src="一堆"         \\src表示图片的地址
      alt="一些          \\alt（不被加载时）代替性文本
      width="400"        \\width图片宽度
/>

输出：(图片）

<audio                     
   src="一堆"
   controls              \\controls默认显示播放按钮，进度条，时间
></audio>

输出：

<video
   src="一堆"
   controls
></video>

输出：

输入类举例

<input placeholder="输入用户名"> \placeholder是未输入时显示的

<input type="range"> \input是文本输入框

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

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

<textarea>Hey</textarea> \textarea是多行输入框

输出：

选择类举例 type,select,list

（红苹果等应是小表情包）

<p>
  <label><input type="checkbox"/>红苹果<label>       \\input type="checkbox用户可多选
  <lable><input type="checkbox"checked/>绿苹果</label>  
  </p>
  
  <p>
    <label><input type="radio" name="sport"/>足球</label>      \\input type="radio"用户可单选
    <label><input type="radio" name="sport"/>篮球<label>    \\通过name限定互斥达到选一个效果
 </p>
 
 <p>
  <select>                    \\select下拉选择
    <option>牛油果</option>      \\选项写在option里
    <option>肉肉</option>
  </select>
</p>
 
 <input list="countries"/>      \\list为用户提供提示选项
 <datalist id="countries">       \\如下为提示的选项
   <option>Greece</option>         
   <option>United Kingdom</opton>
   <option>United states</option>
</datalist>

输出：

文本类引用举例 blockquote,cite,q,code

<blockquote cite="http://cn/RfjKO0F">    \\blockquote表示长的引用，一般是直接引用别人的一段话
<P>天才并不是自生自长在生长在深林荒野的怪物，是由可以使天才生长的民众产生，长育出来的，所以没有这种民众，就没有天才。</p>             \\cite属性表示来源于哪
</blockquote>

输出：

天才并不是自生自长在深林荒野里的怪物，是由可以使天才生长的民众产生，长育出来的，所以没有这种民众，就没有天才。

<p>我最喜欢的一本书是<cite>小王子</cite>。</p>    \\<cite>表示短引用，一般是作品名字

输出：

我最喜欢的一本书是小王子

<p>在<cite>第一章</cite>,我们讲过<q>字符串是不可变量</q>。</P>     \\<q>之前讲过的再引用一遍,一般是一句话

输出：

在第一章中，我们讲过“符串是不可变量”。

<p><code>const</code>声明创建一个只读的常量。      \\code表示引用代码
</p>

输出：

const声明创建一个只读的常量。

<pre><code>                            \\<code>前加<pre>表示长的多段引用
const add = (a,b)=> a + b;         \\<code><pre>的话字体会不一样，等宽编程字体
const multiply +(a,b) => a * b;
</code></pre>

输出：

const add = (a,b) => a + b; const multiply = (a,b) => a + b;

文本标签类举例 strong，em

<p>在投资前，<strong>一定要做风险评估</strong>.</p>   \\strong更突出重要，紧急

输出：

在投资之前，一定要做风险评估

<p>Cats <em>are</em> cute animals.</p>      \\em是语气上的紧急

输出：

Cats are cute animals

内容划分

语义化是什么？

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

谁在使用我们写的HTML

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

语义化的好处

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

传达的是内容，而不是形式

如何做到语义化？

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

前端与HTML|青训营笔记

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