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

前端与HTML

前端技术栈

前端基础

HTML: 全称为Hyper Text Markup Language，即超文本标记语言，除文本之外可以包含图片，链接，音乐，甚至程序等非文字元素。

CSS: 全称为Cascading Style Sheets，即层叠样式表。是一种可以表现html样式的语言。不止能静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

JavaScript: 是一种脚本编程语言,它可以在网页上实现复杂的功能，包括操作页面中的 DOM 元素、CSS 样式，能实现交互式的地图，2D/3D 动画，滚动播放的视频等等。

HTML学习

html语法

1. 标签和属性不区分大小写，但推荐使用小写。

2. 空标签可以不闭合，如input，meta。

3. 属性值推荐使用双引号包裹。

html常用标签

`h1-h6`

<h1>字体排印学</h1>
<h2>历史</h2>
<p>活字的雏形或可追溯至公元前两千年前后美
索不达米亚文明的乌鲁克和拉尔萨，砖块上面不
均匀的印花被视作有可能是活字思想雏形。</p>
<h3>印刷体源流</h3>
<p>中国在唐代就已经出现雕版印刷术，公元868
年的《金刚经》是现存最古老的印刷品之一，使用
的技术即是木雕版印刷。</p>
<h2>应用</h2>
<p>...</p>

列表

有序列表ol

<h2>世界电影票房排行榜</h2>
<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>复仇者联盟</li>
</ol>

无序列表ul

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

定义列表dl

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

链接标签`<a/>`

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

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

href 属性表示链接地址

target 属性表示跳转方式

媒体标签 `<video/>` `<audio/>` `<img/>`

//src属性代表资源地址
//alt表示鼠标移入时显示的文字
<img
  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ubqnuhbnuho/movable_type.jpg"
  alt="Metal movable type"
  width="400"
/>
//controls表示是否可控
<audio 
  src="/assets/music.ogg"
  controls
></audio>

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

表单相关标签

基本输入

//type表示类型，可以通过min，max属性限制长度
<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>

其他类型

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

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

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

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

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

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

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

内容划分标签

利用好header,nav,aside等属性，可以对页面进行划分。提高代码的可读性和可维护性。

[ 前端与 HTML | 青训营笔记]