Binean的博客

只有回不去的过往,没有到不了的明天

HTML学习笔记(3) - HTML标签

本系列的博客,源于韩顺平的HTML,CSS,JavaScript系列教程。需要相关教程的可以再博文下方告知博主,欢迎交流学习。

1. 无序列表

  • ul-li unordered list
    标签里面有一个type的属性,该属性可以设置三个值:disc,circle,square。
<ul type="circle">
  <li>传奇</li>
  <li>反恐</li>
  <li>QQ飞车</li>
  </ul>

2. 有序列表

  • ol-li ordered list
    也有type属性,设置显示序号的类型。该属性有
    • 1 数字表示
    • a 小写字母顺序
    • A 大写字母顺序
    • i 小写罗马数字
    • I 大学罗马数字
  <ol type="i">
  <li>传奇</li>
  <li>反恐</li>
  <li>QQ飞车</li>
  </ol>

3. 框架标记

  • frameset / frame
    基本语法:
<frameset cols="按照列的百分比分割" rows="按照行的百分比分割" frameorder = "边框大小">
<frame 属性.. />
</frameset>

注意
使用frame时候就不能再使用body标签了。可以从下面的案例中看出。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>

 <frameset cols="50%,50%">
 <frame src="ex1.html"/>
 <frame src="ex2_1.html"/>
 </frameset>

</html>

frame案例

4. form表单

  • html的表单元素主要用于让用户输入数据,并提交给服务器。
    基本语法:
<form action="url" method="提交方法(get / post), 默认使用的是get">
各种元素[输入框,下拉列表,文本域,密码框]
</form>

案例1:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>登录</title>
 </head>

 <h1>登录界面</h1>
 <body>
 <form action="???" method="get">
  用户名:<input type="text" name="username"/><br/>
  密&nbsp;码:<input type="password" name="pwd"/><br/>
  <input type="submit" value="登录"/>&nbsp;<input type="submit" value="重置"/>
 </form>
 </body>

</html>
  • 表单元素的格式:
<input type=* name=** / >
type = text[文本框],password[密码框],hidden[隐藏框],checkbox[复选框],radio[单选框],reset[重置按钮],submit[提交按钮],image[图片按钮]
name是自己对该表单元素取得名字。
  • action 指定把请求交给哪个页面

-下拉选择

 <select name="biradd">
    <option value="beijing">-----请选择-----</option>
    <option value="beijing">北京</option>
    <option value="xiyatu">西雅图</option>
    <option value="nanjing">南京</option>
  </select>
  • 文本域
 <textarea cols="30" rows="10">
 请在这里输入...
 </textarea>
  • 选择上传文件
 <input type="file" name="myfile"/>请选择文件

综合案例

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>

  <font size="5">请选择你喜欢的运动项目</font><br/>

  <input type="checkbox"/>篮球<br/>
  <input type="checkbox"/>足球<br/>

  <font size="5">性别</font><br/>
  <input type="radio" name="sex"/><br/>
  <input type="radio" name="sex"/><br/>

  出生地:<select name="biradd">
    <option value="beijing">-----请选择-----</option>
    <option value="beijing">北京</option>
    <option value="xiyatu">西雅图</option>
    <option value="nanjing">南京</option>
  </select><br/>
  <textarea cols="30" rows="10">
 请在这里输入...
 </textarea><br/>

 <input type="file" name="myfile"/>请选择文件

 </body>
</html>
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Robin__Chou/article/details/51554735
文章标签: html
个人分类: 【Web 前端】
想对作者说点什么? 我来说一句

html标签啊啊

2018年04月20日 700KB 下载

动态生成html标签

2011年07月20日 681B 下载

html常用标签学习笔记

2018年04月01日 26KB 下载

Pubwin2007网吧加钱工具

2010年02月19日 502KB 下载

html基本语法标签

2010年12月20日 76KB 下载

html标签详解 初学html

2009年07月13日 9KB 下载

没有更多推荐了,返回首页

不良信息举报

HTML学习笔记(3) - HTML标签

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭