前端与HTML|青训营笔记

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

前端

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

前端技术栈 js（行为）css（样式）HTML（内容）——网络协议——服务器端

功能、美观、无障碍（所有人色盲）、安全、性能（流畅）、兼容性（各个设备使用）、体验

HTML

hyper text 图片标题链接表格 markup language

<h1>标题</h1>
<img src(属性名)="photo.jpg"/>

列表

有序列表

<ol>
    <li>阿凡达</li>
    <li>阿凡达</li>
</ol>

阿凡达
阿凡达

无序列表

<ul>
    <li>🍓</li>
    <li>🍓</li>
</ul>

🍓
🍓

<dl>
    <dt>导演：</dt>
    <dd>陈凯歌</dd>
</dl>

导演：: 陈凯歌

链接

<a href="https://ww.bytedance.com/">
字节跳动官网
</a>

<a href="https://ww.bytedance.com/"
target="_blank">
字节跳动官网
</a>

字节跳动官网

字节跳动官网 (新窗口打开)

输入

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

选择

多选
<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>

引用

快捷引用 cite 来源

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

cite 短引用

<p>我最喜欢的一本书是<cite>小王子</cite>。</p>
<p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p>

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

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

<p><code>const</code>声明创建一个只读的常量。</p>

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


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

强调

<p>在投资之前，<strong>一定要做风险评估</strong>。</p>

<p>Cats <em>are</em> cute animals.</p>

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

Cats are cute animals.

谁使用

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

语义化的好处

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