列表标签
一、有序列表
ol ordery lists (简写:ol)
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<ol type="">男
<li> 跑车</li>
<li>手表</li>
</ol>
<ol>女
<li>服装</li>
<li>化妆品</li>
</ol>
</body>
</html>
排序:
案例:
(2)快速生成有序列表
ol*3>li*2
代码:
二、无序列表
ul unordery lists (简写:ul)
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<ul type=>男
<li>车</li>
<li>房</li>
<li>钞票</li>
</ul>
<ul>女
<li>服装</li>
<li>化妆品</li>
<li>手饰</li>
</ul>
</html>
案例:
(2)快速生成无序列表
ul*2>li*3 按tab键联想
代码: ul*2>li*3
列表标签
一、有序列表
ol ordery lists (简写:ol)
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<ol type="">男
<li> 跑车</li>
<li>手表</li>
</ol>
<ol>女
<li>服装</li>
<li>化妆品</li>
</ol>
</body>
</html>
排序:
案例:
(2)快速生成有序列表
ol*3>li*2
代码:
二、无序列表
ul unordery lists (简写:ul)
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<ul type=>男
<li>车</li>
<li>房</li>
<li>钞票</li>
</ul>
<ul>女
<li>服装</li>
<li>化妆品</li>
<li>手饰</li>
</ul>
</html>
案例:
(2)快速生成无序列表
ul*2>li*3 按tab键联想
代码: ul*2>li*3
表格标签
(1)认识表中的一些常用单词
border 边距
align 格式 ‘ center’ 对齐
cellspacing 单元格与单元格的距离
cellpadding 单元格与内容的距离
wedth 宽度
height 高度
tr 表示:行
th 表示:表头
td :表示列
(2)输入table +回车
表格的案例
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<table border=" 10" cellspacing="2" align="center" cellpadding="2" width="500" height="500">
<tr>
<th>姓名</th>
<th>性别</th>
<th>分数</th>
</tr>
<tr>
<td>zs</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>ls</td>
<td>女</td>
<td>90</td>
</tr>
</table>
二、合并行
rowspan =行数 合并行
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<table border=" 10" cellspacing="2" align="center" cellpadding="2" width="500" height="500">
<tr>
<th>姓名</th>
<th>性别</th>
<th>分数</th>
</tr>
<tr>
<td>zs</td>
<td>男</td>
<td rowspan="2">80</td>
</tr>
<tr>
<td>ls</td>
<td>女</td>
</tr>
</table>
</body>
</html>
三、合并列
colspan="列数"
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<table border=" 10" cellspacing="2" align="center" cellpadding="2" width="500" height="500">
<tr>
<th>姓名</th>
<th>性别</th>
<th>分数</th>
</tr>
<tr>
<td>zs</td>
<td>男</td>
<td >80</td>
</tr>
<tr>
<td>ls</td>
<td colspan="2">女</td>
</tr>
</table>
</body>
</html>
表单标签
一、表单单词介绍:
表单标签格式:form
action:开始网址
method:get和post等等
表单标签:主要用来收集用户输入信息如:登入、注册、搜索商品等
用户名格式:text (明文)
密码格式:password (密文)
性别:radio 性别格式 性别是单选,单选类型是radio,注意name要加上sex
复选框:checkbox
文本框:textarea
上传文件:file
下拉选择框:select
button:按钮
reset:重置
submit:提交
二、表单编写
截图:
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="https://www.baidu.com/" method="post">
<p>用户名:<input type="text" /></p>
<p>密码:<input type="password" /></p>
<p>
<input type="radio" name="sex" id="" value="" />男
<input type="radio" name="sex" id="" value="" />女
</p>
<p>
<input type="checkbox" name="" id="" value="" />linux
<input type="checkbox" name="" id="" value="" />mysql
<input type="checkbox" name="" id="" value="" />python
<input type="checkbox" name="" id="" value="" />java
</p>
<p>
下拉框
<select name="">
<option value="">初中</option>
<option value="">高中</option>
<option value="">大学</option>
</select>
</p>
<p>
自我介绍:<br />
<textarea name="" rows="10" cols="10"></textarea>
</p>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
<input type="button" value="按钮"/>
</p>
</form>
</body>
</html>