一,列表
列表分为有序列表,无序列表,定义列表三种
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的话会有智能提示,不用担心忘记的。