HTML
在我的csdn（https://blog.csdn.net/qq_59609098?spm=1000.2115.3001.5343）中我主要记录了java方面的学习知识（也存在前端知识），现在换一个平台，主要记录前端知识（后端都有相当全栈的想法，手动滑稽🤭），那么从HTML开始
在说明前端知识之前，我们首先需要了解浏览器，实际上浏览器是有很多的，一般我们以谷歌浏览器为主
这是因为谷歌浏览器比其他浏览器更好，因为浏览器之间有统一的标准，所以html，css，js在各个浏览器上基本可以出现相同的效果，而谷歌更加美观，且效率高，所以谷歌比较好，而读取这些语言来显示的，就是浏览器的内核，因为标准相同，所以各个浏览器内核在读取（只是读取）代码的操作中，在一定程度上相似
HTML：
一般我们将他称为超文本标记语言（Hyper Text Mark-up Language），可以理解为他是一个特殊的文本，并且利用标签（标记）来操作，所以称为超文本标记语言
既然是文本，那么我们可以选择在电脑上将一个文件创建，并添加如下：
<strong>加粗</strong>
加粗
实际上在电脑中，每个文件都有后缀，且电脑默认以某个程序打开该后缀（一般都是设置的），或者说他只能以什么形式来显示，而浏览器必须只能操作html，或者htm来进行显示，也就是说，就算你用浏览器（不操作默认）打开txt文件，他也不会进行读取，而已以另外一种显示出来，如pre标签（这个先了解），所以我们要进行真的显示（读取），首先改掉后缀名，变成html，或者htm即可，现在双击查看页面吧🤭
浏览器大多有补偿操作，比如说，若有多个html，一般会进行整合，而外面的也会整合，具体自己可以测试，这里了解即可，因为补偿操作有很多种，但是为了不进行补偿，我们最好是规范的写，这样能提高显示的速度（补偿需要时间的），保证规范，不怕错（(●ˇ∀ˇ●)）
当前，由于文本（记事本）写这些东西太麻烦，所以这里我们使用一个开发工具：vscode
下载地址：
提取码：alsk
我们选择一个安装（最好选择比较旧的版本）
至于中文插件，自己解决即可，看如图：
现在随便创建文件，输入!，然后回车（可能有其他方式，但没有必要记住）即可，注意：在前端中，我们尽量使用英文，否则可能会出现错误的，因为他基本只能识别英文的符号
从现在开始，我们来真正的学习，注意：这里并不适合真的小白来学习，最好有一定的了解或者学习过
因为这里有些（包括其他的相关前端博客，只是有些，并不是全部，即是少数的）只看案例（像一些占用一行或者也可以说自动换行（包括前后都有，要不然怎么说占用一行呢）的，不会特别说明，因为并没有非常重要，如p标签，有些标签对应的默认显示，可能会忽略这些占用一行，或者自动换行的属性操作，具体可以百度），即自己测试的结果才能够更好的记住
<h1>1</h1>
<h2>1</h2>
<h3>1</h3>
<h4>1</h4>
<h5>1</h5>
<h6>1</h6>
<h0>1</h0>
<h7>1</h7>
1
<!--会独占一行，下面的p标签也是（当然独占的一行的高度可能不同的，比如div和p，实际上是边距问题，反正最终也是js的集合，或者基础代码的集合（js的下层就是基础代码）），当然，普通的字如果超过了窗口，一般会自动换行的-->
<p>哈哈哈哈哈哈ssssssssssssssssssssssssssssss哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>
1
<!--上面可以加上<br>标签，虽然标签有自己的属性，但并不妨碍其他标签对内容的再次的起作用-->
<!--这里有个功能，可以选择在vscode中的查看按钮中，点击自动换行，并且，一般只有连续的汉字会导致浏览器换行，这里自己测试-->
<!--最后注意：p标签之间没有嵌套，可以自己进行操作，这是因为他的特殊补全-->
在这里我们要注意：一般只要不是自定义的标签（随便写，且没有默认识别的，比如< asdas>< /asdas>，因为Typora的原因，所以这里是加上空格的），通常他们每个标签都有默认的属性，这也是为什么p标签之间，有较大距离的原因，且独占一行的原因，实际上可以认为他们最终都是js操作（或者同一个器），只是css，html是整体js（或者同一个器）而已（认为的），而js进一步操作更基本的代码（如二进制，或者其他的基础代码），然后浏览器读取渲染，当然css或者html也可以认为是直接到二进制或者其他的基础代码（与js的不同解释的器，或者他们都是不同的解释的器，偏向于这种说明），反正他们三个最终的基础代码是一样的（要不然怎么都会在同一个窗口或者说浏览器，来影响对应的显示呢）
那么实际上任何标签都是从自定义上加上一些属性而已（可以认为是js的操作属性（认为的））
<b>1</b> <!--加粗-->
<u>1</u> <!--下划线-->
<i>1</i> <!--斜线，倾斜-->
<s>1</s> <!--删除线-->
<br><!--后面四种是语义的作用，简单来说，比较好观察，但他们的作用都是一样的，而正是因为好观察，所以一般可以快速的定位到，看语义就知道了（虽然大多并不完全对），所以通常用在比较重要的地方，快速定位-->
<strong>1</strong>
<ins>1</ins>
<em>1</em>
<del>1</del>
<!--在以后操作中，我们前端之所以可以获取后端数据，实际上也是数据包的原因（http，或者https），既然浏览器可以是一个文件操作，那么同样的后端操作文件，他们自然都可以网络通信的
那么既然是文件的显示，所以下面的图片自然是读取文件信息并显示出现的，所以无论什么协议，前端都是得到文件信息并显示的
-->
<img src="/3.jpg"> <!--一般没有在项目工程下，/默认为c盘开始，3.jpg当前相对路径，否则/或者3.jpg都从项目路径开始或者端口开始（一般是端口，对于项目来说，一般只是代表里面的操作，如转发，那么/就是项目开始，否则大多数从端口开始，所以只有在项目中存在//没有直接到http://），而//代表直接从http://开始（前提是项目路径，否则一般是一个特殊的路径，这点在a标签中可以进行测试），注意：只要是项目基本都会这样（可能是某些底层操作导致的），包括前后端都是，极少数操作不是（如转发，这里参照上面的端口说明）
而直接的全路径（比如http（也存在https），file，等等开头的，一般单纯的从磁盘开始的或者根开始的），会默认加上file:///C:/或者加上file:C:/，file:也算file:/，C可以是c，这些自己进行测试，才是最好的说明
-->
<img src="./3.jpg">
<!--alt在一定程度上，当img不存在，操作默认的样式图片下，出现的一个值，若是alt=""，那么默认的样式图片不会显示，且也没有值-->
<img src="/3.jpg" alt="哈哈">
<img src="./3.jpg" alt="哈哈">
<img src="3.jpg" alt="哈哈"><!--相当于./3.jpg-->
<!--无论是否显示，都在鼠标悬停在那里时（整个显示的地方）显示title的数据-->
<img src="/3.jpg" alt="哈哈" title="hh">
<img src="./3.jpg" alt="哈哈" title="hh">
<!--单位默认为px，一般但凡是数字的，默认都是px，我们最好写上，因为不会默认添加px（判断），特别是css-->
<img src="./3.jpg" alt="哈哈" title="hh" width="100"> <!--等比例缩放，也就是说，如果原来是宽10，高5，那么你这里设置了100，那么高就是50，这样使得图片不会出现拉长或者拉宽的情况，这是图片的一个效果，大多数只说明图片，如果以后有类似的，那么注意就行了-->
<br>
<!--严格按照设置的来显示，容易出现拉长或者拉宽的情况-->
<img src="./3.jpg" alt="哈哈" title="hh" width="100" height="100">
<!--可以这样的 "./.././../" -->
<!--那么有个问题，假设宽是3，高是1，我单纯的设置宽是100，那么高是33还是34呢，为什么没有33.3333呢，因为像素最低是1的，所以这里要么是33，要么是34，一般，显示器会默认靠近移动，也就是说，这里通常是33，若是33.6，那么是34，这里了解即可，这也是大多数（是大多数）浏览器在某些情况下（如表格），会出现某些缝隙的原因，虽然可以通过某些技术使得默认补全，具体可以百度-->
现在有个问题，如果对应的图片文件是txt后缀的，那么会显示吗，答：会显示，上面说明了"既然是文件的显示，所以下面的图片自然是读取文件信息并显示出现的"，而读取的信息如果是图片的信息，自然不会看你是否后缀是图片的后缀，而只是看信息而已（我的信息关后缀什么事情呢），同样的，如果你是文件夹，自然不能显示了（默认显示），这里你可以选择将3.jpg修改成3.txt来进行测试（自己弄一个图片的），或者创建文件夹来测试
<!--同样的，既然都是操作内容，那么视频和音频也是一样的，协议就是来获取二进制内容的
-->
<!--controls：显示播放的组件，autoplay自动播放（视频存在才会触发），自动播放在一些浏览器中不支持，如谷歌，ie一般支持
当然，自动播放与显示播放组件没有必然联系，就算没有显示的组件，他照样会操作自动播放
那么说，自动播放是好还是坏呢，实际上根据用户体验，最好是不要自动播放（我都还没有动，你就播放了（有声音，声音限制自动播放，如果没有声音，那么一般是可行的，注意只是一般，说明有些无论什么情况都禁止的，具体可以百度），总得要我自己控制吧，要是在公共场合那么好社死啊┭┮﹏┭┮）
所以在像一些好的浏览器一般不会支持自动播放的
loop：循环播放，播放条结束后，再次自动的重新播放
-->
<audio src="1.wav" controls autoplay loop></audio>
<video src="2.MP4" controls autoplay loop muted></video> <!--一般来说，视频没有设置组件出现，通常就会看成视频首页图片，即图片-->
<!--视频一般内置声音，这也是为什么音频也可以有mp3等等内容的原因，同样的，既然内置声音，所以视频也可以操作音频（没有默认图片显示，因为音频内容没有图片显示）
即audio和video都可以操作或者提取（音频操作）对方的内容，只是video有其他操作（muted，和默认视频首页图片的显示，前提是内容有），可以选择将1.wav和2.MP4进行互换就知道了，也就是说video相当于是audio的进一步补充的标签
其中img只能识别图片，不能包含存在音频和视频，否则默认显示（默认没图标志，没图标志在我的csdn博客的76章博客有说明）
-->
<!--注意：视频的自动播放与音频基本是一样的限制浏览器，但是视频通常有个属性可以进行自动播放，但是去除了声音，这是与音频是不同的，即加上muted（只有video会操作识别，音频标签不识别），这样可以自动在如谷歌浏览器自动播放了，但是没有声音，也就是说只有声音是限制自动播放的，没有声音则不会限制，即autoplay没有声音就会起作用，当然，某些浏览器是无论是否有声音都会起作用，比如ie浏览器-->
随着时间的推移，可能这些标签会操作固定的后缀（现在一般还没有），或者说，对应的内容（一般都考虑这个，比如音频只考虑：wav，mp3，ogg等等音频的内容，可能还有其他的内容），一般只是内容，如果内容不对，那么图片或者音频，包括视频都会给出默认显示（如图片的没图标志），自己可以测试，实际上虽然是内容，又何尝不是特定的二进制呢，换句话说，这些标签只能操作特定的二进制，或者只识别某些二进制数据
由于我们明面上只能操作js层面的，所以代码基本固定，就如写java中，int就是最小的基础代码，虽然可以选择操作字节码，但明面上只有int是基本固定的
注意了：他们的src是可以操作远程的，不只是本地，只是协议不同而已
<a href="https://www.baidu.com">百度</a> <!--与图片一样的src的路径操作，也存在对应的/和//-->
<a href="1">百度</a>
<a href="#">百度</a> <!--#在路径中，代表定位，一般聚焦到id为#后面的地方，而什么都没有，那么什么都不操作了，一般我们建议使用#，因为""是刷新页面（相当于""#），而#是不会刷新的，即什么都不动，不会刷新，操作空定位，所以大多数空链接我们都会使用#，在没有定位时，#通常会自动到顶部，了解即可-->
<a href="">百度</a> <!--不进行改变当前url，一般没有http或者https，只会改变所在/路径，自己可以选择测试-->
<!--注意：他由于是操作浏览器url的，而不是在当前路径的页面进行操作，所以与普通的img，audio，video不同，他会将当前浏览器url改变，从而显示出对应的内容，占用整个页面，若是普通后缀的文件，即没有识别的后缀，那么一般会进行下载，当然，a标签的下载，通常只能操作同源的，否则一般也是跳转-->
为了进行测试#，可以看如下：
<a href="#c">a</a>
<div id="a">a</div>
<br><br><br><br><br> <br><br><br><br><br> <br><br><br><br><br> <br><br><br><br><br> <br><br><br><br><br>
<div id="b">b</div>
<div id="c">c</div>
<div id="d">d</div>
<!--target="_blank"，代表新开一个窗口，而不是当前窗口作为载体
target：目标网页的打开方式，_self就是默认值，以当前窗口作为载体（没写就是他）
-->
<a href="http://www.baidu.com" target="_blank">a</a>
<a href="http://baidu.com">a</a><!--一般情况下，默认加上www.，但可能会看成不同网站，这里要考虑非常多的细节
可以参照这个博客：https://www.zhihu.com/question/20414602/answer/2629769892
只要是a标签的内容，无论是否空白，点击后都会跳转
-->
1
<ul><!--无序：wu（ul）-->
<!--其他标签一般不占用顺序，且ul或者ol的属性基本只会操作li，所以aaa这个文本前面没有对应的信息，如无序的对应显示或者ol的数字显示等等-->
<h1>aaa</h1>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<ol>
<h1>aaa</h1>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
<!--下面是自定义列表-->
1
<dl><!--代表整体-->
<h1>s</h1>
a
<dt> <!--一般代表标题，与dl都可以看成无缩进的ul或者ol-->
<h1>s</h1>
<dd>b</dd>
</dt>
<!--一般来说，dt和dd都会操作同一级，比如：
<dt>JavaScript</dt>
<dd>一种动态编程语言，可用于创建交互式网页和应用程序</dd>
-->
</dl>
<!--一般来说单纯的li默认有无序的显示（点，li默认是1）（但是没有ul或者ol的缩进），单纯的dd（可以只单纯的写，因为dl和dt基本没有什么作用，可能有）只是存在ul或者ol的缩进（但是一般方式不同）-->
<!--li，dd独占一行
<ul></ul>
<li></li>
<ol></ol>
<dl></dl>
<dd></dd>
<dt></dt>
除了<li></li>（display: list-item;），其他都是display: block;
-->
但是我们最好不要在ul或者ol或者自定义的dl和dt里面加上其他标签，这样是不符合规范的，且可能与ul或者ol或者自定义的dl和dt里面某些自带属性设置有冲突，所以尽量加在li标签或者dd标签（其中dt一般也可以加）里面
实际上除了li和dd，其他的基本都是一种规范而已，虽然ul或者ol有缩进功能（大多数缩进功能都是样式造成的，所以并不需要记住他们的样式显示）
<!--border表格边框大小（他写在表格标签里面，那么作用与表格的边框，自然不包括他内部的），没有高度和宽度的话，默认是字的高度和宽度-->
<table border="2" width="200" height="200">
<caption>和黑</caption> <!--标题-->
<th><!--自带加粗居中，并且默认在最前面（内部）加上一个空内容，并且浏览器补全，加上tr，补全的话，th一般操作不了其属性了，可能是补全操作的原因，或者说，不同的补全有默认的设置的-->
<td>1</td>
<td>1</td>
</th>
<tr>
<th>2</th> <!--th主要操作td的，不要当成tr哦，即是td的进一步的补充标签-->
<td>2</td>
</tr>
<th>
<td>1</td>
<td>1</td>
</th>
<!--注意：其实tr标签和table标签中间还有一个标签，即tbody标签（代表表格主体），他是补全的，可以选择到浏览器的元素查看-->
</table>
<!--实际上，表格是可以利用div来完成的，因为div基本是最小的补充标签了（这也是为什么大多数标签的css基本可以操作相同的属性，或者都可以操作相同的css，因为他们基本都只是从div中进行补充的，而有些有默认的设置，如table标签，只是没有显示而已（js再操作的基础代码）），虽然最终可以由js来完成，但是他是最小的补充，自然可以通过补充来完成表格的三个标签的作用，虽然比较困难，可能需要css（一般不包括js）的操作进一步补充-->
一般情况下，我们尽量不在html中进行样式的设置，html虽然可以给出基础显示，但是样式我们最好还是在css中进行操作，各做各的操作，明确分工，因为在css中比较好维护，而不是全部放在一起
标签一般都有补全，但是补全需要浏览器更多的操作性能（所以我们尽量不要让浏览器进行补全），并且补全可能导致样式不操作，或者位置不好，所以我们最好规范（一般css的style也存在，如放在< /head>和< body>中间，补全到head里面去，且靠后，除非其他的补全也在后面）
表还有结构，一般默认只会补全tbody（所以我们尽量写上tbody标签，最好都进行包括，补全就是如此，而不操作浏览器的补全），我们可以手动操作：
<table border="2" width="200" height="200">
<caption>和黑</caption>
<thead>
<tr>
<th>1</th>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>1</td>
<td>1</td>
</tr>
</tfoot>
</table>
<!--thead和tfoot代表一些独特的样式，自己可以看显示，并且他们不分先后，但是只会识别一次，另外的会当成普通的tbody的属性来操作了，虽然标签名称没有变，但是操作变了，多个tbody实际上是一起的，虽然看起来是分开，因为相当于一个tbody包括，只是我们可以给对应的tbody进一步改变样式，即可以局部操作-->
<!--三个结构里面都可以设置多个tr，只是大多数我们只会将thead和tfoot设置一个tr-->
我们也最好不要分开写tbody，虽然局部操作比较好，但是容易补全很多次tbody（因为前后界限），除非都写上（比较麻烦），并且局部样式可以通过tr来操作，所以我们尽量操作一个大的tbody，其中浏览器可不只有补全，还有修正，可以选择在a标签里面加上tr标签就知道了，然后查看元素
<table border="2" width="200" height="200">
<tr>
<!--保留这个，合并下一行（当前td的对应下一行），并且我们可以认为多出（或者说添加）一个td（对应），且占用（对应）下一行的td-->
<td rowspan="2">1</td>
<td>1</td>
</tr>
<tr>
<td colspan="2">22</td> <!--这个colspan="2"不起作用，不起作用的主要原因是，一个tr只能被合并操作添加一个td，否则一般不会操作合并或者说不超过（如设置20，可能不变，或者达到最大）
也就是说，如果这里起作用了，那么这里就是四个td，而下面的tr只有2个（整个表看最多td的情况），那么不能起作用，在先后顺序操作之后，即rowspan操作后，这里再次的操作的判断
-->
<td>2</td>
</tr>
<tr>
<td>22</td>
<td>2</td>
</tr>
</table>
<table border="2" width="200" height="200">
<tr>
<td rowspan="2">1</td>
<td>1</td>
</tr>
<tr>
<td colspan="2">22</td>
<td>2</td>
</tr>
<tr>
<td>22</td>
<td>2</td>
<td>2</td> <!--加上一个，满足一个tr只能被合并操作添加一个td，那么colspan="2"起作用了-->
</tr>
</table>
<!--要记得，设置合并为1，相当于没有设置-->
<!--这里给出table的另外的属性：
cellspacing：单元格间距（通常设置0表示单线表格，即单元格之间没有间距了，即边框相靠），实际上可以看成td与td之间的以及tr和tr之间的margin的四边距离
还有cellpadding单元格的内边距
-->
最后要注意：合并操作只能操作同一个结构里面的，即若你是thead，那么你只能操作当前thead的结构的tr，其他的thead或者tbody或者tfoot都不能操作，其他结构也是如此
<input type="text" /><br />
22
<input type="password" /><br />
<!--一般输入不显示-->
<input type="radio" /><br /><!--点击后就不能取消了-->
<input type="radio" /><br />
<input type="check" /><br />
<!--一般type属性对应不存在，默认为text，判断是否存在，而决定的-->
<input type="checkbox" /><br /><!--点击后能取消-->
<input type="checkbox" /><br />
<input type="file" /><br />
<!--默认value为选择文件-->
<input type="submit" /><br />
<!--默认value为提交-->
<input type="reset" /><br />
<!--默认value为重置，提交和重置一般需要form标签才能操作-->
<input
type="button"
/><br /><!--可以认为是最基本的标签，即其他的标签都能是他演化来的-->
<input type="text" placeholder="嘿嘿" /><br />
<!--placeholder一般只操作文本，比如text和password等等-->
<input type="password" placeholder="嘿嘿1" /><br />
<input type="radio" checked /><br />
<!--checked默认选中-->
<input type="radio" checked="false" /><br />
<!--一般来说只要写上了checked，默认就选中了，但在js中通常不会（这里一般也包括checkbox），也就是说他被识别时，会进一步操作-->
<input type="radio" name="1" /><br />
<input type="radio" name="2" /><br />
<input
type="radio"
name="2"
/><br /><!--若有相同的name，那么只能选中一个，另外一个会自动取消，一般只针对radio的属性值，而其他的基本不会，如checkbox属性值-->
<input type="radio" name="3" checked />a<br />
<input type="radio" name="3" checked />b<br />
<!--当相同name，并且都操作了checked，那么后面的先进行操作，因为识别代码也是顺序的（从上到下，除了html，自然也包括css，js），可以认为后面的后点击，那么自然是他了-->
<input type="checkbox" checked /><br />
<!--一般情况下，选中框框都有checked，其他的没有选择的，基本都没有-->
<select>
<option>A型</option>
<option disabled>B型</option>
<!--disabled代表不能选择，如果在select中，那么整体不能选择了，disabled也存在其他的基本所有的input和button中的，自己可以测试，与checked一样的默认为true，js可改变-->
<option disabled selected>C型</option>
<!--只是不能选择，但是一开始可以，并且select没有设置，所以看起来样式没有变-->
<option>O型</option>
</select>
<select>
<option></option>
<option>A型</option>
<option>B型</option>
<option>C型</option>
<option>O型</option>
</select>
<select>
<option>A型</option>
<option>B型</option>
<option>C型</option>
<option selected="selected">O型</option>
</select>
<select>
<option selected>A型</option>
<!--selected与checked基本一样的作用，在js中也基本是一样的-->
<option selected>B型</option>
<option>C型</option>
<option>O型</option>
</select>
<select>
<option>A型</option>
<option>B型</option>
<option>C型</option>
<option>O型</option>
</select>
<br />
<input
type="file"
/><br /><!--只能选择单个文件，当你准备选择多个文件时，会自动变成你选择的，而不是一路添加在后面，其中"shift+鼠标左键"可以选择多个文件-->
<input type="file" multiple /><br />
<!--multiple可以选择多个文件，而也有webkitdirectory，可以选择文件夹，都写上，那么可以选择文件夹和文件（并且可以多选，因为multiple）-->
<!--一般像可以直接写的属性，在html中，默认只要写上就会生效，如selected与checked，其实他们基本都有属性值，在js中可以进行操作，他们html读取时默认是true的，因为最终会兜底设置-->
<button type="submit" disabled></button>
<button type="submit"></button>
<button type="reset" value="2"></button>
<!--这里value不会操作进行显示，就看成一个属性但不操作显示内容，一般只有文本如text一般会显示内容，其他的一般都不会，也包括input中的如单选操作等等，不只是button（一般代表button所有，因为input有text，而button没有）哦-->
<button type="button">1</button><!--特殊的input，value不算的-->
<!--其他两个与普通的input作用基本相同
但是这个button标签一般会默认为加上submit，是最后操作的，所以如果type不是button或者不能识别的（如reset）一般都会进行设置submit，因为有判断的
所以如果加上了type的button那么就还是普通的按钮-->
<!--由于type为button是基础标签，所以他可以通过js来进行任何扩展，而不会受到其他影响，因为其他标签或多或少都有其他操作，需要进行清除（具体可以百度）-->
<!--注意只有当下拉框出来时才会真正的正确，因为下拉框也占两列（汉字一般占两列，数字和字母占一列）（一般是1.5，请根据实际情况出发，0.5通常只是一个空格），所以会出现实际列数为设置的列数加上2
若cols设置的不是大于等于1的数，就会默认为20（在操作了下拉框的情况下，他可没有0.5，且下拉框直接占用2，css设置的一般也是这样），而rows默认为2
所以由于上述的限制，更好的办法是使用 CSS 的height 和 width 属性-->
<!--cols规定多少列（一般是添加，默认初始1.5），rows规定多少行
注意：右下角可以进行宽高的增大和增小，自己可以进行测试
一般10px代表1.5列，5px代表1列，再少就强制给覆盖了（有最小的整个框，包括覆盖下拉框）
-->
<textarea cols="100" rows="20"><!--这里可以选择去掉，或者不去掉，即直接的这里不存在，那么下面的是第一行，否则不是-->
s <!--这个注释也算数据了哦，空格也算-->
</textarea>
<input type="radio" name="sex" />男 <input type="radio" name="sex" />女
<!--点击label内容（空白也算哦，只要是内容即可），会使得for指定的id对应的值操作点击（帮我点击吧），从上往下的找，其他id不会操作，在js中多个id会给出报错的，虽然他存在-->
<label for="1">黑恶虎</label>
<input type="radio" name="sex" id="1" /><label for="1">男<input type="radio" name="ww" id="4" /></label>
<input type="radio" name="sex" id="1" /><label for="1">女</label>
<input type="radio" name="sexx" id="2" /><label for="2">男</label>
<input type="radio" name="sexx" id="3" /><label for="3">女</label>
<!--label在一定程度上可以给不好点击或者眼睛不好的人进行操作的，因为比较方便，而不用必须点击对应的单选按钮-->
<!--可以不用for进行定位，直接操作内容，你只要点击了内容（空白也算哦，只要是内容即可，类似于a标签的点击方式），会自动给内部进行点击，前提是没有for，且只操作真的一次（而不是都会点击）点击并且是顺序的，所以第二个input不会操作-->
<label>好<input type="radio" name="ww" id="4" /><input type="radio" name="ww2" id="4" /></label>
<label>好<input type="radio" name="22" id="5" /></label>
<!--当然既然是点击，所以如果属性值是checkbox，也是可以的-->
有些是独占一行的，有些不是，自己测试即可，并不需要记住，当然，虽然比较少，可以记住
aa
<div>aa</div> <!--可以在内部加占一行的，但会进行撑开，导致外部总体占一行，其他的占一行的基本都是如此-->
<div>aa</div>
<span>aa</span> <!--span，实际上什么都没有，相当于自定义的标签，如<aaa>，只是我们大多数使用span来表示而已，但是可能有些标签会默认操作他的（指定他，所以大多数我们都会使用span标签，而不是自定义标签），具体可以百度（一般没有）-->
<span>aa</span>
<!--对应的语义标签，与之前说明的加粗，下划线等等是一样的说明，与div一样的作用，只是一个规范，通常我们会在手机端进行操作-->
<header>头部</header>
<nav>导航</nav>
<footer>底部</footer>
<aside>侧边</aside>
<section>区块</section>
<article>文章</article>
哈哈学 习
<!--开头不识别空格和换行，即不会换行，在特定的标签中是存在的（如textarea，这可能是内部操作的原因，或者说是js的原因，或者基础代码的原因）-->哈哈学 习<br>
哈哈学 习<br>
<!--开头不识别空格-->哈哈学 习<br><!--直接的空格只能出现一次（一个），或者说多个空格只认识一个，开头不识别空格-->
哈哈学 习<br>
哈哈学 习<br> <!-- 代表空格，注意：有很多这样的东西，其实并不需要记住，以后若出现了对应的需求，百度即可，因为是非常多的，记住是没有意义的-->
<form action=""> <!--与a标签的操作一样的，""代表刷新当前页面（其他的基本也是一样的说明），可以看成a标签，只是他会进行提交，或者设置提交方式，而a标签只能是get，他可以是get或者post，在以后会继续说明的-->
<input type="text"><br>
<input type="submit">
</form>
