写在前面
这一篇内容是上一篇内容的延续，本篇内容依旧是根据freeCodeCamp社区的相关教程进行的总结，这一篇和上一篇属于基本的HTML知识，笔者也是第一次学习，有什么错误还望指正。
正文开始
本期接触到的第一个内容是创建一个带点的列表，使用的是 ul 标签 在 ul 标签里面嵌套 li 标签就可以实现。
<ul>
<li>这是第一个内容
<li>这是第二个内容
</ul>
第二个还是列表，只不过这次的列表前面带上了序号。将 ul 标签替换成 ol 标签转变。
<ol>
<li>这是第一个内容
<li>这是第二个内容
</ol>
注意 li 标签是不需要关闭的！！
下一个要出场的是一个挺复杂的标签 input 标签，首先这个标签他很"自闭"，内容都在标签的里面，下面上它的第一种形态：text形态。用法如下代码。
<input type="text">
令type（类型）属性等于text就可以得到一个可以输入东西的小框框。
要是觉得显得空空的，还可以赋予它的placeholder属性一个值，这样就可以让文本框再输入前现实点东西。
<input type="text" placeholder="有点东西">
这就有点东西了。
input 标签主要用在 form 表单里面，也就是将 input 标签放在 form 标签之中，在 form 标签里面存在一个 action 属性，用来将获取的表单属性提交给 action所指定的目标里面。
<form action="www.baidu.com">
<input type="text">
</form>
这个小框框和上面那个小框框没啥两样，但是现在通过一些手段就可以将输入的信息提交给 action 所指向的目标。
下面就来介绍怎么将填写的内容提交，使用的是一种 button 标签，要注意的是需要关闭的。
<form action="www.baidu.com">
<input type="text">
<button type="submit">
这是一个提交按钮
</button>
</form>
到目前为止，用户似乎不用输入内容也可以提交，那提交的内容就变成了空内容，将变得毫无意义，所以我们需要做出一些限制，只有输入了数据之后才可以进行提交。我们讲给 input 标签添加一个 required 的属性，这样就能够防止空内容被提交。
<form action="#">
<input type="text" required>
<button type="submit">
这是一个提交按钮
</button>
</form>
阻止空内容被提交我们就实现。
接下来点比较有意思的一个标签 label 标签，这是一个配合 input 标签使用标签，实现的效果就是提供一个选择，通过点击选项以及选项前面的点都可以进行选择。
<label>
<input type="radio" name="fname">你可以选择这个
<input type="radio" name="fname">你也可以选择这个
</lable>
令 type 属性值等于 radio ，获得一个单选框，两个选项的 name 值相同，name 相同的单选框为一组，只能选择其一。上面这种实现方式叫做隐式实现，下面来介绍显示实现方式。
在 label 中有一个 for 属性用来指定将哪一个点和别的东西绑定一起，令 for 属性等于 input 标签的 id 值就可以实现，而且还挺有意思。
<input type="radio" name="sex" id="man">
<label for="man">点这个也可以选男</label>
<input type="radio" name="sex" id="woman">
<label for="woman">点这个也可以选女</label>
效果是一样的，但是各有优点，到时候可以酌情选择，下面让我们来玩点花的。现在让我们开始：0
<input type="radio" name="sex" id="man">男
<input type="radio" name="sex" id="woman">女
<br>
<label for="man">点这个也可以选中男</label>
<br>
<label for="woman">当然点这个就可以选女</label>
<br>
<label for="man">点这个也可以选男</label>
这样看起来没有什么效果，但是在点相应的字段的时候是可以选中的。
有单选就有多选，下面我们花一定的篇幅来介绍多选，多选和单选几乎没啥区别，将 input 标签里面的 type 属性改成 checkbox就可以实现。
<input type="checkbox" name="sex">男
<br>
<input type="checkbox" name="sex">女
<br>
<input type="checkbox" name="sex">这是个凑数的
多选我们就这样简单的实现了。复选框也可以使用上面的 label 标签将文字与选项绑定在一起，实现方法和上面的单选类似，加个id就可以实现。
现在我们只是创建了一堆选项，也只创建了一堆选项，选项是嵌套在表单里面的，表单是用来收集数据的，要想获取选择的属性，就要给 input 标签（当且仅当 type 属性等于 radio 或 checkbox时）加上一个 value 属性，当用户选择这个选项时，将会提交 value 属性的内容。
<from action="#">
<input type="radio" name="dan" value="dan1">单选第一个
<br>
<input type="radio" name="dan" value="dan2">单选第二个
<br>
<input type="checkbox" name="duo" value="duo1">多选第一个
<br>
<input type="checkbox" name="duo" value="duo2">多选第二个
<br>
<input type="checkbox" name="duo" value="duo3">多选第三个
<br>
<input type="submit" value="提交">
</from>
这样在点击提交按钮之后就可以将 value 里的内容提价给 action 所指向的目标地址。
最初始的时候选项是不被选中的，把它设置成默认被选中也不是不行。
<input type="checkbox" name="sex" checked>男
<input type="checkbox" name="sex" checked="checked">女
<input type="checkbox" name="sex" checked="true">中
现在就全部选择上了，我可没有偷偷电商，这正好就对应三种实现方式，给 input 标签添加上 checked 属性，默认不赋值，赋值为 ture 或者赋值为 checked 都可以实现。
现在对于 input 标签就暂时告一段落了，下面介绍一个分组标签 div，它就像一个收纳盒一样，可以将一些差不多的东西都塞进去，值得注意的是它是需要关闭的。
<div>
<p>这里有三件事</p>
<ul>
<li>学习
<li>学习
<li>学习
</ul>
</div>
虽然看起来是没什么用的，但分组的效果是实现了。
最后介绍一下HTML的布局这一不算就算是完美结束了。
<!DOCTYPE html>
<html>
<head>
<meta />
</head>
<body>
<div>
</div>
</body>
</html>
主要内容写在 body 标签里面，meta 标签用来让搜索引擎更好地找到你的网站。
第一部分HTML基础的相关内容到这里就结束了，后续的内容不定期更新，如果觉得有用的话点个赞也是不错的。
8568
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
