持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第17天，点击查看活动详情
今天有点重感冒，但是想想为了白嫖掘金还是冲一篇。
今天讲点HTML的一些知识吧
引言
什么是HTML
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 [1]
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便
上面来自百度百科，总之，HTML是我们前端三件套的第一个，也是构成我们浏览器网页内容的重要的设计语言。
我的笔记
下面是我学习HTML时的练习代码，我把HTML的很多属性都练习了一部分，可以参考我下面的注释和代码去尝试每个HTML标签及属性的效果。
<!DOCTYPE html>
<html>
<head>
<title>ByteDance - HTML - 1</title>
<meta charset="utf-8">
<meta name="xxx" content="xxxxxx">
</head>
<body>
<h2>电影排行榜</h2>
<!-- ol -> orderedlist -->
<ol>
<!-- li -> list -->
<li>阿凡达</li>
<li>泰坦尼克号</li>
<li>复仇者联盟3</li>
</ol>
<!-- ul -> unorderedlist -->
<ul>
<li>阿凡达</li>
<li>泰坦尼克号</li>
<li>复仇者联盟3</li>
</ul>
<!-- key -- value的形式 dl -> define nation list -->
<dl>
<!-- dt -> define national title -->
<dt>导演:</dt>
<!-- define national description -->
<dd>克里斯托弗·诺兰</dd>
<dt>主演:</dt>
<dd>小罗伯特·唐尼,克里斯·埃文斯,马克·鲁比尔</dd>
<dd>不知道了</dd>
</dl>
<!-- a -> anker 最重要:超链接 target="_blank":不是替换原窗口，新窗口打开。target:目标 -->
<a href="https://www.bytedance.com/">字节跳动官网</a>
<a href="https://www.bytedance.com/" target="_blank">字节跳动官网</a>
<!-- img:图片标签 alt:替代性的文本，当一些图片加载失败（用户开启省流量模式。。。或者因为某些原因没有加载）可以使用一些替代性的文本来代替。 -->
<img src="" alt="Metal movable type" width="">
<!-- audio : 音频 controls:默认的播放设置 -->
<audio src="" controls></audio>
<!-- video是视频，audio是音频 -->
<video src="" controls></video>
<!-- input:输入框 type:类型 placeholder:默认的占位符 range:滑动块 number:数字 -->
<input type="text" placeholder="请输入">
<!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/range （深入学习网址） -->
<!-- range 输入的默认步进值为 1，除非步进基数不是整数，否则仅允许输入整数；否则，默认值为 1。
例如，如果将 min 设置为-10 并将 value 设置为 1.5，则 1 的 step 将只允许正方向上的值为 1.5、2.5、3.5，...，
以及-0.5，-1.5，-2.5 等。 ..朝负面方向发展。 -->
<input type="range">
---------
<input type="range" min="-10" max="10">
-----------
<!-- 精度 -->
<!-- 最小和最大 -->
<input type="range" min="5" max="10" step="0.01">
<!-- 如果要接受任何值而不论扩展到小数点后多少位，都可以为step 属性指定 any 数值。 -->
<input type="range" min="0" max="3.14" step="any">
<!-- 带散列标记的范围控件
此范围控件使用的 list 属性指定<datalist> 的 ID，该 ID 定义了控件上的一系列带散列的标记。
其中有 11 个，因此在 0％和每个 10％标记处都有一个。 每个点均使用 <option> 元素表示，
其元素 value 设置为应绘制标记的范围值。 -->
<input type="range" list="tickmarks">
<datalist id="tickmarks">
<option value="0"></option>
<option value="10"></option>
<option value="20"></option>
<option value="30"></option>
<option value="40"></option>
<option value="50"></option>
<option value="60"></option>
<option value="70"></option>
<option value="80"></option>
<option value="90"></option>
<option value="100"></option>
</datalist>
<input type="number" min="1" max="99">
<!-- 同理 -->
<input type="date" min="2019-01-01" max="2019-12-31">
<!-- 多行输入 -->
<textarea></textarea>
<!-- 单选 -->
<p>
<label><input type="radio" name="xx"/>xx</label>
<label><input type="radio" name="xx"/>yy</label>
</p>
<!-- 下拉框 -->
<p>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</p>
<!-- 用户自由输入，便于用户输入为用户做一些提示 -->
<input list="countries"/>
<datalist id="countries">
<option value="Afghanistan"></option>
<option value="Albania"></option>
</datalist>
<!-- 文本类 引用 -> 三个标签 :blockquote:块级引用 -- 长引用 (引用别人的一段话) cite:来自那 -->
<blockquote cite="">
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
</blockquote>
<!-- cite -> 短引用 -->
<p>我最喜欢的书是:<cite>百年孤独</cite></p>
<!-- q:短引用 区别：具体的一个内容 cite:书名 -->
<q></q>
<!-- 引用 -> code:引用代码，文字展示 -->
<code>const</code>
<!-- const:关键字 -->
<!-- 强调:strong -> 强调这个非常重要,非常严重非常紧急 em -> 语气上强调 -->
<br/>
<strong>做个风险评估啊</strong>
<br/>
猫好<em>可爱</em>
<br/>
<!-- long标签 -> 表示内容所使用的语言 很多浏览器 如Chrome,会自动猜测用户是啥语言的，然后翻译，可能不准确，可以用long标签告诉他一下 -->
<!-- MDN W3C上的HTML5的规范 文档 了解每个标签和属性的含义 -->
</body>
</html>
简单的一些介绍
记忆
大家可能知道我们无序列表采用ul标签，有序列表我们采用ol标签，我们也会分别用dl,dt,dd等标签来做一些数据的展示，为了理解记忆标签，我们可以联系他的英语单词来记忆，比如ol是orderlist,ul是unorderlist，dl是define national list,a是anker等等。
设计规范
以前我写代码的时候也是喜欢万能的div，后来随着一点点的学习，乱用div会让同事或者其他人在接手协作你的代码的时候难以阅读理解，即便是作为个人开发者，一大堆div也是很容易弄迷糊。比如标题我们就用h1h2h3这种，段落我们可以尽量考虑p标签而不是换行符，我们在引用上也有很多标签如blockquote,q,cite,code等等。
其他的一些话
我们写的html要给不同的人，不同情况下的人去看。
比如其他开发者，修改者，维护者
比如浏览器
比如搜索引擎
比如有障碍人士.....
还要考虑一些特殊情况，html标签中有很多看似没用的属性，我们设置了和不设置主观上区别好像并不大，但是有一些情况下设置和不设置还是差别很大的。
比如用户网不好，或者开启省流量模式，浏览器这边一些图片可能无法正常显示，这时候我们就会用到alt，再比如打印预览，盲人使用的屏幕阅读器，有一些我们看不出来效果的标签就会在这时候发挥作用。
