【HTML】Day02

1. 列表标签
- 1.1 无序列表
- 1.2 有序列表
- 1.3 定义列表
2. 表格标签
- 2.1 合并单元格
3. 表单标签
- 3.1 input标签基本使用
- 3.2 上传多个文件
4. 下拉菜单、文本域
5. label标签
6. 按钮button
7. div与span、字符实体
- 字符实体

1. 列表标签

作用：布局内容排列整齐的区域。
列表分类：无序列表、有序列表、定义列表。

在这里插入图片描述

1.1 无序列表

作用：布局排列整齐的不需要规定顺序的区域。
标签：ul 嵌套 li , ul 是无序列表, li是列表条目

1. ul标签里面只能包裹li标签
2. li标签里面可以包裹任何内容

 <!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>
    <ul>
        <li>列表条目1</li>
        <li>列表条目2</li>
    </ul>
</body>
</html>

在这里插入图片描述

1.2 有序列表

作用：布局排列整齐的需要规定顺序的区域。
标签：ol嵌套li, ol是有序列表,li是列表条目。

<!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>
    <ol>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ol>
</body>
</html>

在这里插入图片描述

1.3 定义列表

标签：dl嵌套dt和dd, dl是定义列表，dt是定义列表的标题，dd是定义列表的描述/详情

<!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>
    <dl>
        <dt>列表标题</dt>
        <dd>列表描述/详情</dd>

        <dt>列表标题x</dt>
        <dd>列表描述/详情x</dd>
    </dl>
</body>
</html>

在这里插入图片描述

2. 表格标签

网页中的表格与Excel表格类似，用来展示数据。

在这里插入图片描述

标签：table 嵌套 tr tr嵌套td/th
在这里插入图片描述

<!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>
    <!-- border边框
     cellspacing单元格间距
     cellpadding单元格距内容的距离-->
    <table align="center" border="1" cellspacing="0"
           cellpadding="20">
        <caption>表格标题</caption>
        <!-- tr表示行  th表头 加粗并居中  td表示列 16:20上课 -->
        <tr>
            <th>编号</th><th>姓名</th><th>年龄</th>
        </tr>
        <tr>
            <td>1</td><td>张三</td><td>28</td>
        </tr>
        <tr>
            <td>2</td><td>尼古拉斯赵四</td><td>18</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

表格标签

在这里插入图片描述

2.1 合并单元格

<!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 border="" cellspacing="" cellpadding="">
	    <!-- colspan跨列合并 -->   <!-- rowspan跨行合并 --> 
	    <tr><td align="center" colspan="2">1-1</td><td rowspan="2">1-3</td></tr>
	    <tr><td rowspan="2">2-1</td><td>2-2</td></tr>
	    <tr><td colspan="2" align="center">3-2</td></tr>
	</table>
</body>
</html>

在这里插入图片描述

3. 表单标签

3.1 input标签基本使用

input标签type属性值不同，功能也不同。

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- action服务器地址 method提交方式 -->
        <form action="http://www.tmooc.cn" method="get">
            <!-- 文本框 name是对传递过去的参数做介绍 id唯一标识 
            value值 设置文本框的值-->
            <input type="text" name="username"
                   placeholder="请输入用户名" id="" value="" />
            <!-- 密码框 placeholder占位文本 -->
            <input type="password" name="pwd"
                   placeholder="请输入您的密码" id="" value="" />
            <hr >
            <!-- 单选 必须写value  checked 设置默认选中-->
            性别: <input type="radio" name="gender" id="" value="m" />男
            <input type="radio"  checked="checked" name="gender" id="" value="f" />女
            <hr >
            <!-- 多选 和单选类似-->
            爱好: <input type="checkbox" name="hobby" id=""
                       value="cy" />抽烟
            <input type="checkbox" name="hobby" id=""
                   value="hj" />喝酒
            <input type="checkbox" checked="checked" name="hobby" id="tt"
                   value="tt" /><label for="tt">烫头</label>
            <!-- label扩充点击范围  -->
            <input type="checkbox" name="hobby" id="wz" value="wangzhe"/>
            <label for="wz">王者荣耀</label>
            <hr >
            <!-- 日期选择器-->
            生日:<input type="date" name="birthday" id="birthday"/>
            <hr >
            <!-- 文件选择器-->
            靓照:<input type="file" name="pic" id="pic"/>
            <hr >
            <input type="submit" value="注册"/>
        </form>
    </body>
</html>

在这里插入图片描述

3.2 上传多个文件

默认情况下，文件上传表单控件只能上传一个文件，添加multiple属性可以实现文件多选功能。
<input type="file" multiple>

4. 下拉菜单、文本域

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="http://www.tmooc.cn" method="get">
			<!-- 下拉选 -->
			所在城市:<select name="city">
				<option value="bj">北京</option>
				<!-- selected默认选中 -->
				<option value="sh" selected="selected">上海</option>
				<option value="gz">广州</option>
			</select><br>
			<!-- 文本域 rows行  cols列-->
			自我介绍:<textarea name="intro" rows="3" cols="20"
					placeholder="说点儿啥..."></textarea>
			<!-- 提交按钮 -->
			<input type="submit" value="注册"/>
			<!-- 重置按钮 -->
			<input type="reset" />
			<!-- 自定义按钮 -->
			<input type="button" value="按钮" />
			<button type="button">按钮</button>
		</form>
		<p>测试&nbsp;&nbsp;&nbsp;空格&lt;abc&gt;</p>
		<div id="">div1</div><div id="">div2</div>
		<div id="">div3</div>
		<span>span1</span>
		<span>span2</span>
		<span>span3</span>
	</body>
</html>