<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2018年5月8日整体练习html标签、表单、选择器、字体样式等内容</title>
<style type="text/css">
body {
font-family: "微软雅黑";
/*css内部样式*/
}
caption {
color: cadetblue;
}
h3 { /*标签选择器*/
color: green;
}
tr{
text-align: center;
}
</style>
<link rel="stylesheet" type="text/css" href="css/css外联样式初学.css" />
<!--css外部样式href：定义所连接外部样式表的url，可以是相对路径，也可以是绝对路径。
type：定义所连接文档的类型，在这里需要制定为text/css，表示链接的外部文件css样式表。
rel：定位当前文档与被链接文档的关系，在这里需要制定为stylesheet，表示被链接的文档是一个样式表文件。-->
</head>
<body>
<h1 id="置顶" style="color: red;">目录</h1>
<!--css行内样式也叫内联样式-->
<!--一级标题-->
<hr />
<ul>
<!--无需列表标签-->
<li>
<!--li标签里面可以容纳任何元素-->
<h2>标签练习</h2>
</li>
<li>
<h2>表单练习</h2>
</li>
<li>
<h2>选择器练习</h2>
</li>
<li>
<h2>字体样式练习</h2>
</li>
</ul>
<h3>标签练习</h3>
<ol>
<!--有序列表标签-->
<li>无序列表标签</li>
<li>有序列表标签</li>
<li>自定义列表标签</li>
</ol>
<dl>
<!--自定义列表，dt代表了上一级的名词，dd主要基于对dt上一级的解释，有一点层级关系，在电商类网站最下面一般有这种语法例子。-->
<dt>杭州</dt>
<dd>西湖区</dd>
<dd>余杭区</dd>
<dd>拱墅区</dd>
<dd>滨江区</dd>
<dd>萧山区</dd>
</dl>
<hr />
<h3>图片标签</h3>
<img src="img/陈黔黔2.png" alt="代替显示文档" / width="200" border="3"> <br />
<!--正常图片显示，设置宽度、边框像素-->
<img src="img/陈孚.png" title="提示信息文档" width="200" border="3" />
<!--title是鼠标放到图片上悬浮显示的提示性文字-->
<h3>链接标签</h3>
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="http://www.taobao.com" target="_blank">淘宝</a>
<a href="http://www.sina.com" target="_blank">新浪</a> <br />
<div>程</div>
<!--div是一个盒子，把不同内容隔开-->
<div>陈</div>
<div>陈</div>
<div>刁</div>
<span>我</span><span>是</span><span>好</span><span>人</span>
<!--span是可以把同一行内容按需要分开，进行定制化赋予样式-->
<hr />
<h3>表格标签</h3>
<table align="center" width="500" height="200" border="1" cellspacing="0" cellpadding="0">
<caption>家庭成员表格信息</caption>
<!--表格标题标签，作为一个表格的标题说明-->
<!--表格的边框、单元格间距，单元格内容与边框间距默认参数为0-->
<tr height="35">
<!--th代表表头，表头默认会加粗字体并居中-->
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>籍贯</th>
<th>身高</th>
<th colspan="2">体重</th>
<!--跨列合并-->
</tr>
<tr height="35">
<!--tr代表的是行，td代表的是行内的单元格，表格没有列，只有行，一行有多少个单元格就代表有多少列-->
<td>程</td>
<td>男</td>
<td>28</td>
<td>湖北</td>
<td>177</td>
<td>140</td>
<td>合并1</td>
</tr>
<tr height="35">
<td>陈</td>
<td>男</td>
<td>29</td>
<td>杭州</td>
<td>170</td>
<td>170</td>
<td>合并2</td>
</tr>
<tr height="35">
<td>陈</td>
<td>女</td>
<td>26</td>
<td>杭州</td>
<td>160</td>
<td>90</td>
<td rowspan="2">合并3</td>
<!--跨行合并-->
</tr>
<tr height="35">
<td>刁</td>
<td>女</td>
<td>26</td>
<td>杭州</td>
<td>150</td>
<td>100</td>
</tr>
</table>
<hr />
<h3>表单标签</h3>
<form action="" method="get">
<!--form标签是定义表单域，表单域里有很多表单控件组成，这样提交表单的时候能够把所有表单控件一起提交，action是将表单域提交到哪里，method是提交方式，一般用的多是post，get会在地址栏显示用户名密码信息不安全-->
<table width="500" align="center" border="0" cellspacing="0" cellpadding="0">
<caption>注册信息填写页面</caption>
<tr height="35">
<td>
<label for="用户名">用户名</label>
<!--label标签把绑定的表单控件获得焦点，for是把label与哪个表单进行绑定，绑定后，在需要获取焦点的表单控件中，把id名字写成被绑定的表单控件的名字-->
</td>
<td>
<input type="text" name="username" id="用户名" value="" />
</td>
</tr>
<tr height="35">
<td>
<label for="密码">密码</label>
</td>
<td>
<input type="password" name="pswd" id="密码" value="" />
</td>
</tr>
<tr height="35">
<td>性别</td>
<td>
<!--涉及选择的时候，要把选择的内容当做一个组，给这个选项组设置一个name，这样就不会出现多选-->
<input type="radio" name="sex" id="" value="" />男
<input type="radio" name="sex" id="" value="" />女
</td>
<tr>
<td>生日</td>
<td>
<select name="">
<option value="">1990</option>
<option value="">1991</option>
<option value="" selected="selected">1992</option>
<!--下拉框默认选择谁，在谁那里设置select属性-->
<option value="">1993</option>
<option value="">1994</option>
<option value="">1995</option>
<option value="">1996</option>
</select>
</td>
</tr>
</tr>
<tr height="35">
<td>所在地</td>
<td>
<select name="">
<option value="">杭州</option>
<option value="">嘉兴</option>
<option value="">绍兴</option>
<option value="">湖州</option>
<option value="" selected="selected">义乌</option>
</select>
</td>
</tr>
<tr height="35">
<td>兴趣爱好</td>
<td>
<input type="checkbox" name="love" id="love" value="" />篮球
<input type="checkbox" name="love" id="love" value="" />足球
<input type="checkbox" name="love" id="love" value="" />台球
<input type="checkbox" name="love" id="love" value="" />羽毛球
<input type="checkbox" name="love" id="love" value="" />乒乓球
</td>
</tr>
<tr height="35">
<td>上传照片</td>
<td>
<input type="file" name="" id="" value="" />
</td>
</tr>
<tr height="35">
<td>自我介绍</td>
<td>
<textarea name="" rows="10" cols="30">介绍吧……</textarea>
<!--多行文本框写很多内容，要设置下文本框可输入的行数和列数-->
</td>
</tr>
<tr height="35">
<td></td>
<td>
<input type="submit" name="" id="" value="提交" />
<input type="reset" name="" id="" value="重置" />
</td>
</tr>
<tr height="35">
<td></td>
<td>
<input type="image" name="" id="" value="" src="img/免费注册.png" />
</td>
</tr>
</table>
</form>
<h3>四大名著</h3>
<h4>1、水浒传</h4>
<p class="cfy">水浒传是中国古代四大名著之一，其中讲述了农民起义的故事</p>
<h4 class="cfy">2、三国演义</h4>
<h4>3、西游记</h4>
<h4>4、红楼梦</h4>
<a href="#置顶">返回顶部</a>
<!--这里是锚点链接，点击此处可返回顶部，在这里设置好锚点id，在需要置顶返回的标签里填写id名-->
</body>
</html>