Html5总结笔记1

Html5总结笔记1(标签+属性+事件)

  1. 项目里面一个分页面的html文件结构基本如下:

<link href="...css">//每个分页面都会加载的css文件

<div>

<section>

...//里面又包含里n个<div>

</section>

<link rel="stylesheet" href="...css">

<script type="text/javascript" src="..."></script>

</div>

2.每个<div>里面就会有各式各样的标签

  • <form></form>:一个表单
  • <form>元素包含一个或多个如下的表单元素:

<input>:输入框。该标签没有结束标签。

<textarea></textarea>:文本框。比输入框大一些,右下角有斜划线。

<button type="button"></button>:按钮。一般要写 type="button"。

<select></select>:下拉列表。里面会有<option value="..."></option>标签,value属性定义送往服务器的选项值。

<optgroup><optgroup>:把几个<option>组合在一起。<optgroup lable="..."></optgroup>

<fieldset></fieldset>:将表单中的元素进行分组。并且可以用<legend>...</legend>框起来。

<lable></lable>:给<input>元素定义标注。一般用在input框前面的文字说明那里。

  • 还有一些其他常用标签:

<table></table>:定义html表格。<table>标签经常会包含其他标签,如下。

<thead></thead>:定义表头。

<tbody></tbody>:定义表格主体。

<tfoot></tfoot>:一般定义表格最后一行。

thead、tbody、tfoot里面都会包含一个或者多个<tr></tr>。

<tr></tr>:表格的一行。

<td></td>:表格一行中的一格。

<ul></ul>:定义无序列表。下面会包含<li></li>,<li>标签定义列表项目。

<span></span>:可以对一行文字中的几个文字进行组合,进而对这几个文字单独操作。

目前经常用到的也就这些了。。后面继续补充。

3.标签内常用属性总结。

  • class  类。就是写各种类,在用选择器进行选择元素的时候会用到
  • style  样式。里面定义样式,里面会包含一些css属性。经常用到的有width、height、position(常用的值有absolute、relative等,absolute是绝对位置,参照点是浏览器的左上角;relative是相对位置,参照点是父级的原始点)、border:1px solid #颜色、float、overflow(常用值有scroll、auto)、display、text-align、font-weight、font-size、line-height(设置以百分比计的行高)、margin(外边框)、padding(内边框)、vertical-align(设置元素垂直对齐)等等。
  • name 名称。与后台数据库中的字段相对应。
  • id 。有点像类,但是id不能重复,class可以重复。jquery中选择器进行选择的时候选id用‘#’,选class用‘.’
  • type 定义input框的类型。可选的有button、checkbox、file、hidden、image、password、radio、reset、submit、text。
  • tabindex 规定元素的 tab 键控制次序。
  • aria-hidden 残障人士如失明的人使用识读设备(自动读取内容并自动播放出来),播放到带此属性的内容时会自动跳过,以免残障人士混淆。
  • value 定义input框的值。input框的type不一样,value值也不一样。
  • placeholder 用来写提示信息。在字段获得焦点时消失。
  • role 供残障人士使用。主要是表单,比如输入密码,对于正常人可以用placaholder提示输入密码,但是对于残障人士是无效的,这个时候就需要role了。
时间: 2024-10-07 09:25:06

Html5总结笔记1的相关文章

html5学习笔记(3)--主题结构元素-1

html5学习笔记(3)--主题结构元素-1 Article元素 以下为对应代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <article> <header> <h1>极客学院</h

HTML5学习笔记(二)——表单1

表单一直是网页必不可少的一部分,一直以来,表单的作用被无限扩展,发展出了诸多新奇的用法,老版的HTML只支持很少的一部分常用表单,许多的新表单都需要借助CSS与JavaScript语言来进行构建,现在HTML5来了,她带来了新的表单,这些强大的表单项,可以省去一大块复杂的JavaScript代码,很值得去学习. 而且在新的表单里面,不再像以前每个表单都必须位于<form></form>之内,只要在<form></form>内定义一个id,然后在网页任何位置都

HTML5 程序设计笔记(一)

HTML5 概述 1.html5 发展史 1993年html首次以因特网草案形式发布. 20世纪90年代,html大幅发展,从2.0版,到3.2版和4.0版.最后到1999年的4.01版. 伴随html发展,W3C掌握了对html规范的控制权. 快速发布四个版本后,在业界人为html已经末路的同时,对web标准焦点开始转移到XML和XHTML上.HTML被放在次要位置. 致力于将web平台提升到一个新高度,一小组人在2004年成立WHATWG,他们创立了HTML5规范,同时开始转对web应用开发

Html5学习笔记1 元素 标签 属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5学习笔记</title> </head> <body bgcolor="#90ee90"> 1.Html5的元素<br/><br/> 元素指的是从開始标签到结束标签的全部代码<

HTML5 程序设计笔记(二)

Canvas API 1.HTML5 Canvas 概述 1.1 历史 Canvas的概念最初是由苹果公司提出的,用于在Mac OS X WebKit中创建控制板部件(dashboard widget).在Canvas出现之前,开发人员若要在浏览器中使用绘图API,只能使用Adobe的Flash和SVG插件,或者只有IE才支持的VML,以及其他一些稀奇古怪的javascript技巧. SVG和Canvas对比 "Canvas本质上是一个位图画布,其上绘制的图形是不可缩放的,不能像SVG图像那样可

html5学习笔记2

css3选择器 1.通过元素的关键字,如p,div等 2.通过id属性 3.通过class属性引用 3.1通过class属性引用p标签,如:p.text{}//text样式只适用于p 4.通过任意键引用 例如:p[name]{}//仅引用带有name属性的p标签 p[name="my"]{}//仅引用带有name属性等于"my"的p标签 还可以使用正则表达式p[name^="my"]{} p[name$="my"]{} 5.通

HTML5项目笔记7:使用HTML5 WebStorage API构建与.NET对应的会话机制

HTML5的Web Storage API,我们也称为DOMStarage API,用于在Web请求之间持久化数据.在Web Starage API 出现之前,我们都是将客户端和服务端之间的交互数据存储在远程服务器上,随着Web Starage API的出现,我们可以在客户端存储我们重复访问的交互数据,用户在打开浏览器的时候,可以快速地读取到数据,减少了用户等待,数据流量. 在Web Starage 出现之前,我们在客户端存储数据一般使用Cookie,用于客户端和服务端之间保存会话标识符,同时可

HTML5项目笔记6:使用HTML5 FileSystem API设计离线文件存储

在移动环境或者离线环境中,WebDataBase 虽然能够存储并有效地管理和维护客户端的数据集合,但是仍不能满足对包含大段数据文件的存储和多种不同格式文件的保存,于是我们就需要离线的文件管理系统来维护我们工作了,基于HTML5的FileSystem API 就充当这这个角色. 通过这个FileSystem API,我们的Web应用程序可以阅读,浏览,编辑和操纵本地文件系统. FileSystem API的主要功能有: Reading and manipulating files: File/Bl

HTML5项目笔记5:使用HTML5 WebDataBase设计离线数据库

基于HTML5的Web DataBase 可以让你在浏览器中进行数据持久地存储管理和有效查询,假设你的离线应用程序有需要规范化的存储功能,那么使用Web DataBase,可以使你的应用程序无论是在离线或者在线或者网络不通畅情况下都可以将数据保存在客户端. 下面是HTML5 DataBase中两个不同的DataBase的比较,摘自http://www.html5rocks.com/en 上面的一篇文章. 我们这边使用WebSQL来设计和编写底层服务,W3C 的 WebDatabase 规范中说这