<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 更改列表标志
li{
list-style: none;
} */
</style>
</head>
<body>
<!-- 1-无序列表 块级元素，独占一行-->
<!-- 修改列表标志 type= "disc默认 circle圆形 square方形 none去除标志" -->
<ul type="disc">
<li type="circle">鸡块面</li>
<li type="square">刀削面</li>
<li>油泼面</li>
</ul>
<!-- 2-有序列表 块级元素，独占一行-->
<!-- 修改列表标志 type="1 a A i I" -->
<ol type="I">
<li>北京</li>
<li>上海</li>
<li>深圳</li>
</ol>
<!-- 自定义列表 块级元素，独占一行 definition list（定义列表） definition title(标题) definition descption(描述) -->
<dl > <!-- 定义列表 -->
<dt>钓鱼岛</dt> <!-- 列表标题 -->
<dd>始建于1457</dd> <!-- 列表对标题的描述 -->
<dd>历史悠久</dd>
<dd>属于cn</dd>
</dl>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
/* 合并单元格边框 */
/* width: 100%;
height: 3000px; */
border-collapse: collapse;
background-image: url();
align-self: start;
}
tr td{
border-collapse: collapse;
padding-left: 3px;
vertical-align: bottom;
}
</style>
</head>
<body>
<!-- 表格标签 -->
<!-- 表格属性：
border:边框厚度
align:水平对齐方式（lfet right center）
valign="middle/top/bottom":规定单元格中内容的垂直排列方式
cellspacing:单元格之间的距离 //已废弃
cellpadding:单元格文字到单元格边框距离 //已废弃
border-collapse: collapse;:合并单元格边框
-->
<table cellspacing="0px" cellpadding="60px" >
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr >
<td >张1</td>
<td>25</td>
<td>女</td>
</tr>
<tr>
<td>张2</td>
<td>35</td>
<td>男</td>
</tr>
<tr>
<td>张3</td>
<td>45</td>
<td>女</td>
</tr>
</table>
<!-- 细线表格 -->
<table cellspacing="1" style="background-color: aqua; " >
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr >
<td >张1</td>
<td>25</td>
<td>女</td>
</tr>
<tr>
<td>张2</td>
<td>35</td>
<td>男</td>
</tr>
<tr>
<td>张3</td>
<td>45</td>
<td>女</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
/* 合并单元格边框 */
/* width: 100%;
height: 3000px; */
border-collapse: collapse;
background-image: url();
align-self: start;
}
tr td{
border-collapse: collapse;
padding-left: 3px;
vertical-align: bottom;
}
</style>
</head>
<body>
<!-- 表格标签 -->
<!-- 表格属性：
border:边框厚度
align:水平对齐方式（lfet right center）
valign="middle/top/bottom":规定单元格中内容的垂直排列方式
cellspacing:单元格之间的距离 //已废弃
cellpadding:单元格文字到单元格边框距离 //已废弃
border-collapse: collapse;:合并单元格边框
-->
<table cellspacing="0px" cellpadding="60px" >
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr >
<td >张1</td>
<td>25</td>
<td>女</td>
</tr>
<tr>
<td>张2</td>
<td>35</td>
<td>男</td>
</tr>
<tr>
<td>张3</td>
<td>45</td>
<td>女</td>
</tr>
</table>
<!-- 细线表格 -->
<table cellspacing="1" style="background-color: aqua; " >
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr >
<td >张1</td>
<td>25</td>
<td>女</td>
</tr>
<tr>
<td>张2</td>
<td>35</td>
<td>男</td>
</tr>
<tr>
<td>张3</td>
<td>45</td>
<td>女</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- form表单表单元素都要写在form标签中 -->
<!-- action表示表单提交到服务器的地址 -->
<form action="">
<!-- 表单元素 -->
<!-- 明文输入框 -->
<!-- readonly:只读 -->
用户名：<input type="text" name="默认属性名" value="默认属性值" placeholder="请输入用户名" readonly><br>
<!-- 暗文输入框 -->
密码：<input type="password" placeholder="请输入密码"><br>
再次输入密码：<input type="password" placeholder="两次密码相等"><br><hr>
<!-- 单选按钮 -->
<!-- 设置name相同，即可产生互斥效果 -->
<!-- 1.用lable包裹，让点击文字时让对应的输入框聚焦 -->
<label >
管理员<input name="role" value="admin" type="radio">
</label>
<!-- 2.给label标签for属性和输入框id属性一致,需要把文字放在label中-->
<label for="customer">顾客</label>
<input name="role" value="customer" type="radio" id="customer">
员工啊<input name="role" value="employee" type="radio">
<!-- 复选框 -->
<!-- checked: 复选/单选框设置默认选中-->
爱好：
足球<input type="checkbox" name="habbies" value="football" checked>
篮球<input type="checkbox" name="habbies" value="basketball">
唱歌<input type="checkbox" name="habbies" value="sing"><br>
<!-- 下拉框 -->
<!-- multiple:把所有选项显示 -->
<!-- optgroup:给选项分组 -->
<!-- disabled:表示禁用 -->
<!-- selected:下拉框设置默认选中 -->
城市：
<select name="" id="" multiple>
<optgroup label="一线" disabled>
<option value="" selected>北京</option>
<option value="" >南京</option>
<option value="">上海</option>
<option value="">太原</option>
</optgroup>
<optgroup label="二线">
<option value="">苏州</option>
<option value="">杭州</option>
<option value="">赣州</option>
<option value="">甘州</option>
</optgrou>
</select><br>
<!-- 普通按钮 -->
<input type="button" value="点我">
<!-- 图片按钮 -->
<input type="image" src="../day01/音视频/22.jpeg" alt="" width="200px">
<!-- 重置按钮。清空用户在表单输入的内容 默认选项不会 -->
<input type="reset" value="重置">
<!-- 提交按钮 -->
<input type="submit" value="提交">
<!-- 隐藏域 悄悄提交信息至服务器 用户看不到，每次提交时和显示的数据一并上传-->
<input type="hidden" name="token" value="123token">
<!-- !--小刷和大刷
小刷请求得浏览器缓存 F5
大刷请求得是服务器或者重新载入页面
-->
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- action提交到服务器地址 method get post delete put patch -->
<form action="xxx.php" enctype="application/x-www-form-urlencoded" method="get">11</form>
<!-- 多行文本框-textarea -->
<!-- fieldset组件用于在一个web表单中对多个控件和标签进行分组 表单里再嵌套表单时用它-->
描述：<textarea name="description" id="" cols="30" rows="10"></textarea>
附件上传：
上传文件<input type="file">
<fieldset>
<legend>请登录</legend>
用户名：<input type="text"><br>
密码： <input type="password">
</fieldset>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="xxx.php">
<!-- h5新增表单属性:
min:最小值
max：最大值
step:步幅
pattern：正则匹配
autofocus：自动聚焦（默认选中）
required：必做校验，必填项
formnovalidate:不做校验
placeholder:提升内容
formaction:表单提交服务器得地址
formenctype:表单提交得数据格式查询字符串纯文本附件
formmethod:提交表单得方式get post
formnovalidate:不校验表单，提交按钮
list与datalist进行待选 项绑定
-->
<!-- 进度条 -->
<progress value="70" max="100"></progress>
<!-- 滑块 -->
<input type="range" min="10" max="100" step="10" value="20" required><br>
<!-- 对邮箱校验 @-->
<input type="email" formnovalidate><br>
<!-- 对电话校验 配合正则表达式pattern-->
<input type="tel" pattern="1[1-9]{10}"><br>
<!-- 对url校验 //-->
<input type="url" ><br>
<!-- 取色器 -->
<input type="color" autofocus><br>
<!-- 日期 -->
<input type="date"><br>
<!-- 日期时间 -->
<input type="datetime-local"><br>1
<!-- number 对数字做校验 -->
<input type="number">
<!-- 给输入框绑定待选项 datalist id属性和input list属性要一致-->
<input type="text" list="input">
<details id="input">
<option value="">周一</option>
<option value="">周二</option>
<option value="">周三</option>
<option value="">11</option>
</details>
<input type="submit" >
</form>
</body>
</html>
<!-- 1-无序列表 块级元素，独占一行-->
<!-- 修改列表标志 type= "disc默认 circle圆形 square方形 none去除标志" -->
也可也通过css更改:li{list-style: none;}
table
属性:width height border bgcolor background
cellspacing单元格和单元格之间得距离外边距
cellpadding单元格文字到单元格边框距离内边距
align水平对齐方式
合并单元格边框border-collapse: collapse
tr
bgcolor
align left center right 水平对齐
valign top migdle bottom垂直对齐
td
align
valign
table>tr>td*5{3$}
3.表单
|所有表单 元素都要写在form表单中action enctype method
input. type。. name= ”提交给表单属性名'. value='提交给表单得属性值
> text . 明文输入框
password暗文输入框
>radio单选按钮将所有单选按钮设置同一个name.
checkbox，复选按钮.
> button. 普通按钮
> image图片按钮
reset .重置按钮
submit.提交按钮
hidden.隐藏域
+ file上传文件
textarea.多行文本框
fieldset.表单元素legend 表单标题
想要点击文字让表单元素聚焦
> 1. label标签直接包裹表单元素
2.1abel for. 属性和input id属性要一致. 文字放在labe1中
2747
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
