<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新增标签</title>
<style>
/*通过伪元素修改placeholder的颜色*/
input::-webkit-input-placeholder{
color: red;
}
</style>
</head>
<body>
<!--
progress : 用来显示一项任务的完成进度
max : 描述当前progress元素所表示的任务一共需要完成多少工作
value : 用来指定该进度条已完成的工作量
如果没有 value属性,则该进度条的进度为"不确定"
即，进度条不会显示任何进度，你无法估计当前的工作会在何时完成-->
<!-- 正常情况 -->
<progress max="10" value="7"></progress><br />
<!-- bug -->
<progress max="10"></progress><br /><br /><br />
<!-- 列表标签
datalist : 包含一组option元素,这些元素表示其表单控件的可选值
它的id必须和input中的list一致
details : 一个UI小部件，用户可以从中检索附加信息
open属性来控制附加信息的显示与隐藏
summary : 用作一个<details>元素的一个内容摘要(标题)-->
<input type="text" placeholder="选择一个你最喜欢的食物" list="food"/>
<datalist id="food">
<option value="汉堡包"></option>
<option value="螺蛳粉"></option>
<option value="麻辣烫"></option>
<option value="关东煮"></option>
<option value="重庆火锅"></option>
<option value="北京烤鸭"></option>
</datalist><br /><br /><br />
<details> <!-- open属性默认关闭 -->
<summary>我是标题</summary>
<p>我是字段1</p>
<p>我是字段2</p>
<p>我是字段3</p>
<p>我是字段4</p>
</details><br /><br /><br />
<!-- 注释标签
ruby
rt : 展示文字注释或字符注释-->
<span>
<ruby>魑魅妖魔
<rt>(chimeiyaomo)</rt>
</ruby>
<ruby>忐忐忑忑
<rt>(tantantete)</rt>
</ruby>
</span><br /><br /><br />
<!-- 标记标签 mark -->
<span>欢迎来到 <mark>我的页面</mark>，欢迎欢迎</span>
</body>
</html>