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学习笔记二 流的概念 在程序中所有的数据都是以流的方式进行传输或保存的,程序需要数据的时候要使用输入流读取数据,而当程序需要将一些数据保存起来的时候,就要使用输出流完成. 程序中的输入输 ...
随机推荐
- P4175 [CTSC2008]网络管理 树剖+树套树
$ \color{#0066ff}{ 题目描述 }$ M公司是一个非常庞大的跨国公司,在许多国家都设有它的下属分支机构或部门.为了让分布在世界各地的N个部门之间协同工作,公司搭建了一个连接整个公司的通 ...
- 高阶篇：6）设计评审Design reviews；
本章目的:明白设计评审Design reviews的概念和流程,不犯常见错误. 1 设计评审概念: 所谓设计评审,是指对设计所作的正式的.综合性的和系统性的审查,并写成文件,以评定设计要求与设计能力是 ...
- 《The One 团队》第二次作业：团队项目选题
项目 内容 作业所属课程 http://www.cnblogs.com/nwnu-daizh/ 作业要求 https://www.cnblogs.com/nwnu-daizh/p/10726884.h ...
- 分分钟钟学会Python - 数据类型（int、bool、str）
第三天学习内容 今日内容 1.整型(int) 2.布尔类型(bool) 3.字符串(str) 内容详细 1.整型 Python中的整型用int表示. 1.python2中: 在32位机器上,整数的位数 ...
- 使用Maven运行测试提示Module sdk 1.5的解决方法
解决方法: 1. 配置Project Structure 2. 在MAVEN_HOME/conf/setting.xml中添加profile 3. 在Maven项目的pom.xml文件里添加标签 三种 ...
- 899. Orderly Queue
A string S of lowercase letters is given. Then, we may make any number of moves. In each move, we c ...
- 文献综述二十：基于UML技术的客户关系管理系统实现
一.基本信息 标题:基于UML技术的客户关系管理系统实现 时间:2015 出版源:电子设计工程 文件分类:uml技术的研究 二.研究背景 设计出可应用与银行和储户之间沟通的客户关系管理系统,从而实现对 ...
- Linux 构建ftp服务器
1.安装vsftpd服务器 $sudo apt-get install vsftpd 2.cd 到etc文件,配置vsftpd.conf文件 $sudo vi /etc/vsftpd.conf 修改至 ...
- Java 覆写初探
Java 覆写 继承性的主要特征是子类可以根据父类已有的功能进行功能扩展,但是在子类定义属性或方法的时候有可能定义属性和方法和父类同名,在此类情况下就称为:“覆写”. 方法的覆写:[改良原本功能不足的 ...
- Python处理文件和查漏
import os,re def change_filename(root): ''' 批量修改excel文件名 ''' for root_,_, fs in os.walk(root): for f ...