HTML第二节

一.列表

1.列表的简介

2.无序列表

注：1.ul里面只能放li，不能放标题和段落标签

2.li里面可以放标题和段落等内容

3.有序列表

4.定义列表

注：要实现上图的效果需要CSS

二.表格

1.表格介绍

注：1.th有额外的效果，可以使字体加粗并居中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格练习</title>
</head>
<body><table border="1"><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>

注：1.利用border加入了1像素的边框

2.表格标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格练习</title>
</head>
<body><table border="1"><thead><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr></thead><tbody><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></tbody><tfoot><tr><td>总结</td><td>全市第一</td><td>全市第一</td><td>全市第一</td></tr></tfoot></table>
</body>
</html>

注：1.使用表格标签对内容和效果无任何影响，只是为了方便阅读

3.合并单元格

注：1.保留的是最左和最上的单元格

2.有了表格结构标签后就不能跨结构合并单元格

注：1.如上图要保留的是1，删除2

2.不能够将tbody和tfoot的内容合并在一起，tbody只能和tbody合并

三.表单

1.表单的概念

2.input标签

注：1.text标签用于输入用户名

2.radio用于类似选择男女的选项

3.checkbox用于下面一种情况

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单练习</title>
</head>
<body>文本框：<input type="text"><br><br>密码框：<input type="password"><br><br>单选框：<input type="radio"><br><br>多选框：<input type="checkbox"><br><br>上传文件<input type="file">
</body>
</html>

注：1.代码前面的密码框，文本框是提示文字

3.input标签占位文本（placeholder）

文本框：<input type="text" placeholder="请输入用户名">
<br><br>
密码框：<input type="password" placeholder="请输入密码">

4.单选框（radio）

注：1.用name来给单选框来起名字，名字一样的会被分到同一个组，同一组只能选择一个

2.使用checked可以使网页打开时默认选中哪个选项

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>单选框练习</title>
</head>
<body>性别：<input type="radio" name="gender">沃尔玛购物袋<input type="radio" name="gender" checked>武装直升机
</body>
</html>

会默认选中武装直升机，如果两个选项均有checked，那么就会默认最后一个选项

4.上传多个文件（multiple）

5.多选框

<!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="checkbox" checked>唱<input type="checkbox">跳<input type="checkbox">rap<input type="checkbox">篮球
</body>
</html>

四.下拉菜单

注：1.selected会使其默认选中，如果不加selected的话，则是第一个为默认选中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>下拉菜单</title>
</head>
<body>城市：<select><option >北京</option><option >上海</option><option >武汉</option><option selected>郑州</option><option >深圳</option></select>
</body>
</html>

五.文本域（可以输入多行数据）

注：1.textarea里面也可以放placeholder，使提示文字变浅

六.lable标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>label标签练习</title>
</head>
<body>性别：<input type="radio" id="man" name="gender"><label for="man">男</label><label><input type="radio" name="gender">女</label>
</body>
</html>

注：1.label标签可以增加选项点击的范围，比如可以直接点击“男”字就能选上选项

2.注意写的时候将name属性带上

七.按钮

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>按钮练习</title>
</head>
<body><form action="">用户名：<input type="text"><br><br>密码：<input type="password"><br><br><button type="submit">提交</button><button type="reset">重置</button><button type="button">普通按钮</button></form>
</body>
</html>

注：1.只有将用户名，密码，按钮等内容放在同一个表单域（form）中才能实现reset重置功能

2.form中的action属性，是提交到后台，后台的地址

八.div和span标签

<!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><div>这是div标签</div><div>这是div标签</div><span>这是span标签</span><span>这是span标签</span>
</body>
</html>