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

时间：2022-02-05 08:35:29

本系列的博客，源于韩顺平的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>
标签：

相关文章