HTML其实就是把页面的数据封装并加上标签


表头<head>

<title> 浏览器标题栏显示的内容

<base> 有href和target属性,href指定网页中所有超链接的基本目录,target指定打开超链接的方式,如_blank为在新窗口中打开

<meta> name网页的描述信息,可以设置网页搜索的关键字keywords。http-equiv可以设置自动刷新

如:<meta http-equiv=”refresh” content=”3”;url=http://sina.com.cn” /> 设置3秒自动刷新

<link> rel属性:描述目标文档与当前文档的关系,type:文档类型,media:目标文档在哪种设备上起作用,如显示器或打印机


表单<form>

用来与服务端进行交互,意味着只要不和服务端交互就不需要form标签

<input>的type属性

  1. text:文本框

  2. password:密码框

  3. radio:单选框,需要指定同一组(即name值相同)

  4. checkbox:复选框

  5. file:文件选择

  6. hidden:隐藏组件。不会在页面上显示,但其定义的name和value可以提交给服务器

  7. botton:按钮组件。默认没有效果,可以通过注册事件并加入自定义效果

  8. submie:提交按钮

  9. reset:重置按钮

  10. image:图像组件。可以通过image的src属性连接一个按钮图片代替submit

下垃菜单<select>

每一个下拉菜单项都由option进行封装

<select>
<option></option>
<option></option>
</select>

文本区域<textarea>


表格<table>

<table>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>

超链接<a>

<a href="http://www.sina.com.cn" target="_blank"&gt; 新浪网站<a>

http:为解析程序,即使用http协议解析链接。设置target属性,在新窗口打开链接。

<a href="mailto:abc@163.com?subject=haha&cc=qq@163.com" > 联系我们 </a>

当点击超链接时,就会出现邮件相关联的解析程序,本机默认的是outlook.

链接讯雷的解析程序可以自己百度,这里就不说了。


form标签常见属性

action

method(get和post)

get和post区别:

get会将提交的数据显示在浏览器的地址栏上,post则不会

get提交的数据的体积受地址栏的限制(即不能超过地址栏的长度),post没有这种限制

get对于敏感信息不安全(如用户名和密码),post安全

get会将提交的信息封装在请求行,即http消息头之前,post会将提交信息封装在数据何体中,即http消息头之后的空行后

对于服务器来说:

表单form提交数据尽量用post,因为涉及到编码问题。tomcat服务端默认的解码是ISO8859-1

对于post提交的中文,在服务端可以直接使用setCharacterEncoding("gbk")就可以解决。而对于get提交的中文,在服务端只能通过ISO8859-1将数据编码一次,再通过指定的码表(如GBK)解码。


其他

  1. <label>标签:当点击用户名这栏时(不是点击文本框)或按Ctrl+u快捷键,焦点也会到了文本框内
<label acdessky=”u” for=”userid”>
<tr>
<td> 用户名(U):</td>
<td> <input type=”text” name=”user” id=”userid” /></td>
</tr>
</label>

2. 书写链接地址时,必须避免重定向,例如:href="http://sina.com/",即须在URL地址后面加上"/"
3. 在页面中尽量避免使用style属性,即style="..."
4. 必须为含有描述性的表单元素(input,textarea)添加label。
```HTML

姓名:

```


5. 能以背景形式呈现的图片,尽量写入CSS样式中
6. 重要图片必须加上alt属性
7. class和id的使用:id是唯一的并是父级的,class是可以重复的并是子级的,所以id仅使用在大的模块上,class可用在重复使用率高及子级中。id原则上都是由分发框架文件时命名的,为javaScript预留钩子的除外。
8. 为javaScript预留钩子的命名,请以js_起始,比如: js _show、js _hide。

over!


HTML常见标签学习与笔记总结的更多相关文章

  1. 论文笔记:多标签学习综述(A review on multi-label learning algorithms)

    2014 TKDE(IEEE Transactions on Knowledge and Data Engineering) 张敏灵,周志华 简单介绍 传统监督学习主要是单标签学习,而现实生活中目标样 ...

  2. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  3. 学习ReactNative笔记整理一___JavaScript基础

    学习ReactNative笔记整理一___JavaScript基础 ★★★笔记时间- 2017-1-9 ★★★ 前言: 现在跨平台是一个趋势,这样可以减少开发和维护的成本.第一次看是看的ReactNa ...

  4. 强化学习读书笔记 - 02 - 多臂老O虎O机问题

    # 强化学习读书笔记 - 02 - 多臂老O虎O机问题 学习笔记: [Reinforcement Learning: An Introduction, Richard S. Sutton and An ...

  5. (转)深度学习word2vec笔记之基础篇

    深度学习word2vec笔记之基础篇 声明: 1)该博文是多位博主以及多位文档资料的主人所无私奉献的论文资料整理的.具体引用的资料请看参考文献.具体的版本声明也参考原文献 2)本文仅供学术交流,非商用 ...

  6. 深度学习word2vec笔记之基础篇

    作者为falao_beiliu. 作者:杨超链接:http://www.zhihu.com/question/21661274/answer/19331979来源:知乎著作权归作者所有.商业转载请联系 ...

  7. FPGA_VHDL 学习课堂笔记001

    FPGA_VHDL 学习课堂笔记   记录说明:本文档主要记录大学期间,老师FPGA授课课堂笔记. 代码语言:VHDL 编程软件:MAX+plus II FPGA硬件:FLE-843   03月05日 ...

  8. 深度学习课程笔记(二)Classification: Probility Generative Model

    深度学习课程笔记(二)Classification: Probility Generative Model  2017.10.05 相关材料来自:http://speech.ee.ntu.edu.tw ...

  9. 深度学习课程笔记(一)CNN 卷积神经网络

    深度学习课程笔记(一)CNN 解析篇 相关资料来自:http://speech.ee.ntu.edu.tw/~tlkagk/courses_ML17_2.html 首先提到 Why CNN for I ...

随机推荐

  1. 图片输出onerror事件

    <img src=".<?php echo $img[0];?>" onerror="this.src='img/zanwu.jpg'" st ...

  2. php 防止SQL注入函数

    function inject_check($sql_str) { return eregi('select|insert|and|or|update|delete|\'|\/\*|\*|\.\.\/ ...

  3. How to install ffmpeg,mp4box,mplayer,mencoder,flvtool2,ffmpeg-php on centos

    1. Enable RPM Fusion yum repository The CentOS rpm packages of ffmpeg, mplayer, mencoder and MP4Box ...

  4. PYTHON 正则表达示入门

    确实是实践出真知,自己手打代码之后,以前停在理论上的东东,慢慢可以进入实战了. 比如,MATCH和SEARCH之间的区别. #encoding: UTF-8 import re pattern = r ...

  5. GUI(主)线程与子线程之间的通信(用信号槽通讯)

    在主线程上,可以控制子线程启动,停止,清零 如果子线程启动的话,每一秒钟会向主线程发送一个数字,让主线程更新界面上的数字. 程序截图: 上代码: #include <QtGui> #inc ...

  6. 颠覆你的时空观-----理解傅立叶transform

    在知乎上看到的,非常不错,最起码知道为什么了: 傅立叶变换,拉普拉斯变换,z变换这三种方法的本质主要就是将信号从时域转换成频域,因为频域更好展开分析 = =. 频域只是另一种看到信号的角度(世界观). ...

  7. MyBatis insert后返回自增字段的值

    如下情况适用支持自增的DB,如MySQL.其他情况参见:MyBatis魔法堂:Insert操作详解(返回主键.批量插入) 1.model public class UserInfo { private ...

  8. C++豆知识索引

    C++Memset误区 C++ 哈希表 C++类型转换[转] C++ sizeof C++ 路径中\\与/

  9. tomcat主目录

    简单显示天气预报js 代码

  10. java中post和get请求

    示例代码: package com.shareboxes.util; import java.io.BufferedReader; import java.io.IOException; import ...