关闭

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

标签: html
730人阅读 评论(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网站的观点或立场

html学习笔记(1)

1、html:超文本标记语言,标记:就是用来描述网页内容的一些特定符号,不是编程语言,而是一种描述性的标记语言。 2、制作html网页文件     *** 裸奔(只有内容,没有修饰)      a、新建一个记事本文件,将他重命名 ...
  • hanbo622
  • hanbo622
  • 2015-04-12 17:57
  • 4410

HTML, CSS学习笔记(完整版)

第一章 div布局 前几课内容 .htm是早期的后缀,因为那时只能支持长度为3的后缀,因此html与htm是一样的。 shtml是服务器先处理然后再交给浏览器处理   #HTML小知识#之#XHTML与HTML的区别#XHTML是更严谨更纯净的 HTML 版本。XHTML目标是取...
  • u011925500
  • u011925500
  • 2014-10-02 00:28
  • 4439

HTML/CSS基础笔记一

1. HTML/CSS介绍 HTML和CSS的关系 学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的: 1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。...
  • zln99
  • zln99
  • 2016-08-20 14:37
  • 1210

HTML学习小结之HTML标签

1.文档结构标签  ◎ :标识文档的开始和结束  ◎ :标识文档的头部区域  ◎ :标识文档的主体区域 其中头部区域在页面中不可见而主体区域可见 示例1: 文档结构标签 网页正文写在这里 2.文本格式标签 主要标识文本区块并附带显示格式 ...
  • tomorrowtodie
  • tomorrowtodie
  • 2016-09-13 21:15
  • 683

Html学习笔记(4)-Html标签(3)

Html学习笔记(4)-Html标签(3)标签(空格分隔): html primer web
  • SkyeyesXY
  • SkyeyesXY
  • 2016-03-09 19:29
  • 171

Html学习笔记(3)-Html标签(2)

Html学习笔记(3)-Html标签(2)标签(空格分隔): html 标签 primer web
  • SkyeyesXY
  • SkyeyesXY
  • 2016-03-09 19:30
  • 134

HTML标签学习3

HTML标签学习3 1.meta标签 2.link标签 3.表格table标签 <!-- 编码格式 charset:utf-8通用字符集,一般支持大部分的国家语言。 --> --> ...
  • AnyBisks
  • AnyBisks
  • 2017-11-29 16:24
  • 22

HTML笔记——小TIP和格式问题

根据w3school整理 HTML 水平线  标签在 HTML 页面中创建水平线。 hr 元素可用于分隔内容。 提示:使用水平线 ( 标签) 来分隔文章中的小节是一个办法(但并不是唯一的办法)。 HTML...
  • u014694759
  • u014694759
  • 2014-04-13 21:02
  • 717

前端html与css学习笔记总结篇(超详细)

第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师web网站架构师自己创业转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才结合最新的html5抢占移动端的市场自己创业做老板随着互联网的普及web开发成为企业的宠儿和核心 ...
  • qq_36368586
  • qq_36368586
  • 2016-11-20 16:53
  • 3821

很实用的html meta标签实现页面跳转

就算你是有很多年开发经验的web开发工程师,有着很多web开发经验,对于先进的web开发技术有着很深刻的研究,然而你却忽略了那些最最基础的东西!现在我来问你,你是否对html所有的标签都能熟练的使用呢?是否能恰当的使用每个html标签以达到最优化的效果呢?下面崔世瑞来教你一个被很多资深web开发工程...
  • yuzhuoweb
  • yuzhuoweb
  • 2015-09-15 11:59
  • 3207
    个人资料
    • 访问:218888次
    • 积分:3451
    • 等级:
    • 排名:第11241名
    • 原创:108篇
    • 转载:10篇
    • 译文:0篇
    • 评论:103条
    博客专栏
    最新评论