VScord 设置小窍门
“editor.lineNumbers”:off 去掉行号 vscord #列表元素
常见的表现形式
任何类型都可放入列表
1、无序列表
2、有序列表
3、自定义列表
无序列表
<h3>购物车</h3><ul><li>牛奶一箱</li><li>苹果10斤</li><li>蛋糕一个</li></ul>
- 牛奶一箱
- 苹果 10 斤
- 蛋糕一个
有序列表
<h3>购物车</h3><ol><li>牛奶一箱</li><li>苹果10斤</li><li>蛋糕一个</li></ol>
1、牛奶一箱
2、苹果 10 斤
3、蛋糕一个
自定义列表
dl+dt+dd…
<dl><dt>姓名:</dt><dd>苹果</dd><dt>地址：</dt><dd>蛋糕路草莓街</dd><dt>联系：</dt><dd>电话：<a href ="tel:1999999999">1999999999</a></dd><dd>邮箱：<a href="mailto:php@163.com">PHP@163.com</a></dl>
导航
<ul class="menu"><li><a href="">首页</a></li><li><a href="">第一</a></li><li><a href="">第二</a></li><li><a href="">第三</a></li></ul>
link css 文件<link rel="stylesheet" href="style2.css">
图文列表
<ul class="list"><li><a href=""><img src="https://....." /></a><a href="">web开发入门</a></li></ul>
表格
多列列表=表格
表格也是用一组标签表示的：table,thead,tbody,tr,td/th
<table class="product"><caption>商品标题</caption><thead><tr><td>ID</td><td>品名</td><td>单价</td><td>数量</td><td>金额</td></tr></thead><tbody><tr><td>a100</td><td>手机</td><td>9999</td><td>1</td><td>9999</td></tr><tr><td>p100</td><td>手机</td><td>8888</td><td>1</td><td>8888</td></tr></tbody></table>
分页的制作
<p class="page"><a href="">首页</a><a href="">5</a><a href="">6</a><a href="">7</a><a href="">8</a><a href="">尾页</a></p>
所有的数据必须填充到 td/th 中
表格中行和列的合并
列合并 在<td colspan="7"></td>
行合并 <td rowspan="4"></td>
下面的行列要相应减少
<tbody><tr><td colspan="2"></td><td></td><td>星期一</td><td>星期二1</td><td>星期三</td><td>星期四</td><td>星期五</td></tr><tr><td rowspan="4">上午</td><td>1</td><td>语文</td><td>数学</td><td>外语</td><td>物理</td><td>化学</td></tr><tr><td>2</td><td>数学</td><td>物理</td><td>化学</td><td>语文</td><td>外语</td></tr><tr><td>3</td><td>物理</td><td>化学</td><td>数学</td><td>语文</td><td>外语</td></tr></tbody>
<!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 class="product" border="1" cellspacing="0"><caption>课程表</caption><tbody><tr><td colspan="2"></td><td>星期一</td><td>星期二1</td><td>星期三</td><td>星期四</td><td>星期五</td></tr><tr><td rowspan="4">上午</td><td>1</td><td>语文</td><td>数学</td><td>外语</td><td>物理</td><td>化学</td></tr><tr><td>2</td><td>数学</td><td>物理</td><td>化学</td><td>语文</td><td>外语</td></tr><tr><td>3</td><td>物理</td><td>化学</td><td>数学</td><td>语文</td><td>外语</td></tr><tr><td>4</td><td>物理</td><td>化学</td><td>数学</td><td>语文</td><td>外语</td></tr></tbody></body></html>
表单
from
- action=”处理表达的程序”
- method=”提交类型”
- GET 类型（默认）
- POST 类型（敏感性数据）
- class=”register”
文本框
<input type="text" id="username" /> <label for="username">账号：</label>
id 与 for 相一致
type 控件类型
（type,id,name 数据的变量名,value 数据的内容）
- type=text 通用的文本框
- type=email 邮箱型文本框
- type=password 密码型的文本框
- type=button 按钮
（required 必选的 placeholder=”提示内容”）
单选按钮和复选框
<lable for="">性别：</lable><div><input type="radio" name="gender" value="1" id="male" /><label for="male">男</label ><input type="radio" name="gendet" value="0" id="female" checked /><label for="male" >女</label ></div>
checked 默认的
<label for="">兴趣：</label><div><input type="checkbox" name="hobby[]" value="game" id="game" /><labelfor="game">游戏</label ><input type="checkbox" name="hobby[]" value="shoot" id="shoot" /><labelfor="shoot">摄影</label ></div>
复选框的 name 属性值应该写与数组的格式名称，这样才能确保服务器接收到一组值。
下拉列表
select 和 option
<label for="">学历：</label><select name="ed" id="edu2"><option value="1">初中</option><option value="2">高中</option><option value="3">本科</option><option value="4">研究生</option><option value="5" label="英雄">自学成才</option></select>
select 默认项 label 属性优先于“自学成才”
文件域与隐藏域
1、请求必须是 POST
2、enctype=表达编码设置
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
<label for="user-pic">头像：</label><input type="hidden" name="MAX_FILE_SIZE" value="80000"/><input type="file" name="user_pic" id="user-pic"/><div class="user-pic" style"grid-column: span 2"></div><label for="user-pic">简历：</label><input type="hidden" name="MAX_FILE_SIZE" value="100000"/><input type="file" name="user_resume" id="user-resume"/><div class="user-resume" style"grid-column: span 2"></div>
文本域
多行的文本框
<label for="comment">备注：</label><textarea name="comment" id="comment" cols="30" rows="5"></textarea>
表单控件的 from 属性
<!-- <body><form action=""><p>用户名<input type="text" name="name"/></p></form></body> --><form action="check.php" method="get" id="register">//使用form属性，将控件与它所属的表单进行关联绑定<div class="box"><label for="username">账号：</label><input type="text" from="register" name="username" id="username" /><button>提交</button></div></form>
尽管 form 属性可以实现将控件写到任何地方，但还是建议写到<from>控件里面
