Html5总结笔记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了。