<!DOCTYPE>
<html>
<head>
<meta charset = "utf-8" />
<meta name="Keywords" content="" />
<mata name = "description" content = "" />
<title>复习代码</title>
</head>
<body>
<center> <h1><font color="red">标签练习</font></h1></center>
<hr /> <h2><font color="red"><u><em>复习主要内容：</em></u></font></h2>
<p>
<pre> <font size="5" color="blue">图片、无序列表、有序列表、自定义列表、表单元素之input</font></pre>
</p>
<hr /> <p align="center">
<font size="5" color="blue"><u><strong><i>Do not dwell in the past.</i></strong></u></font>
</p>
<hr /> <center> <!-- img标签的属性 -->
<!-- src:图片的路径 -->
<!-- 属性值：绝对路径、相对路径 -->
<!-- alt：描述图片内容 -->
<!-- width：设定图片的宽度 -->
<!-- height：设定图片的高度 -->
<!-- 注意：如果不给定图片的高度和宽度，那么浏览器会自动计算，但是厚花费时间 -->
<img src="123.jpg" title="哈哈哈" />
<br />
<a href="http://www.dzshike.com/" target="_blank">大足石刻官网链接</a>
</center>
<hr /> <!-- 有序列表 -->
<!-- ol标签的属性 -->
<!-- type：列表提示标号，属性值有 -->
<!-- 1：数字列表排列 -->
<!-- A：大写字母排列 -->
<!-- a：小写字母排列 -->
<!-- i：小写罗马字母排列 -->
<!-- I：大写罗马字母排列 -->
<h2><font size="5" color="red">ol有序列表</font></h2>
<ol type="1">
<li>请计算：3 + 5 = ( )</li>
<ol type="A">
<li>12</li>
<li>13</li>
<li>32</li>
<li>8</li>
</ol>
<br>
<li>中国最年轻的直辖市是( )。</li>
<ol type="A">
<li>北京</li>
<li>天津</li>
<li>上海</li>
<li>重庆</li>
</ol>
</ol>
<hr> <!-- 无序列表 -->
<!-- ul标签的属性 -->
<!-- type：序列提示标号，属性值如下 -->
<!-- disc：小黑圆点(默认值) -->
<!-- square：实心的方块 -->
<!-- circle：空心圆 -->
<h2><font size="5" color="red">ul无序列表</font></h2>
<div>中国的直辖市有：</div>
<ul type="circle">
<li>北京</li>
<li>天津</li>
<li>上海</li>
<li>重庆</li>
</ul>
<hr> <!-- 自定义列表 -->
<h2><font size="5" color="red">dl自定义列表</font></h2>
<dl>
<dt>姓名：王杨*</dt>
<dd>Python：98</dd>
<dd>Java：99</dd>
<dd>C:100</dd>
<hr size="4" color="red" width="13%" align="left" />
<dt>姓名：王杨*</dt>
<dd>数学：98</dd>
<dd>语文：99</dd>
<dd>英语：100</dd>
</dl>
<hr> <h2><font size="5" color="red">form表单</font></h2>
<form> <!-- input标签的属性 -->
<!-- type：设置表单的控键类型，属性值如下 -->
<!-- text:文本输入框 -->
<!-- password：密码输入框 -->
<!-- radio：不可后悔按钮、可实现排斥的按钮 -->
<!-- checkbox：可后悔按钮、多选按钮 -->
<!-- submit：提交按钮 -->
<!-- name:这个表单控件的名字,没有name属性是不能进行提交的 -->
<!-- checked：默认这个表单控件被选中 -->
<!-- value：保存这个表单控件的值，若果不写这个属性，那么当这个控件被选中后提交的结果只显示这个控件被选中啦，不会显示这个表单的值 -->
<!-- placeholder：输入提示语 -->
<!-- maxlength：允许输入的最大值 -->
账号：<input type="text" name="username" placeholder="请输入账号" maxlength="12" />
<br />
<br />
密码：<input type="password" name="userpassword" placeholder="请输入密码" maxlength="16" />
<hr> <!-- 利用input标签实现不可后悔选择 -->
<font size="3" color="blue"><strong>性别：</strong></font>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender">你懂的
<br> <!-- 利用input标签实现单项选择 -->
<font size="3" color="blue"><strong>爱好：</strong></font>
<input type="radio" name="basketball">篮球
<input type="radio" name="badminton">羽毛球
<input type="radio" name="table tennis">乒乓球
<br> <!-- 利用input实现可后悔选择 -->
<font size="3" color="blue"><strong>考试科目：</strong></font>
<input type="checkbox" name="information">信息论与编码
<input type="checkbox" name="Python" checked="checked" value="123">Python
<input type="checkbox" name="Java" checked="checked">Java
<br> <!-- 利用input标签实现提交功能 -->
<!-- value属性的默认属性值是 “提交” -->
<input type="submit" name="" value="提交"> </form>
</body>
</html>
复习代码01
<!DOCTYPE>
<html>
<head>
<meta charset = "utf-8" />
<meta name="Keywords" content="" />
<mata name = "description" content = "" />
<title>第二节</title>
<style> /*margin : 设置元素外边框的属性*/
*{margin: 0; padding: 2px;}
h1{color: red;text-align: center;}
p{text-align: center;color: blue;font-size: 30;text-decoration: underline;}
hr{margin: 5px 0px 5px 0px} /*翻译：设置有序列表的外边框：上0右30下0左0*/
ol{margin:0px 0px 0px 60px} /*如果不设置外边框，那么序号就看不到啦，因为默认已经将外边框设置为0px*/ ul{margin: 0px 0px 0px 20px}
dl{margin: 0px 0px 0px 20px} .zd{color: red;text-decoration:underline;font-size: 20}
</style>
</head>
<body>
<h1>第二节复习</h1>
<hr size="5" color="red"/> <p>Do not dwell in the past.</p>
<hr> <h2>主要内容</h2>
<ol style="1">
<li>img标签</li>
<li>有序列表</li>
<li>无序列表</li>
<li>自定义列表</li>
<li>form表单之input标签</li>
</ol>
<hr /> <h2>1.图片标签 --> img</h2>
<ol type="A">
<li>格式</li>
<ul>
<li class="zd"><img src="123.jpg" alt=""></font></li>
</ul>
<li>属性</li>
<ul>
<li class="zd">src:图片的路径 --> 绝对路径、相对路径</li>
<li>width：设定图片的宽度 --> Xpx</li>
<li>height：设定图片的高度 --> Xpx</li>
<li>alt：描述图片内容</li>
<li>注意：如果不给定图片的高度和宽度，那么浏览器会自动计算，但是要花费时间</li>
</ul>
<li>效果展示</li>
<img src="123.jpg" alt="">
</ol>
<hr /> <h2>2.有序标签 --> ol</h2>
<ol type="A">
<li>格式</li>
<ul>
<li class="zd">
<ol><br />
<li></li><br />
</ol></li>
</ul>
<li>属性</li>
<ul>
<li>type:列表提示标号 --> 1、A、a、i、I</li>
</ul>
<li>效果展示/li>
<ol type="i">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol> </ol>
<hr /> <h2>3.无序标签 --> ul标签</h2>
<ol type="A">
<li>格式</li>
<ul>
<li class="zd">
<ul><br />
<li>1</li><br />
<li>2</li><br/>
<li>3</li><br />
</ul></li>
</ul>
<li>属性</li>
<ul>
<li>type:序列提示标号 --> disc、square、circle</li>
</ul>
<li>效果展示</li>
<ul type="square">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</ol>
<hr /> <h2>4.自定义列表 --> dl标签</h2>
<ol type="A">
<li>格式</li>
<ul>
<li class="zd">
<dl><br />
<dt>姓名：王杨*</dt><br />
<dd>Python：98</dd><br />
<dd>Java：99</dd><br />
<dd>C:100</dd><br />
</dl>
</li>
</ul>
<li>效果展示</li>
<dl>
<dt>姓名：王杨*</dt>
<dd>Python：98</dd>
<dd>Java：99</dd>
<dd>C:100</dd>
</dl>
</ol>
<hr /> <h2>5.form表单之input标签 --> input标签</h2>
<ol type="A">
<li>格式</li>
<ul>
<li class="zd">
<form action=""><br />
<input type="text" /><br />
</form>
</li>
</ul>
<li>属性</li>
<ul>
<li>type：设置表单的控键类型 --> text、password、radio、checkbox、submit</li>
<li>name：这个input元素的名字，没有name属性是不能够进行提交的</li>
<li>checked：默认这个表单控件被选中 --> checked</li>
<li>value：保存这个表单控件的值，若果不写这个属性，那么当这个控件被选中后提交的结果只显示这个控件被选中啦，不会显示这个表单的值</li>
<li>placeholder：输入提示语 --> 提示语</li>
<li>maxlength：允许输入的最大长度</li>
</ul> <li>效果展示</li>
<form action="">
用户名：<input type="text" placeholder="请输入用户名" name="username" /><br /><br />
密码：<input type="password" placeholder="请输入密码" name="password" />
<br /><br />
爱好：
<input type="checkbox" name="basketball" value="篮球" />篮球
<input type="checkbox" name="rollerskating" checked="checked" value="轮滑" />轮滑
<br />
性别：
<input type="radio" name="gender" value="男" id="男" /><label for="男">男</label>
<input type="radio" name="gender" value="女" id="女" /><label for="女">女</label>
<br />
提交：
<input type="submit" name="submit" value="Yes" />
</form> </ol>
<hr />
</body>
</html>
复习代码02