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>