关闭

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

标签: html
670人阅读 评论(0) 收藏 举报
分类:

本系列的博客,源于韩顺平的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>
1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:184990次
    • 积分:3111
    • 等级:
    • 排名:第11805名
    • 原创:108篇
    • 转载:10篇
    • 译文:0篇
    • 评论:96条
    博客专栏
    最新评论