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

常用的标签

组合方式

<h2>世界电影票房排行榜</h2>
<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>

显示效果：

一般我们在书写表格的时候，虽然dl，dt，dd标签没有什么效果，但是方便我们直接从代码上看出标签里面的内容是干什么的，属于什么位置上的文字，像dl代表的是整个表格，dt为这个小表格的标题，dd为表格的具体内容

链接标签

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

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

显示效果：

第一个不添加target属性，即默认属性值是self，表示不新开一个页面，只是在原先已有的页面里进行跳转；而属性值为blank的时候，即表示点击链接后在新的一个标签页里面展示

音视频标签

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

显示效果：

输入类标签

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

<input type="range">

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

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

<textarea>Hey</textarea>

显示效果：

在第二个input输入框里面，type类型为range的时候，会显示一个可以滑动的进度条，这个是html的做法，后面我们在使用css的时候，会用css专门写个进度条来更加精细的表示进度，可以在上面显示百分比，进度条的形状，颜色之类的

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

显示效果：