一，列表
列表分为有序列表，无序列表，定义列表三种
1.有序列表
ol 嵌套 li，ol 是有序列表，li 是列表条目
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ol> <li>Ashto</li> <li>Ashto</li> <li>Ashto</li> </ol> </body> </html>
编辑
效果如图
2.无序列表
ul 嵌套 li，ul 是无序列表，li 是列表条目
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ul> <li>Ashto</li> <li>Ashto</li> <li>Ashto</li> </ul> </body> </html>
编辑
我们可以通过 list-style-type来调整列表前的符号
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ul> <li style="list-style-type: none;">Ashto</li> <li>Ashto</li> <li>Ashto</li> </ul> </body> </html>
编辑
定义列表
标签：dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 / 详情。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <dl> <dt>CSDN</dt> <dd>代码交流平台</dd> <dd>资源交流平台</dd> <dd>问题解决平台</dd> </dl> </body> </html>
编辑
二，表格
编辑
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <table border="1px solid black"> <tr> <th>姓名</th> <th>语文</th> <th>数学</th> <th>总分</th> </tr> <tr> <td>张三</td> <td>99</td> <td>100</td> <td>199</td> </tr> <tr> <td>李四</td> <td>98</td> <td>100</td> <td>198</td> </tr> <tr> <td>总结</td> <td>全市第一</td> <td>全市第一</td> <td>全市第一</td> </tr> </table> </body> </html>
编辑
三，表单
表单一般和js一起使用
input标签
编辑
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="text" name="" id=""> <input type="password" name="" id=""> <input type="radio" name="" id=""> <input type="checkbox" name="" id=""> <input type="file" name="" id=""> </body> </html>
下拉菜单
主要就是select和option,option就是下拉菜单的内容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <select name="" id=""> <option value="">1</option> <option value="">2</option> <option value="">3</option> <option value="">4</option> </select> </body> </html>
编辑
有些印象就行，实际开发中基本用不到
文本域，按钮，文本label
文本域textarea就是生成一块区域，大小可改（也可以设置固定形状），一般用在留言箱里。
按钮button就是生成一个按钮，可以绑定点事件，和js一起用吧。
文本label更简单，就是用 label 标签绑定文字和表单控件的关系，增大表单控件的点击范围。
四，div和span
div:一个盒子，最常用的标签，用来布局网站，非常重要，之后的大部分内容也是围绕div展开。
span:和p有点像，不过它不占一整行。
编辑
图片中的标签实质上都是div，只不过我们给某些形状的盒子取了个名字（语义化），方便使用。
用的挺频繁的，尤其是nav。
前端中标签有些印象就可以了，记住主要的几个：div,input,button,列表，p,h，其他的用的时候查一查就可以了。使用vscode的话会有智能提示，不用担心忘记的。
![[译]HTML进阶之Content categories](https://ucc.alicdn.com/pic/developer-ecology/728561f0699441b8a1b931c9467da831.png?x-oss-process=image/resize,h_160,m_lfit)