PythonNote02_HTML标签
<!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
PythonNote02_HTML标签的更多相关文章
- a标签点击跳转失效--IE6、7的奇葩bug
一般运用a标签包含img去实现点击图片跳转的功能,这是前端经常要用到的东西. 今天遇到个神奇的bug:如果在img上再包裹一层div,而且div设置了width和height,则图片区域点击时,无任何 ...
- IE6、7下html标签间存在空白符，导致渲染后占用多余空白位置的原因及解决方法
直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...
- 百度MIP页规范详解 —— canonical标签
百度MIP的规范要求必须添加强制性标签canonical,不然MIP校验工具会报错: 强制性标签<link rel="/^(canonical)$/"> 缺失或错误 这 ...
- 【CSS进阶】伪元素的妙用--单标签之美
最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...
- TODO：Laravel 使用blade标签布局页面
TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...
- 最新 去掉 Chrome 新标签页的8个缩略图
chrome的新标签页的8个缩略图实在让人不爽,网上找了一些去掉这个略缩图的方法,其中很多已经失效.不过其中一个插件虽然按照原来的方法已经不能用了,但是稍微变通一下仍然是可以用的(本方法于2017.1 ...
- css-父标签中的子标签默认位置
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- xpath提取多个标签下的text
title: xpath提取多个标签下的text author: 青南 date: 2015-01-17 16:01:07 categories: [Python] tags: [xpath,Pyth ...
- 多个Img标签之间的间隙处理方法
1.多个标签写在一行 <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> ...
随机推荐
- map和reduce 个数的设定 （Hive优化）经典
一. 控制hive任务中的map数: 1. 通常情况下,作业会通过input的目录产生一个或者多个map任务. 主要的决定因素有: input的文件总个数,input的文件大小,集群设置 ...
- java.net.SocketException: No buffer space available 异常
http://stackoverflow.com/questions/10088363/java-net-socketexception-no-buffer-space-available-maxim ...
- android中shape的属性
<shape> <!– 实心 –> <solid android:color=”#ff9d77″/> <!– 渐变 –> <gradient an ...
- GEF入门实例_总结_03_显示菜单和工具栏
一.前言 本文承接上一节: GEF入门实例_总结_02_新建初始RCP空项目 这一节,我们来给我们的插件加上菜单. 二.基础知识 1.action bar.menubar.coolbar 含义 a ...
- 浅学soap--------1
无wsdl文件: Clint.php //客户端 <?php $soap = new SoapClient(null,array('uri'=>'server','location'=&g ...
- 做什么职业，也别做程序员，尤其是Java程序员
千万别做程序员,尤其别做Java这种门槛低,入门快的程序员(别跟我说Java搞精通了也很牛之类的,原因不解释,做5年以上就知道了),程序员本来就是我见过最坑爹的职业了...Java程序员更是,现在满地 ...
- redis实战之事务与持久化
1. 事务描述 (1)什么是事务 事务,就是把一堆事情绑在一起,按顺序的执行,都成功了才算完成,否则恢复之前的样子 事务必须服从ACID原则,ACID原则分别是原子性(atomicity).一致性(c ...
- 仿百度下拉关键词，和关键词的小demo
自己做项目时用到的仿百度下拉关键词 代码: $(function(){ var oTxt = document.getElementById('search_text'); oTxt.onkeyup ...
- (转)在Windows平台上安装Node.js及NPM模块管理
本文转载自:http://www.cnblogs.com/seanlv/archive/2011/11/22/2258716.html 之前9月份的时候我写了一篇关于如何在Windows平台上手工管理 ...
- MySQL 5.6 date 与 string 的转换和比较
我们有张表,表中有一个字段 dpt_date ,SQL 类型为 date,表示离开日期. 我们将 dpt_date 与字符串 ‘2016-03-09’ 进行比较,发现效率低于 dpt_date 转换为 ...