HTMl和CSS的相关知识在之前就已经学习过了，最近又重温找了相关视频看了一遍，仍然有许多自以为知晓却还是陌生的地方，果然好记性不如烂笔头。此外，一直不知道HTMl全称为hyperText markup language，学习不能忘了在各种小细节地方。
1、有序无序列表
（1）有序列表
<ol type="a" reversed="reversed">
<li>苹果</li>
<li>西瓜</li>
<li>橘子</li>
</ol>type属性值有5种表示方法，可改变有序列表的序列号表示，分别有“1”、“a”、“A”、“i”、“I”，表示为阿拉伯数字1开始2、3、4...，x小写字母a或者大写字母A开头顺序下去，在超过26个数据之后的表示为aa、ab、ac...，而且只能字母表示只能写a/A，i/I表示为大小写的罗马数字。reversed="reversed"表示为逆序排列。
<ol type="1" start="9">
<li></li>
<li></li>
<li></li>
</ol>
<!--输出结果
i.
j.
k.
-->start="9"表示为从第9位开始排序，此排序对type属性值的表示没有影响，也就是说无论是阿拉伯数字、字母或罗马数字，都可以按此方法从第几位开始排序表示。
（2）无序列表
<ul type="disc">
<li></li>
<li></li>
<li></li>
</ul>无序列表的type属性值有3种，disc(discircle)实心圆点表示、square实心方块表示、circle空心圈表示。
2、图片标签
<img src="" alt="" title="">src指向图片所在位置路径，有3种情况表示：
（1）网上的URL，直接贴上URL即可，
（2）本地的绝对路径，绝对路径就是图片和HTML文档不在同一文件夹下，所处地址不同，只要写全图片的全部路径即可，
（3）本地的相对路径，相对路径就是HTML文档和图片在同一个文件夹中，引入图片地址只需要写图片名即可。
alt为图片占位符，当图片在页面中无法显示时会作为替补一样显示alt中输入的文字，作为一种图片的解释。
title为图片提示符，当鼠标指向图片时候会出现title中输入的对图片的提示文字。
3、a标签
之前学习a标签只知道它是作为超链接的作用，a标签中可以嵌套任何标签作为跳转，href (hyperText reference 超文本引用) 属性指向目标地址。
除了（1）超链接作用还有其他很重要的用法，
（2）锚点
a标签来源anchor单词，意思为锚。它代表记录一个位置，通过a标签的锚点作用回到那个位置，很常见应用就是“回到顶部”。
<div id="demo1">demo1</div>
<div id="demo2">demo2</div>
<a href="#demo1">find demo1</a>
<a href="#demo2">find demo2</a>
<!-- #不可少 -->（3）拨打电话
<a href="tel:18036379767">打电话给这个随便写的电话</a>在移动端会自动调用拨打电话的接口，常见应用有外卖商家店铺可以点击联系商家按钮，直接拨打商家电话。
（4）发送邮件
<a href="mailto:[email protected]">发邮件给这个随便写的邮箱</a>4、表单标签
<form method="get" action="">
<p>用户姓名
<input type="text" name="username">
</p>
<p>用户密码
<input type="password" name="password">
</p>
<input type="submit">
</form>表单数据为了前后端数据的交互，method属性值有两种方式get/post，action属性规定当提交表单时，向何处发送表单数据。前后端数据交换如图人与人对话一样，人人之间的对话需要主题+内容，前端与后端数据交互也需要数据名+数据值，提交之后，查看URL发生的变化，如果尾部多了数据名数据值，则表示提交成功。
标签本身没有什么好说的，但是其中有一点在看视频时候感觉很重要，就是文本框和密码框为了实现分行，可以使用p标签嵌套，也可以使用<br>换行。但是更好的是用p标签，就是为了有更好的语义化，方便后人维护。
5、选择框
<h3>CHOOSE YOUR SEX</h3>
male<input type="radio" name="sex" value="male">
female<input type="radio" name="sex" value="female">
同样，这些表单组件没什么可说的，type=“radio”是单选框，type="checkbox"是复选框，但是关键的是最终的效果，
最终效果如上图，不好的地方在于缺少用户体验，这种单选框应该是必选项目，为培养用户懒习惯，减少操作，需要增加默认选中的操作。
male<input type="radio" name="sex" value="male" checked="checked">6、下拉框
<select name="喜好">
<option>跑步</option>
<option>跳绳</option>
</select>写表单就是为了提交数据，提交数据就不能少了数据名和数据值。select和option是父子关系，所以可以在select中定义其数据名，option间数据就是数据值。