HTML实例（四）
实例一：有序列表，无序列表，<dl>，<dt>,<dd>,div块级标签等，实现上面的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html;charset=gb2312"><!--固定写发，指定网页是是用什么格式来解析的-->
<meta name="authoe" content="李强" /><!--authoe:表示作者，叫李强-->
<title>第一个网页文件</title>
<meta name="Description" content="李强的第一个站点"/><!--网页描述-->
<meta name="website" content="wwww.baidu.com"/><!--设置网址-->
<meta name="keywords" content="wbb前端页面"/><!--浏览器搜索的关键字-->
</head>
<body>
<div id="MP3板块"><!--模块标签-->
<h1>MP3排行榜</h1>
<hr/><!--横线-->
<h2>歌曲目录</h2>
<p><strong>第一名：桃花朵朵开</strong></p><!--粗体-->
<p>第二名：死了都要爱</p>
<p>第三名：你是我的小苹果</p>
<hr/>
</div>
<div id="水果排序板块">
<h3>喜欢吃的水果排名</h3>
<ol><!--有序列表-->
<li><em>梨子</em></li><!--斜体表示强调-->
<li>香蕉</li>
<li>葡萄</li>
</ol>
</div>
<div id="旅游线路板块">
<h3>旅游路线精选</h3>
<hr/>
<ul><!--无需标签-->
<li><i>杭州-上海-天津</i></li><!--斜体-->
<li>杭州-南京-上海</li>
<li>杭州-丽江-厦门</li>
</ul>
<hr/>
</div>
<div id="其他板块">
<dl>
<dt>水</dt><!--描述的标题-->
<dd>符号：H<sub>2</sub>O<dd/><!--描述的内容，sub表示上标签-->
<dd>生命之源</dd>
<dt>氧气</dt>
<dd>符号：O<sup>2</sup></dd><!--下标签-->
<dd>生命制服</dd>
<dt>强哥</dt>
<dd>称呼：大家叫我帅哥</dd>
<dd>称呼：<bdo dir="rtl">大家叫我帅哥</bdo></dd><!--表示读取的顺序从那边到那边-->
</dl><!--列表描述标签-->
</div>
<hr/>
<div id="footer">
<a href="http://www.cnblogs.com/insane-Mr-Li/" target="_self">我的博客</a><!--超链接标签，_self表示在自身这个网页打开冲掉之前的那个网页，_blank表示重新打开一个网页-->
©版权所有<!--nbsp空格-->
<p><a href="http://www.cnblogs.com/insane-Mr-Li/" target="_blank"> " <img src="logo.gif" alt="图片不存在" /></a></p><!--给图片加上超链接--> </div> </body>
</html>
实例二：实现乳腺图效果：
分析：主要是表单内容：
1.首先我们这个是一个表单，所以要定义表单提交的地址
2.再就是如上图的那些输入文本框，按钮等。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html;charset=gb2312"><!--固定写发，指定网页是是用什么格式来解析的-->
<meta name="authoe" content="李强" /><!--authoe:表示作者，叫李强-->
<title>第一个网页文件</title>
<meta name="Description" content="李强的第一个站点"/><!--网页描述-->
<meta name="website" content="wwww.baidu.com"/><!--设置网址-->
<meta name="keywords" content="wbb前端页面"/><!--浏览器搜索的关键字-->
</head>
<br>
<br name="regrorm" method="post" action="http://localhost:63342/HTML/webapp/views/table.html?_ijt=it9n0osqth9qfnjgit609fc91s" ><!--表单叫regrorm用post的方法提交到action这个地方去-->
单行文本框<input type="text" name="username" id="username" maxlength="10" readonly="readonly"/></br><!--单行文本框readonly只读-->
<label for="password">密码框</label><input type="password" name="password" id="password" size="5" /></br><!--密码框--><!--label点击这个文本是焦点自动锁定文本框
隐藏域<input type="hidden" name="hidden" id="hidden"/></br><!--隐藏域hidden表示隐藏类型-->
单选按钮</br><input type="radio" name="sex" id="male" checked="checked"/>男</br><!--单选按钮radio为单选-->
<input type="radio" name="sex" id="female" checked="checked"/>女</br><!--单选按钮，当checked="checked"第一个会覆盖掉第一个的默认选项-->
复选框<input type="checkbox" name="hobby" value="1" id="football1" disabled="disabled"/>足球<!--复选框disabled不可用-->
<input type="checkbox" name="hobby" value="2" id="football2" checked="checked"/>篮球<!--复选框checkbox为复选-->
<input type="checkbox" name="hobby" value="3" id="football3"/>网球</br><!--复选框-->
图像域<input type="image" src="sun02.jpg" width="100" height="20px" /></br><!--图像域-->
文件上传域<input type="file" name="file" /></br><!--文件上传域-->
提交按钮<input type="submit" name="submit" value="提交按钮"/></br><!--提交按钮-->
重置按钮<input type="reset" name="submit" value="重置按钮"/></br><!--重置按钮-->
普通按钮<input type="button" name="button" value="普通按钮"/></br><!--普通按钮他只是一个按钮没有其他的额外含义--><!--这个按钮上只能显示的是普通文-->
button提交按钮<button type="submit" name="submit2">提交按钮</button></br><!--可以对文本进行格式化-->
button重置按钮<button type="reset" name="reset2"><b>提交按钮</b></button></br><!--button制作的按钮都比较强大，区别到以后在说-->
button普通提交按钮<button type="button" name="button2" disabled="disabled"><i>提交按钮</i></button></br>
下拉菜单</br>
<select name="city" id="city"><!--用select做下拉选项框-->
<option value="beijing">北京</option><!--当表单提交到服务器的时候，服务器实际上获取的就是value值-->
<option selected="selected" value="shanghai">上海</option><!--selected默认值-->
<option>南京</option>
<option>天津</option>
</select></br>
列表框</br>
<select name="city" id="city2" size="3" multiple="multiple"><!--默认单选，multiple 属性规定可同时选择多个选项，对于 windows：按住 Ctrl 按钮来选择多个选项-->
<option value="beijing">北京</option>
<option selected="selected" value="shanghai">上海</option><!--selected默认值-->
<option>南京</option>
<option>天津</option>
</select></br>
选项组列表框</br>
<select name="city" id="city3" size="6" multiple="multiple"><!--默认单选，-->
<optgroup label="一线城市"><!--分组,<optgroup> 标签经常用于把相关的选项组合在一起。-->
<option value="beijing">北京</option>
<option selected="selected" value="shanghai">上海</option><!--selected默认值-->
</optgroup>
<optgroup label="二线城市"><!--label 属性为选项组规定描述标签。-->
<option>南京</option>
<option>天津</option>
<option>杭州</option>
<option>大连</option>
</optgroup>
</select></br>
多行文本框</br>
<textarea name="content" cols="28" rows="4" readonly="readonly"><!--<textarea> 标签定义一个多行的文本输入控件。-->
1.协议要求很多
2.你别管，同意就行
</textarea><!--cols规定文本区域内可见的列数，rows规定文本区域内可见的行数。--> </form>
</body>
</html>
HTML实例（四）的更多相关文章
- C语言库函数大全及应用实例四
原文:C语言库函数大全及应用实例四 [编程资料]C语言库函数大全及应用实例四 couble fmod (double x, dou ...
- PCIE_DMA实例四：xapp1052在Xilinx 7系列(KC705/VC709)FPGA上的移植
PCIE_DMA实例四:xapp1052在Xilinx 7系列(KC705/VC709)FPGA上的移植 一:前言 这段时间有个朋友加微信请求帮忙调试一块PCIe采集卡.该采集卡使用xilinx xc ...
- jQuery插件实例四：手风琴效果[无动画版]
手风琴效果就是内容的折叠与打开,在这个插件中,使用了三种数据来源:1.直接写在DOM结构中:2.将数据写在配置项中:3.从Ajax()中获取数据.在这一版中,各项的切换没有添加动画效果,在下一版中会是 ...
- mybatis的CRUD实例(四)
接下来我们来实现新增用户功能: 一.新增用户 这里我们使用的sql为:insert into user(username,birthday,sex,address) values ("lwj ...
- python 实例四
https://www.cnblogs.com/evablogs/p/6754981.html 题目:输入某年某月某日,判断这一天是这一年的第几天? 程序分析: 月份天数: 月份 天数 2 平年28天 ...
- Spring Boot 使用IntelliJ IDEA创建一个web开发实例(四)
多环境配置 1. 在springBoot多环境配置文件名需要满足application-{profile}.properties的格式,其中{profile}对应你的环境标识,例如: (1)appli ...
- 126、Java面向对象之引用传递实例四，修改类成员的属性值
01.代码如下: package TIANPAN; class Message { private String info = "此内容无用"; // 定义String类型属性 p ...
- python学习笔记（基础四：模块初识、pyc和PyCodeObject是什么）
一.模块初识(一) 模块,也叫库.库有标准库第三方库. 注意事项:文件名不能和导入的模块名相同 1. sys模块 import sys print(sys.path) #打印环境变量 print(sy ...
- python: DOM 小实例
一.全选 全部取消 反选 全选:选择指定的所有项目. 全部取消: 取消所有选定的项目. 反选: 选择未选定的,之前已选定的则取消. <!DOCTYPE html> <html la ...
- PHP调用MYSQL存储过程实例
PHP调用MYSQL存储过程实例 标签: mysql存储phpsqlquerycmd 2010-09-26 11:10 11552人阅读 评论(3) 收藏 举报 实例一:无参的存储过程$conn = ...
随机推荐
- S 导入值列表浏览器、值列表
先导入值列表浏览器,再导入值列表 一.导出模板 上面为导出模板 二.导入值列表浏览器 下面开始导入EXCEL数据 List Of Values Parent(1).xls List Of Values ...
- wcf将一个服务同时绑定到http和tcp的写法
服务器端:<?xml version="1.0" encoding="utf-8" ?><configuration> <con ...
- smarty if
<{if data}> <input type="submit" value="修改" /> <{else}> <in ...
- .net分布在指定文件夹的web.confgi或者app.config
.Net里面,ConfigurationManager默认读取的是Web.config或者App.config但是,什么都放在这两个文件里面,感觉太多了,也不好管理配置.于是参考了下别人的资料,自己写 ...
- java反射机制学习代码
根据 http://www.iteye.com/topic/137944 文档进行学习 代码如下: package reflectTest; import java.lang.reflect.*; i ...
- 布局xml文件不能预览
原因:xml文件里,有一些值没有设置属性. 如: <LinearLayout android:layout_width="fill_ ...
- kubernetes 1.6 RBAC访问控制
一.简介 之前,Kubernetes中的授权策略主要是ABAC(Attribute-Based Access Control).对于ABAC,Kubernetes在实现上是比较难用的,而且需要Mast ...
- POJ 2396 Budget (有源汇有上下界最大流)
题意:给定一个矩阵的每行的和和每列的和,以及每个格子的限制,让你求出原矩阵. 析:把行看成X,列看成Y,其实就是二分图,然后每个X到每个Y边一条边,然后加一个超级源点和汇点分别向X和Y连边,这样就形成 ...
- Ubuntu再图形登录中以root的身份进入？？？
Ubuntu再图形登录中以root的身份进入??? 这样做的需求,应该就是,可以再图形页面以root的身份进行图形化操作,比较方便更改配置文件. 1. 可以实现,但是不建议这么做,之后会出现一个警告提 ...
- handsontable-developer guide-data binding,data sources
数据绑定: 1.表格中得数据是引用了数据源中的数据:表格中数据改变,数据源中得数据也改变:数据源中得数据改变,通过render方法,表格中的数据也改变: 2.如果想把数据源中的数据和表格中的数据分开: ...