HTML学习笔记《二》 ----HTML部分标签应用
HTML 部分标签应用
一、HTML中的注释、标签语法以及颜色表示方式
1.HTML中注释： <!-- .... -->
注释的目的：1. 辅助说明 2.代码调试（不同编程语言，注释方式略有差异）
2. HTML标签（标记）的语法： 标签是由"<"和">"括起来
双标签：<标签名>....</标签名>
单标签：<标签名/>
3. HTML中的颜色：可以是颜色单词：red/blue/green/yellow...
还可以是：#000000 --- #ffffff
十六进制：0123456789abcdef
其中前两位表示红色，中间两位绿色，后两位表示蓝色。
二、HTML的一些标签实例应用
1.图像热区绘制
热区绘制的步骤：
1.img标签引入一张图片，注意，图像需要时原大小
2.给img标签一个usemap属性，使用一个地图区域
3.然后使用map定义一块地图区域，注意，map需要给定id
4.使用area定义一个图形的图区
<!DOCTYPE html>
<html>
<head>
<title>图像热区绘制</title>
<meta charset="utf-8"/>
</head>
<body>
<h1>图像热区绘制</h1>
<!--
热区绘制的步骤：
1.img标签引入一张图片，注意，图像需要时原大小
2.给img标签一个usemap属性，使用一个地图区域
3.然后使用map定义一块地图区域，注意，map需要给定id
4.使用area定义一个图形的图区
-->
<img src="./5.jpg" usemap="#meinv"/>
<map id="meinv">
<!-- <area shape="rect" coords="260,180,461,373" onclick="alert('你点到我了')"/> -->
<area shape="circ" coords="332,278,130" onclick="alert('点这里！')"/>
</map>
</body>
</html>
图像热区绘制
2.HTML当中的多媒体标签
多媒体标签：audio video
属性： 值：
src ： 路径 引入音频的路径
controls ： controls 没有控制条多媒体是没有办法播放的
autoplay： autoplay 当打开网页时自动播放音频
资源标签：source
可以使用该标签引入多媒体资源
<!DOCTYPE html>
<html>
<head>
<title>HTML当中的媒体标签</title>
<meta charset="utf-8"/>
</head>
<body> <!--音频标签 audio-->
<audio controls src="./wukong1.mp3" autoplay ></audio> <!--添加多个音频文件-->
<audio controls >
<source src="./wukong1.mp3" />
<source src="./sxgn.mp3" />
音频文件无法正常加载
</audio><br/> <!--
视频标签：video
-->
<video width="500" controls src="guichuideng.mp4" poster="./90.jpg" ></video> <!--添加多个视频文件-->
<video controls >
<source src="./guichuideng1.mp4"/>
<source src="./chengpian.mp4"/>
视频文件无法正常加载
</video> <!--引入一个外部插件-->
<embed src="haowan.swf" />
</body>
</html>
HTML当中的媒体标签
3.HTML当中的表格
<!DOCTYPE html>
<html>
<head>
<title>HTML当中的表格</title>
<meta charset="utf-8"/>
</head>
<body>
<h1>HTML当中的表格</h1>
<!--
table表格：
属性： 值： 含义：
border: 像素值(px) 设置表格边框粗细的
width: 像素值(px) 设置表格的宽度
height: 像素值(px) 设置表格的高度
cellspacing： 像素值(px) 设置单元格和单元格之间的间距
cellpadding： 像素值(px) 设置单元格中的值和单元格边框之间的间距 table中的标签： caption标签：标题标签 th标签：表头标签(字体加粗，默认居中) tr标签：表格中的一行
属性： 值：
align： 对齐方式(left、center、right) td标签：表格中的一个单元格
属性： 值：
rowspan： 合并行
colspan： 合并列
align： 对齐方式(left、center、right) 打印时可能会用到的标签
<thead></thead> 表头
<tbody></tbody> 表体
<tfoot></tfoot> 表脚
-->
<table border="1" width="500" cellspacing="0" cellpadding="10">
<caption>世界的，亚洲的，日本的人民艺术家</caption>
<thead>
<tr>
<th>排名</th>
<th>姓名</th>
<th>职业</th>
<th>身高</th>
</tr>
</thead>
<tfoot>
<tr align="center">
<td colspan="2"></td>
<td>平均身高</td>
<td>162</td>
</tr>
</tfoot>
<tbody>
<tr align="center">
<td rowspan="2">1</td>
<td>苍老师</td>
<td>php</td>
<td>160</td>
</tr>
<tr align="center">
<td>波多老师</td>
<td>php</td>
<td>163</td>
</tr>
<tr align="center">
<td>3</td>
<td>吉泽老师</td>
<td>php</td>
<td>157</td>
</tr>
<tr align="center">
<td>4</td>
<td>海波老师</td>
<td>php高级</td>
<td>180</td>
</tr>
</tbody>
</table>
</body>
</html>
HTML当中的表格
4.HTML当中的form表单
1. <form></form> --表单标签
form标签常用属性：
*action属性:提交的目标地址(URL)
*method属性:提交方式:get(默认)和post
get方式是URL地址栏可见,长度受限制(IE2k 火狐8k),相对不安全.
post方式是URL地址不可见,长度不受限制,相对安全.
enctype:提交类型
target: 在何处打开目标 URL。
name:属性为表单起个名字.HTML5不支持。用 id 代替。
2. <input> 表单项标签input定义输入字段，用户可在其中输入数据。
如：<input type="text" name="username">
在 HTML 5 中，type 属性有很多新的值。
值如下:
text:单行文本框
password:密码输入框
checkbox:多选框 注意要提供value值
radio:单选框 注意要提供value值
file:文件上传选择框
button:普通按钮
submit:提交按钮
image:图片提交按钮
reset:重置按钮, 还原到开始(第一次打开时)的效果
hidden:主表单隐藏域,要是和表单一块提交的信息,但是不需要用户修改
*name属性:表单项名,用于存储内容值的
*value属性:输入的值(默认指定值)
size属性:输入框的宽度值
maxlength属性:输入框的输入内容的最大长度
readonly属性:对输入框只读属性
*disabled属性:禁用属性
*checked属性:对选择框指定默认选项
accesskey属性:指定快捷键(不常用) (IE:alt+键 火狐:alt+shift+键)
tabindex属性:通过数字指定tab键的切换顺序(不常用)
src和alt是为图片按钮设置的
注意：reset重置按钮是将表单数据恢复到第一次打开时的状态，并不是清空
image图片按钮，默认具有提交表单功能。
<!DOCTYPE html>
<html>
<head>
<title>HTML5当中的form表单中的type属性</title>
<meta charset="utf-8"/> </head>
<body>
<h1>HTML5当中的form表单中的type属性</h1>
<!--
form表单标签:
input标签:
属性: 值: 含义: 备注
type: text 文本框 需定义名字name和value值
password 密码框 需定义名字name和value值
radio 单选框 注意:单选框的value值必写且各name值相同
checkbox 多选框 注意:多选框的value值必写且各name值相同,同时name值要附带[]
submit 提交按钮 需给定value值
image 图像按钮 需和src&alt连用
reset 重置按钮 需给定value值
button 定义可点击按钮 需给定value值
file 文件域 上传文件使用
hidden 隐藏域 定义隐藏字段,隐藏字段对用户不可见
search 搜索域
date 日期 选取日,月,年
datetime 日期实践 选取时间,日,月,年(UTC时间)
datetime-local 本地日期实践 选取时间,日,月,年(本地时间)
month 月 选取月,年
week 周 选取周和年
time 时间 选取时间(小时和分钟)
url 网址 用于应该包含url地址的输入域
eamil 邮箱 用于应该包含email地址的输入域
range 范围 用于包含一定范围内数字值得输入域,显示为滑动条
number 数字 用于应该包含数值的输入域,可以用min,max设置区间或者给定value默认值
--> <form action="2.php" method="get">
用户名: <input type="text" name="uname" value="" placeholder="请输入用户名" /><br/><br/>
密码: <input type="passwords" name="upass" value="" /><br/><br/>
<input type="text" name="yanzhengma" value="" placeholder="请输入验证码"/><input type="button" value="验证码"/><br/><br/>
<input type="submit" value="登录"/>
<input type="reset" value="重置"/><br/></br/>
性别: <input type="radio" name="usex" value="m" checked />男
<input type="radio" name="usex" value="w"/>女<br/><br/>
喜欢类型:<input type="checkbox" name="ulike[]" value="lovely"/>可爱
<input type="checkbox" name="ulike[]" value="qingchun"/>清纯
<input type="checkbox" name="ulike[]" value="liangli"/>靓丽<br/><br/>
真实年龄:<input type="number" name="uolder" min="18" max="50"/><br/><br/>
<input type="range" name="ubirthday" min="1" max="10"/></br/><br/>
个人生活照:<input type="image" style="width:50px;height:80px;" src="./5.jpg" alt="这是我,好看吗?"/><br/><br/>
上传照片:<input type="file" value="选择上传文件"/><br/><br/>
<input type="hidden" name="word" value="like"/>
E-mail:<input type="email" name="user_email" /><input type="submit" /><br/><br/>
网页搜索:<input type="url" name="user_url"/><input type="submit"/><br/><br/>
日期: <input type="date" name="user_date"/><br/>
日期: <input type="month" name="user_date"/><br/>
日期: <input type="week" name="user_date"/><br/>
日期: <input type="time" name="user_date"/><br/>
日期: <input type="datetime" name="user_date"/><br/>
日期: <input type="datetime-local" name="user_date"/><br/>
<input type="search" />站内搜索
</form>
</body> </html>
HTML5当中的form表单中的type属性
input标签中各属性页面效果：
3. <select> 标签创建下拉列表。
*name属性:定义名称,用于存储下拉值的
size：定义菜单中可见项目的数目，html5不支持
disabled 当该属性为 true 时，会禁用该菜单。
multiple 多选
*<option> 下拉选择项标签,用于嵌入到<select>标签中使用的;
*value属性:下拉项的值
*selected属性:默认下拉指定项.
4. *<textarea> 多行的文本输入区域
*name :定义名称,用于存储文本区域中的值。
*cols ：规定文本区内可见的列数。
*rows ：规定文本区内可见的行数。
disabled： 是否禁用
readonly： 只读
默认值是在两个标签之间
5. *<button> 标签定义按钮。
可以在 button 元素中放置内容，比如文档或图像。这是该元素与由 input 元素创建的按钮的不同之处。
6. <fieldset> html5标签--fieldset 元素可将表单内的相关元素分组。
disabled属性：定义 fieldset 是否可见。
form属性： 定义该 fieldset 所属的一个或多个表单。
7. <legend> html5标签--<legend> 标签为 <fieldset>、<figure> 以及 <details> 元素定义标题。
样例：
<!DOCTYPE html>
<html>
<head>
<title>HTML5当中的form表单中的fieldset、legend标签</title>
<meta charset="utf-8"/>
</head>
<body>
<h3>HTML5当中的form表单中的fieldset、legend标签</h3>
<form>
<fieldset style="width:400px">
<legend>健康信息：</legend>
身高：<input type="text" /><br/>
体重：<input type="text" /><br/>
</fieldset>
</form>
</body>
</html>
HTML5当中的form表单中的fieldset、legend
页面效果：
8. <optgroup> html5标签--<optgroup> 标签定义选项组。此元素允许您组合选项
样例：
<!DOCTYPE html>
<html>
<head>
<title>HTML5当中的form表单中的optgroup标签</title>
<meta charset="utf-8"/>
</head>
<body>
<h1>HTML5当中的form表单</h1>
<form action="1.php" method="get">
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
</form>
</body>
</html>
HTML5当中的form表单中的optgroup标签
页面效果：
9. <datalist> html5标签--<datalist> 标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。
样例：
<!DOCTYPE html>
<html>
<head>
<title>HTML5当中的form表单中的datalist标签</title>
<meta charset="utf-8"/>
</head>
<body>
<h3>HTML5当中的form表单中的datalist标签</h3>
<form action="demo_form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
</body>
</html>
HTML5当中的form表单中的datalist标签
页面效果：
HTML学习笔记《二》 ----HTML部分标签应用的更多相关文章
- Html学习笔记(二) 简单标签
标签的重点 标签的用途 标签在浏览器中的默认样式 <body>标签: 在网页上显示的内容 <p>标签: 添加段落 <hx>标签: 添加标题 标签一共有6个,h1.h ...
- amazeui学习笔记二（进阶开发5）--Web 组件开发规范Rules
amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意 例如(HISTORY.md Web 组件更新历史 ...
- amazeui学习笔记二（进阶开发4）--JavaScript规范Rules
amazeui学习笔记二(进阶开发4)--JavaScript规范Rules 一.总结 1.注释规范总原则: As short as possible(如无必要,勿增注释):尽量提高代码本身的清晰性. ...
- 微信小程序学习笔记二 数据绑定 + 事件绑定
微信小程序学习笔记二 1. 小程序特点概述 没有DOM 组件化开发: 具备特定功能效果的代码集合 体积小, 单个压缩包体积不能大于2M, 否则无法上线 小程序的四个重要的文件 *js *.wxml - ...
- WPF的Binding学习笔记(二)
原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...
- AJax 学习笔记二(onreadystatechange的作用)
AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...
- [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计
源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...
- JMX学习笔记(二)-Notification
Notification通知,也可理解为消息,有通知,必然有发送通知的广播,JMX这里采用了一种订阅的方式,类似于观察者模式,注册一个观察者到广播里,当有通知时,广播通过调用观察者,逐一通知. 这里写 ...
- java之jvm学习笔记二(类装载器的体系结构)
java的class只在需要的时候才内转载入内存,并由java虚拟机的执行引擎来执行,而执行引擎从总的来说主要的执行方式分为四种, 第一种,一次性解释代码,也就是当字节码转载到内存后,每次需要都会重新 ...
- Java IO学习笔记二
Java IO学习笔记二 流的概念 在程序中所有的数据都是以流的方式进行传输或保存的,程序需要数据的时候要使用输入流读取数据,而当程序需要将一些数据保存起来的时候,就要使用输出流完成. 程序中的输入输 ...
随机推荐
- java使用freemarker导出复杂的excel表格
正常导出excel表格使用的poi,但是导出复杂的excel有点困难,但是可以使用freemaker模板来导出复杂的excel. 1.都是先生成一个Excel表格的模板,最好是增加一行数据.具体看图里 ...
- Codeforces - tag::dp 大合集 [占坑 6 / inf]
Gym - 100753J 某国家仅有金币和银币两种货币,起汇率为g,纪念品市场有n个商人和商品,商人结帐只用银币,并且把一堆银币装在袋子里,分为三种类型,分别按向下/向上/四舍五入取整(其中向上的优 ...
- C#编写运行在Linux环境下的采用Mediainfo来获取多媒体文件信息的代码
项目开始设计的是运行在windows下,所以一开始采用的是windows服务模式来获取多媒体文件信息,后来要求调整为可以在Linux下运行,经过这两天的资料查找,实现了Linux下通过.NET来获取多 ...
- 《大数据日知录》读书笔记-ch3大数据常用的算法与数据结构
布隆过滤器(bloom filter,BF): 二进制向量数据结构,时空效率很好,尤其是空间效率极高.作用:检测某个元素在某个巨量集合中存在. 构造: 查询: 不会发生漏判(false negativ ...
- java实现多线程的4种方式
1.继承Thread类 看jdk源码可以发现,Thread类其实是实现了Runnable接口的一个实例,继承Thread类后需要重写run方法并通过start方法启动线程. 继承Thread类耦合性太 ...
- 【温故知新】C#基于事件的异步模式（EAP）
在开发winform和调用asp.net的web service引用的时候,会出现许多命名为 MethodNameAsync 的方法. 例如: winform的按钮点击 this.button1.Cl ...
- 我的Python升级打怪之路【六】：面向对象（一）
面向对象的概述 面向过程:根据业务逻辑从上到下写代码 函数式:将其功能代码封装到函数中,日后便无需编写,仅仅调用即可 [执行函数] 面向对象:对函数进行分类和封装.[创建对象]==>[通过对象执 ...
- Git学习系列之Git是什么？
前言 现在主流IDE里,都集成git了. https://git-scm.com/docs 史上最浅显易懂的Git教程! 为什么要编写这个教程?因为我在学习Git的过程中,买过书,也在网上Google ...
- JetBrains PyCharm（Professional版本）的下载、安装和初步使用
不多说,直接上干货! 首先谈及这款软件,博主我用的理由:搞机器学习和深度学习! 想学习Python的同学们,在这里隆重介绍一款 Python 的开发工具 pyCharm IDE.这是我最喜欢的 Pyt ...
- 已有插件支持requirejs
define(["jquery"], // Require jquery function($){ //把你原来的插件代码放这里吧,这样就行了 //注意文件命名 }) ...