一、表格_跨行与跨列
1.相关代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格_跨行与跨列</title>
</head>
<body>
<table border="1" cellspacing="0">
<caption>课程表</caption>
<thead>
<tr>
<th>项目</th>
<th colspan="5">上课</th>
<th colspan="2">活动与休息</th>
<!-- <th>1-4</th>-->
<!-- <th>1-5</th>-->
<!-- <th>1-6</th>-->
<!-- <th>1-7</th>-->
<!-- <th>1-8</th>-->
</tr>
</thead>
<tbody>
<tr>
<td>星期</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
<tr>
<td rowspan="4">上午</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
<td>3-5</td>
<td>3-6</td>
<td>3-7</td>
<td rowspan="4">休息</td>
</tr>
<tr>
<!-- <td>4-1</td>-->
<td>4-2</td>
<td>4-3</td>
<td>4-4</td>
<td>4-5</td>
<td>4-6</td>
<td>4-7</td>
<!-- <td>4-8</td>-->
</tr>
<tr>
<!-- <td>5-1</td>-->
<td>5-2</td>
<td>5-3</td>
<td>5-4</td>
<td>5-5</td>
<td>5-6</td>
<td>5-7</td>
<!-- <td>5-8</td>-->
</tr>
<tr>
<!-- <td>6-1</td>-->
<td>6-2</td>
<td>6-3</td>
<td>6-4</td>
<td>6-5</td>
<td>6-6</td>
<td>6-7</td>
<!-- <td>6-8</td>-->
</tr>
<tr>
<td rowspan="2">下午</td>
<td>7-2</td>
<td>7-3</td>
<td>7-4</td>
<td>7-5</td>
<td>7-6</td>
<td>7-7</td>
<td rowspan="2">休息</td>
</tr>
<tr>
<!-- <td>8-1</td>-->
<td>8-2</td>
<td>8-3</td>
<td>8-4</td>
<td>8-5</td>
<td>8-6</td>
<td>8-7</td>
<!-- <td>8-8</td>-->
</tr>
</tbody>
</table>
</body>
</html>
2.显示结果
二、补充几个常用的标签
1.相关代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>补充几个常用的标签</title>
</head>
<body>
<!-- 换行标签-->
<a href="http://www.netbian.com/mei/">去看美女</a><br><br>
<a href="https://newhouse.fang.com/house/s/b91/">去买房</a><br><br>
<a href="https://www.ptpress.com.cn/">去买书</a>
<!-- 分割线-->
<div>第一章</div>
<p>就这样最后王子和公主在一起了！</p>
<hr>
<div>第二章</div>
<p>你原来是一个这样的人？</p>
<!-- 显示原文-->
<pre>
I Love You
I Love You
Love
</pre>
</body>
</html>
2.显示结果
三、表单基本结构
1.相关代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单基本结构</title>
</head>
<body>
<form action="https://www.baidu.com/s">
<input type="text" name="wd">
<button>去百度</button>
</form>
<hr>
<form action="https://search.jd.com/search">
<input type="text" name="keyword">
<button>去京东</button>
</form>
<form action="https://search.jd.com/search" target="_self" method="post">
<input type="text" name="keyword">
<button>去京东</button>
</form>
<hr>
<a href="https://search.jd.com/search?keyword=华为">搜索手机</a>
</body>
</html>
2.显示结果
四、表单常用控件
1.相关代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单常用控件</title>
</head>
<body>
<form action="https://search.jd.com/search">
<!-- 文本输入框-->
账户：<input disabled type="text" name="account" value="malongq" maxlength="20"><br>
<!-- 密码输入框-->
密码：<input type="password" name="pwd" value="123" maxlength="20"><br>
<!-- 单选框-->
性别：
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female" checked>女<br>
<!-- 多选框-->
爱好：
<input type="checkbox" name="hobby" value="smoke" checked>抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm" checked>烫头<br>
其他：
<textarea name="other" cols="22" rows="3"></textarea><br>
籍贯：
<select name="place">
<option value="豫">河南</option>
<option value="粤" selected>广东</option>
<option value="川">四川</option>
<option value="鄂">湖北</option>
</select>
<!-- 隐藏域-->
<input type="hidden" name="from" value="toutiao">
<br>
<!-- 确认按钮_第一种写法-->
<!-- <button>确认</button>-->
<button type="submit">确认</button>
<!-- 确认按钮_第二种写法-->
<!-- <button>确认</button>-->
<!-- <input type="submit" value="确认">-->
<!-- 重置按钮_第一种写法-->
<!-- <button type="reset">重置</button>-->
<!-- 重置按钮_第二种写法-->
<input type="reset" value="点我重置">
<!-- 普通按钮_第一种写法-->
<input type="button" value="检测账户是否被注册">
<!-- 普通按钮_第二种写法-->
<!-- <button type="button">检测账户是否被注册</button>-->
</form>
<!-- <form action="https://www.baidu.com/s">-->
<!-- <input type="text" name="abc">-->
<!-- <button>确认</button>-->
<!-- </form>-->
</body>
</html>
2.显示结果
五、表单_lable标签
1.相关代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单_lable标签</title>
</head>
<body>
<form action="https://search.jd.com/search">
<label for="zhanghu">账户：</label>
<input id="zhanghu" type="text" name="account" maxlength="20"><br>
<!-- <label for="mima">密码：</label>-->
<!-- <input id="mima" type="password" name="pwd" maxlength="20"><br>-->
<label>
密码：
<input id="mima" type="password" name="pwd" maxlength="20">
</label>
<br>
性别：
<input type="radio" name="gender" value="male" id="nan">
<label for="nan">男</label>
<label>
<input type="radio" name="gender" value="female" id="nv">女
</label>
<br>
爱好：
<label>
<input type="checkbox" name="hobby" value="smoke">抽烟
</label>
<label>
<input type="checkbox" name="hobby" value="drink">喝酒
</label>
<label>
<input type="checkbox" name="hobby" value="perm">烫头
</label>
<br>
<label for="qita">其他：</label>
<textarea id="qita" name="other" cols="21" rows="3"></textarea><br>
籍贯：
<select name="place">
<option value="豫">河南</option>
<option value="粤">广东</option>
<option value="川">四川</option>
<option value="鄂">湖北</option>
</select>
<input type="hidden" name="from" value="toutiao">
<br>
<!-- <button type="submit">确认</button>-->
<input type="submit" value="确认">
<input type="reset" value="点我重置">
<input type="button" value="检测账户是否被注册">
</form>
</body>
</html>
2.显示结果
六、表单_fieldset与legend标签
1.相关代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单_fieldset与legend标签</title>
</head>
<body>
<form action="https://search.jd.com/search">
<!-- 主要信息-->
<fieldset>
<legend>主要信息</legend>
<label for="zhanghu">账户：</label>
<input id="zhanghu" type="text" name="account" maxlength="20"><br>
<label>
密码：
<input id="mima" type="password" name="pwd" maxlength="20">
</label>
<br>
性别：
<input type="radio" name="gender" value="male" id="nan">
<label for="nan">男</label>
<label>
<input type="radio" name="gender" value="female" id="nv">女
</label>
</fieldset>
<br>
<fieldset>
<legend>附加信息</legend>
爱好：
<label>
<input type="checkbox" name="hobby" value="smoke">抽烟
</label>
<label>
<input type="checkbox" name="hobby" value="drink">喝酒
</label>
<label>
<input type="checkbox" name="hobby" value="perm">烫头
</label>
<br>
<label for="qita">其他：</label>
<textarea id="qita" name="other" cols="21" rows="3"></textarea><br>
籍贯：
<select name="place">
<option value="豫">河南</option>
<option value="粤">广东</option>
<option value="川">四川</option>
<option value="鄂">湖北</option>
</select>
</fieldset>
<input type="hidden" name="from" value="toutiao">
<br>
<!-- <button type="submit">确认</button>-->
<input type="submit" value="确认">
<input type="reset" value="点我重置">
<input type="button" value="检测账户是否被注册">
</form>
</body>
</html>
2.显示结果
七、框架标签
1.相关代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>框架标签</title>
</head>
<body>
<!-- 利用iframe嵌入一个普通的网页-->
<!-- <iframe src="https://www.taobao.com" width="1522" height="730" frameborder="0"></iframe>-->
<!-- 利用iframe嵌入一个广告网页-->
<!-- <iframe src="https://cpro.baidu.com/cpro/ui/uijs.php?en=mywWUA71T1YsFh7sT7qGujYsFhPC5H0huAbqrauGTdq9TZ0qnauJp1YdnH01n1T4rjTkPHnzPyu9Fh_qFRcdFRFDFRfdFRndFRFjFRfzFRFDFRRLFRn3FRuDFRn3FRfdFRf1FRP7FhkdpvbqniuVmLKV5HDznWbznBuk5Hf3njf4njc4g1FxmLKzFMFB5H0hTMnqniu1uyk_ugFxpyfqniu1pyfquhDzPHR1P1D4rjnLnjndniu1IA-b5HDkPzuY5gwsmvkGmvV-ujPxpAnhIAfqPWfsPjcznauYUHYzP1RkPHTdrj6hIAd15HDLnH04rHfYnWbhIZRqIHmYnjfznW0hIHdCIZwsTzR1fiRzwBRzwMILIzRzwHDvnzRzwyPEUiuv5HchpHYvP1cvPjR4uf&besl=5&c=news&cf=1&cvrq=687949&efc=0&eid_list=200000&expid=200000_200055&fr=14&fv=0&haacp=181&img_typ=4134&itm=0&lu_idc=yf&lukid=1&lus=fa25537198370351&lust=65fbb3fd&luwtr=2815429140421504439&mscf=0&mtids=3017800849&n=10&nttp=1&p=baidu&sce=7&sig=0&sr=318&ssp2=1&tpl=baiduCustNativeADImageCarousel&tsf=dtp:0&tu_type=0&u=%2F&uicf=lurecv&urlid=0&eot=1" width="1522" height="730" frameborder="0"></iframe>-->
<!-- 利用iframe嵌入其他内容-->
<!-- <iframe src="./pictures/喜羊羊.jpg" width="1522" height="730" frameborder="0"></iframe>-->
<a href="https://www.taobao.com" target="tb">点我看淘宝</a><br>
<a href="https://www.toutiao.com" target="tb">点我看新闻</a><br>
<form action="https://so.toutiao.com/search" target="tb">
<input type="text" name="keyword">
<input type="submit" value="搜索">
<!-- <button></button>-->
</form>
<iframe name="tb" frameborder="0" width="1522" height="730"></iframe>
</body>
</html>
2.显示结果
