==============
============
============
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>今日小说排行榜</title>
<style>
/*选择器 { 属性: 值; } 选择器 -- 选择标签的*/
th {
color: skyblue;
}
td {
font-size: 14px; /* 让所有的td 都改为 14*/
}
tr {
height: 30px;
}
</style>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="550" align="center">
<caption> <h3>小说排行榜</h3> </caption>
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>
<img src="images/down.jpg" />
</td>
<td>321</td>
<td>112</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>
<img src="images/down.jpg" />
</td>
<td>321</td>
<td>112</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>
<img src="images/down.jpg" />
</td>
<td>321</td>
<td>112</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>
<img src="images/down.jpg" />
</td>
<td>321</td>
<td>112</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>
<img src="images/down.jpg" />
</td>
<td>321</td>
<td>112</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>
<img src="images/down.jpg" />
</td>
<td>321</td>
<td>112</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>
<img src="images/down.jpg" />
</td>
<td>321</td>
<td>112</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
效果:
==============
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table width="400" height="100" border="1">
<tr>
<td>123</td>
<td>abc</td>
<td>abc</td>
</tr>
<tr>
<td colspan="2">123</td>
<td>测试</td>
</tr>
<tr>
<td>123</td>
<td>abc</td>
<td>abc</td>
</tr>
</table>
1. 先确认跨列合并 colspan
2. 先上后下 先左右后
3. 删除的个数
<table width="400" height="100" border="1">
<tr>
<td>123</td>
<td>abc</td>
<td rowspan="3">abc</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td>abc</td>
</tr>
</table>
1. 先确认跨行合并 rowspan
2. 先上后下 先左右后
3. 删除的个数
</body>
</html>
效果:
================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body> <!-- pink 御用 拼克 -->
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
<caption><h4 style="color: pink; font-size:25px;">青春不常在,抓紧谈恋爱</h4></caption>
<tr height="60">
<td>所在地区</td>
<td><input type="text" value="北京" style="color: #ccc;" /></td>
</tr>
<tr height="60">
<td>用户名</td>
<td><input type="text" value="andy" /></td>
</tr>
<tr height="60">
<td>
<label for="suibian">密码</label>
</td>
<td><input type="password" value="110120" maxlength="6" id="suibian" /></td>
</tr>
<!-- 一下是 年龄 -->
<tr height="60">
<td>年龄</td>
<td>
<select name="" id="">
<option value="">选择年份</option> <!-- option选项 -->
<option value="">1990</option> <!-- option选项 -->
<option value="">1991</option> <!-- option选项 -->
<option value="">1992</option> <!-- option选项 -->
<option value="">1993</option> <!-- option选项 -->
<option value="">1994</option> <!-- option选项 -->
</select>
<select name="" id="">
<option value="">选择月份</option> <!-- option选项 -->
<option value="">1月份</option> <!-- option选项 -->
<option value="">2月份</option> <!-- option选项 -->
<option value="">3月份</option> <!-- option选项 -->
<option value="">4月份</option> <!-- option选项 -->
<option value="">5月份</option> <!-- option选项 -->
</select>
</td>
</tr>
<!-- 一下是 籍贯 -->
<tr height="60">
<td>年龄</td>
<td>
<select name="" id="">
<option value="">籍贯</option> <!-- option选项 -->
<option value="" selected="selected">北京</option> <!-- option选项 -->
<option value="">哈尔滨</option> <!-- option选项 -->
<option value="">青岛</option> <!-- option选项 -->
<option value="">大连</option> <!-- option选项 -->
</select>
</td>
</tr>
<tr height="60">
<td>性别</td>
<td style="color: blue;">
男 <input type="radio" name="sex"/>
女 <input type="radio" name="sex" checked="checked" />
人妖 <input type="radio" name="sex"/>
</td>
</tr>
<tr>
<td>喜欢的类型</td>
<td>
妩媚 <input type="checkbox" name="love">
气质 <input type="checkbox" name="love">
小鲜肉 <input type="checkbox" name="love">
鹿晗 <input type="checkbox" name="love" checked="checked" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="注册">
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="image" src="btn.png" />
</td>
</tr>
<tr>
<td>上传头像</td>
<td>
<input type="file" >
</td>
</tr>
<tr>
<td>给我留言</td>
<td>
<textarea name="" id="" cols="50" rows="10" style="color: #ccc;">不支持富文本
</textarea>
</td>
</tr>
</table>
</body>
</html>
效果:
================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<label> 用户名:<input type="text"> </label>
<hr>
<label for="pwd">
123123123
</label>
用户名:<input type="text">
密码:<input type="password" id="pwd">
</body>
</html>
效果:
===============
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="" method="post">
用户名: <input type="text" name="yonghuming" value="用户名"> <br /> <br />
密 码: <input type="password" name="mima1"><br /> <br />
密 码: <input type="password" name="mima2"><br /> <br />
性别: <input type="radio" name="sex">
<input type="submit" value="提交所填">
<input type="reset" value="重新填写">
</form>
</body>
</html>
效果:
get可见地址栏信息
post匿名提交
======================
========================
=============
=========
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h4 {
color: deeppink;
}
p {
color: #036;
}
h3 {
color: green;
}
div {
color: orange;
}
</style>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h3>忆江南(1)</h3>
<div>唐.白居易</div>
<p>江南好,风景旧曾谙。(2) 日出江花红胜火,春来江水绿如蓝,(3) 能不忆江南。</p>
<h4>作者介绍</h4>
<p>白居易(772-846) ,字乐天,太原(今属山西)人。唐德宗朝进士,元和三年(808)拜左拾遗,后贬江州(今属江西)司马,移忠州(今属四川)刺史,又为苏州(今属江苏)、同州(今属陕西大荔)刺史。晚居洛阳,自号醉吟先生、香山居士。其诗政治倾向鲜明,重讽喻,尚坦易,为中唐大家。也是早期词人中的佼佼者,所作对后世影响甚大。</p>
<h4>注释</h4>
<p>
(1)据《乐府杂录》,此词又名《谢秋娘》,系唐李德裕为亡姬谢秋娘作。又名《望江南》、《梦江南》等。分单调、双调两体。单调二十七字,双凋五十四字,皆平韵。(2)谙(音安):熟悉。(3)蓝:蓝草,其叶可制青绿染料。
</p>
<h4>品评</h4>
<p>此词写江南春色,首句“江南好”,以一个既浅切又圆活的“好”字,摄尽江南春色的种种佳处,而作者的赞颂之意与向往之情也尽寓其中。同时,唯因“好”之已甚,方能“忆”之不休,因此,此句又已暗逗结句“能不忆江南”,并与之相关阖。次句“风景旧曾谙”,点明江南风景之“好”,并非得之传闻,而是作者出牧杭州时的亲身体验与亲身感受。这就既落实了“好”字,又照应了“忆”字,不失为勾通一篇意脉的精彩笔墨。三、四两句对江南之“好”进 行形象化的演绎,突出渲染江花、江水红绿相映的明艳色彩,给人以光彩夺目的强烈印象。其中,既有同色间的相互烘托,又有异色间的相互映衬,充分显示了作者善于著色的技巧。篇末,以“能不忆江南”收束全词,既托出身在洛阳的作者对江南春色的无限赞叹与怀念,又造成一种悠远而又深长的韵味,把读者带入余情摇漾的境界中。</p>
</body>
</html>
效果:
===========
============
============
==================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style> /*千万别忘了它*/
span { /*标签选择器 让所有的span 都变成 150 */
font-size: 150px;
}
.g {
color: skyblue;
}
.o {
color: red;
}
.oo {
color: orange;
}
.l {
color: green;
}
/* 类选择器 可以选择 一个 或者 多个 标签*/
</style>
</head>
<body>
<span class="g">G</span>
<span class="o">o</span>
<span class="oo">o</span>
<span class="g">g</span>
<span class="l">l</span>
<span class="o">e</span>
<div class="nav"></div> <!-- 导航 我们习惯性的约定 -->
<div class="banner"></div> <!-- 导航 我们习惯性的约定 -->
</body>
</html>
效果:
总结: