1.小说排行榜案例
<body>
<table align="center" border="1" cellspacing="0" width="500">
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>2</td>
<td>盗墓笔记</td>
<td><img src="up.jpg"></td>
<td>124</td>
<td>675342</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
</table>
</body>
</html>
2.表格标签
thead标签指表格的头部区域;tbody标签指表格的主体区域;
3.合并单元格
跨行合并:rowspan=“合并单元格的个数”,最上侧单元格为目标单元格,写合并代码;
跨列合并:colspan=“合并单元格的个数”,最左侧单元格为目标单元格,写合并代码;
<body>
<table width="500" height="249" border="1" cellspacing="0" >
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
3.列表标签
表格是用来显示数据的,列表是用来布局的
列表分为三大类:无序列表、有序列表、自定义列表
-无序列表
- 无序列表各个列表项之间没有顺序级别之分,是并列的;
- ul标签中只能嵌套li标签;
- li标签相当于一个容器,可以容纳所有元素;
- 无序列表会有带有自己的样式属性,实际应用中用CSS。
<body>
<h4>您喜欢的食物?</h4>
<ul>
<li>榴莲</li>
<li>苹果</li>
<li>香蕉</li>
</ul>
</body>
</html>
-
有序列表
ol标签与li标签; -
自定义列表
常用于对术语或名词进行解释和描述;
dl标签用于定义描述列表,与dt标签(定义项目名字)和dd标签(描述每一个项目名字)一起使用;
dl标签里面只能包含dt标签和dd标签。
<body>
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
</dl>
</body>
</html>
4.表单标签
表单是为了收集用户信息;
一个完整的表单由三部分组成:表单域、表单控件(表单元素)、提示信息;
-
表单域:包含表单元素的区域
form标签用于定义表单域,实现用户信息的收集和传递;
form会把它范围内的表单元素信息提交给服务器; -
表单元素:允许用户在表单中输入或选择的内容控件
input输入表单元素;select下拉表单元素;textarea文本域元素(input标签为单标签);
name和value是每个表单元素都有的属性值,主要给后台人员使用;
name表单元素的名字,要求单选按钮和复选框要有相同的name值
checked属性主要针对单选按钮和复选框,主要作用是一打开页面,就可以默认选中某个表单元素
<body>
<form>
<!--text 文本框 用户可以在里面输入任何文字-->>
用户名:<input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
<!--password 密码框 用户看不见输入的密码-->>
密码:<input type="password"> <br>
<!--radio 单选按钮 可以实现多选一-->>
<!--name是表单元素名字,这里性别单元按钮必须有相同的名字name,才可以实现单选一-->>
<!--单选按钮和复选框可以设置checked属性,当页面打开的时候可以默认选中这个按钮-->>
性别:男 <input type="radio" name="sex" value="男" checked="checked"> 女 <input type="radio" name="sex" value="女"> <br>
<!--checkbox 复选框 可以实现多选-->>
爱好:吃饭 <input type="checkbox" name="hobby"> 听歌 <input type="checkbox" name="hobby"> 睡觉 <input type="checkbox" name="hobby">
</form>
</body>
</html>