01 表格 用来展示数据的。
02 创建表格
<table>表格标签
<tr>行
<td>单元格
案例：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <table> <tr> <td>姓名</td> <td>年龄</td> <td>性别</td> </tr> <tr> <td>姜童</td> <td>31</td> <td>难</td> </tr> <tr> <td>姜林</td> <td>30</td> <td>男</td> </tr> </table> </body> </html>03表格属性
boder 表格边框
border="1"
width 表格宽度
height 表格高度。
align 对齐 left right center。
cellspacing="10" 单元格与单元格之间的距离
cellpadding="10" 单元格内容与边框的距离
案例：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <table border="1" width="500" height="200" align="center" cellspacing="5" cellpadding="2"> <tr> <td>姓名</td> <td>年龄</td> <td>性别</td> </tr> <tr> <td>姜童</td> <td>31</td> <td>难</td> </tr> <tr> <td>姜林</td> <td>30</td> <td>男</td> </tr> </table> </body> </html>
04 表格案例
th单元格（表头单元格）文字有加粗效果
案例
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>表头表格</title> </head> <body> <table border="1" width="500" height="200" align="center" cellspacing="5" cellpadding="2"> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <tr> <td>姜童</td> <td>31</td> <td>难</td> </tr> <tr> <td>姜林</td> <td>30</td> <td>男</td> </tr> </table> </body> </html>05.表格标题标签
caption 表格标题标签跟表格一起走
案例：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>表格标题标签</title> </head> <body> <table border="1" width="500" height="200" align="right" cellspacing="5" cellpadding="2"> <caption>个人信息表</caption> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <tr> <td>姜童</td> <td>31</td> <td>难</td> </tr> <tr> <td>姜林</td> <td>30</td> <td>男</td> </tr> </table> </body> </html>
合并单元格
rowspan=""跨行合并
colspan=""跨列合并
合并单元格三部曲：
第一步，先确定是跨行还是跨列合并。
第二步：找目标单元格。先上后下。要合并几个。
第三步：删除多余的单元格。
案例：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>表头表格</title> </head> <body> <table border="1" width="500" height="200" align="center" cellspacing="5" cellpadding="2"> <caption>个人信息表</caption> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> <th rowspan="2">照片</th> </tr> <tr> <td>毕业学校</td> <td>31</td> <td>男</td> <!-- <td>合并后多余的单元格</td> --> </tr> <tr> <td >个人作品</td> <td colspan="3">30</td> <!-- <td>男</td> <td>照片</td> --> </tr> <tr> <td >个人简介</td> <td colspan="3">30</td> <!-- <td>男</td> <td>照片</td> --> </tr> </table> </body> </html>
表格总结：
表格是由行<tr>和单元格<td>标签。
表头单元格<th>
表格标题：caption
拓展：表格结构划分。
thead 定义表格的头部。
tbody 定义表格的内容部分
tfoot 定义表格的尾部
列表 列表是用来进行布局的。文字或者图表。
无序列表
ul只能嵌套li。
li
案例：
无序列表 <ul> <li>香蕉</li> <li>苹果</li> <li>榴莲</li> </ul>有序列表
有序列表 <ol> <li>美国</li> <li>英国</li> <li>中国</li> <li>俄罗斯</li> </ol>
自定义列表。
自定义列表 <dl> <dt>北京</dt> <dd>昌平区</dd> <dd>海淀区</dd> <dd>东城区</dd> </dl>
需要明白什么时候用无序列表和自定义列表
表单 用来收集用户信息的。
表单三部分组成：表单、提示文本，表单域。
1 表单标签
input 标签 单标签
type 类型
value 默认值
name属性 昵称
文本框 text
用户名:<input type="text" value="请输入用户名">
密码框：password
密码:<input type="password" name="">
单选按钮 radio checked 默认选中状态。
性别:<input type="radio" name="sex">男<input type="radio" name="sex" checked="checked">女复选框 checkbox
<input type="checkbox" name="aihao[]">看书 <input type="checkbox" name="aihao[]" checked="checked">睡觉 <input type="checkbox" name="aihao[]">打篮球提交按钮submit
<input type="submit"/>重置按钮 reset
<input type="reset" value="重置所填" />普通按钮 button
<input type="button" value="获取短信验证码" />图片按钮：image
<input type="image" src="images/btn.png" />上传文件 files
<input type="file" />
label标签：为了提高用户体验。获得焦点 （当鼠标点击文字时，文本框能获取到焦点）
<h4>第一种直接包含input标签。</h4> <label>用户名：<input type="text" name="username"></label> <h4>第二种通过for和id来实现</h4> <label for="user">用户名</label><input type="text" name="user" id="user">
文本域标签：textarea 多行文本 留言内容评论之类的可以用这个标签。
<textarea></textarea>
下拉列表：select selected默认选中
籍贯: <select> <option>请选择省份</option> <option selected="selected">山东</option> <option>北京</option> <option>上海</option> </select> <select> <option>请选择城市</option> <option>济南</option> <option selected="selected">青岛</option> <option>滨州</option> </select>
form表单的区域 form标签包起来
action 提交的地址
method提交方式 get和post
<form action="#" method="get"> 用户名:<input type="text" name="username" /> 密码:<input type="password" name="password" /> <input type="submit" /> <input type="reset" /> </form>
写法约定：
元素属性值使用双引号法则
元素值能写上的都写上
综合案例：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>综合案例</title> </head> <body> <form action="#" method="post"> <table align="center" width="600"> <caption><h5>青春不常在,抓紧来学校</h5></caption> <tr> <td>性别</td> <td> <input type="radio" name="sex"><img src="./images/women.jpg"/>女 <input type="radio" name="sex"><img src="./images/man.jpg"/>男 </td> </tr> <tr> <td>生日</td> <td> <select> <option>请选择年份</option> <option>1991</option> <option>1990</option> </select> <select> <option>请选择月份</option> <option>01</option> <option>02</option> </select> <select> <option>请选择日</option> <option>01</option> <option>30</option> </select> </td> </tr> <tr> <td>所在地区</td> <td> <input type="text" name="diqu" value="北京" /> </td> </tr> <tr> <td>学历</td> <td><input type="text" name="education" value="大学" /></td> </tr> <tr> <td>月薪</td> <td><input type="text" name="money" value="0" /></td> </tr> <tr> <td>手机号</td> <td><input type="text" name="phone" value="15xxxx33" /></td> </tr> <tr> <td>昵称</td> <td><input type="text" name="uname" value="豆豆" /></td> </tr> <tr> <td>喜欢的类型</td> <td> <input type="checkbox" name="love" />妩媚 <input type="checkbox" name="love" />可爱 <input type="checkbox" name="love" />小鲜肉 </td> </tr> <tr> <td>自我介绍</td> <td><textarea name="infos">自我介绍</textarea></td> </tr> <tr> <td></td> <td><input type="image" src="./images/btn.png" /></td> </tr> <tr> <td></td> <td><input type="checkbox" name="tongyi" checked="checked" />我同意注册条款和会员加入标准</td> </tr> <tr> <td></td> <td><a href="#">我是会员，立即登录</a></td> </tr> <tr> <td></td> <td> <h4>我承诺</h4> <ul> <li>年满18岁</li> <li>态度诚恳认证</li> <li>在学校好好学习</li> <li>哈哈哈哈</li> <li>哈哈哈哈</li> </ul> </td> </tr> </table> </form> </body> </html>
学习html文档：
https://developer.mozilla.org/zh-CN/docs/learn/HTML
https://www.w3school.com.cn/tags/tag_html.asp
1640
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
