[ 前端与 HTML | 青训营笔记day1]什么是前端工作常见的html语法（标题、段落、列表、插入链接、插入多媒体

前端与HTML

前端工作的定义

用web技术栈解决多端图形界面下的人机交互问题

前端技术栈的拆解与分析

最基础的内容：

JavaScript：定义行为
CSS :样式
HTML :内容

HTML

HyperText Markup Language

DOM 树

HTML的基础语法

标题

<h2>票房排行</h2>

段落

<p>活字的雏形或可追溯至公元前两千年前后美索不达米亚文明的乌鲁克和拉尔萨，砖块上面不均匀的印花被视作有可能是活字思想雏形。</p>

有序列表有序号1234

<ol>
    <li>阿凡达</li>
    <li>泰坦尼克号</li>
    <li>复仇者联盟</li>
</ol>

无序列表没有序号，用小黑点表示

<h2>购物清单</h2>
<ul>
  <li>🍇</li>
  <li>🍉</li>
  <li>🍎</li>
</ul>

定义列表属性名和属性值的列表可以一对多多对多

<h2>霸王别姬</h2>
<dl> 
  <dt>导演：</dt>
  <dd>陈凯歌</dd>
  <dt>主演：</dt>
  <dd>张国荣</dd>
  <dd>张丰毅</dd>
  <dd>巩俐</dd>
  <dt>上映日期：</dt>
  <dd>1993-01-01</dd>
</dl>

链接 target="_blank":在新窗口打开链接

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

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

插入多媒体可插入图片、音频和视频 alt：图片无法加载时显示出来的替代文本

<img
  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ubqnuhbnuho/movable_type.jpg"
  alt="Metal movable type"  
  width="400"
/>

<audio 
  src="/assets/music.ogg"
  controls
></audio>

<video
  src="/assets/video.mp4"
  controls
></video>

输入 placeholder: 用户没有输入时输入框中显示的内容 type="range": 滑动范围 textarea 输入多行文字

<input placeholder="请输入用户名">

<input type="range">

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

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

<textarea>Hey</textarea>

选择 checkbox:可多选 radio：单选按钮 select：下拉选择 datalist: 默认提供一些快捷的输入方式

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

引用
- 代码的引用整段代码要加pre标签

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

<pre><code>
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
</code></pre>

文字的引用 cite：引用节或书名 q:引用具体的文字内容

<p>我最喜欢的一本书是<cite>小王子</cite>。</p>

<p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p>

加粗和斜体

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

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

大段引用 blockquote用于大段引用

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