HTML的总结

HTML

HTML:(Hype Text Markup Language)超文本标记语言,是最基本的网页语言。代码由标签组成,不区分大小写。

<html>开始,</html>结束,分头部分(head)和体部分(body),头部分用于给页面增加一些辅助或属性信息,最先加载。体部分是真正存放页面数据的地方。

属性和属性值用=”连接,属性值可加双引号、单引号或不加引号。

标签相当于一个容器,数据存放在容器里,对数据操作,就是在修改容器的属性值。

 

字体标签:<font size=5 color=red>文字</font>

color属性可用颜色单词,也可用“#FFFFFF”:井号加十六进制数据表示,红绿蓝

 

标题标签:<h1>文字</h1>  共有6级标题  

 

水平线标签:<hr color=red size=5/>size属性指定水平线粗细

 

特殊符号:

大于号>

小于号<

与符号&

双引号

空格

注册符

版权符

TM

<

>

&

"


 

列表和项目符号标签:

定义列表<dl> </dl>

数字标签<ol> </ol>

符号标签<ul> </ul>

<dl>定义列表DefinedList

<dt>定义项目

    <dd>具体项目</dd>

    <dd>具体项目</dd>

</dt>

</dl>

自动缩进效果

具体项目内容用<li></li>封装  自动缩进

默认数字样式  可用type修改:a  A  I  i  1

Start属性指定起始号码

默认样式空心圆circle  

disc实心圆  square黑方块

可用CSS自定义符号

 

注释标签:<!注释内容-->

 

图像标签:<img src=../dir/file alt=说明文字 height  width  border/>

src属性中可用两个点(../)代表上层目录

alt属性中的说明文字在鼠标悬停和图片加载失败时显示

图像地图:用<img>封装好图像后,切换到DW设计视图,在属性中选择热点区域形状并在图像上拖动出一块热点区域,用热点区域链接某个资源。在页面中点击热点区域就会跳转到相应资源。

 

表格标签:<table><tr><td></td></tr></table>

<table border=边框粗细 bordercolor  cellpadding=单元格中数据与单元格边框间距 cellspacing=单元格与单元格间距 0两线并为一线 width=固定像素值或相对页面百分比>cellspacing=0两线并成一线但显示出来粗,用CSSborder-collapse两线重叠看起来就是一条线

<table>标签内<caption></caption>给表格加标题,是表格的一部分

 

<td colspan=2>行占两列



<td rowspan=2>列占两行 第一行第一个单元格

第一行第二个

第二行只有一个

 

table标签中默认都有一个tbody标签    theadtbodytfoot

浏览页面时,浏览器解析由table标签封装的页面数据时,读到</table>表格结束标记才会显示数据,若封装页面数据的表格很大,没读到结束标记就不显示任何数据,用户体验不佳,所以将表格分为多个部分,读一个</tbody>就显示一部分。用tbody将表格分体

 

超链接标签:<a href=http://www.xxx.cn >文字</a>

点击一个超链接做了什么?首先启动相应的协议解析引擎,访问本机hosts文件,查找对应主机IP,未找到再请求网络DNS服务器获取对应IP,用IP访问指定主机。

href属性,可以指定协议,mailto:[email protected]?subject=邮件主题&cc=抄送地址

mailtothunder……   不指定协议默认启动文件协议解析

href=www.baidu.com默认使用file协议打开的是一个本地文件 并不是主机地址

超链接实现页面内跳转:定位标记、锚

<a name=top>顶部位置</a>  

a标签的name属性为当前位置指定一个名字,不使用href属性

…很多页面内容…  

在适当位置用a标签链接到指定名字的位置  用#标示当前页面

<a href=#top>回到顶部位置</a>

target属性指定页面打开方式,默认在当前页面内打开,_blank新窗口打开

title属性:当鼠标悬停在文字上时显示的文字内容

 

 

表单标签:用于与服务端交互

 

<form action=表单提交目的地 method=表单提交方式></form>

form标签内的组件:input接收用户输入数据 select下拉列表 textarea文本区域

 

<input type=text name=user value=”zhangsan />

input标签内要指定name属性,服务端才能获取到对应的value

input内包含的组件类型 通过type指定:

text文本框password密码框

radio单选框属于同一组的选择框name属性要一致,不然单选框不能实现单选

checkbox复选框分组 同单选框单选框不加属性时还不让你选

file提供一个文件浏览按钮,多用于上传文件

hidden隐藏组件,不需用户看到但服务端要用到,可通过JavaScript将其值在用户端运算后再提交至服务端使用

button按钮 通过onclick方法添加事件监听

reset重置按钮submit提交按钮

p_w_picpathsubmit一样,但可通过src属性指定一个图片充当按钮 美化效果

 

<select>选择列表,默认单选下拉式设定multiple属性使选项全部列出,无下拉效果

size属性指定显示多少项,显示不完出现滚动条

通过<option></option>标签封装列表项

 

<textarea cols=”” rows=””>文本区域 可指定行数和列数

 

<fieleset>区域设置,可给form加外框外框上的文字可用legend标签指定

 

form中的method指定提交方式,有7中,常用getpost

Java自定义服务端与form交互  查看数据提交不同之处

get提交:信息显示在地址栏中,敏感信息泄露,不安全;

地址栏存储信息量有限,不利于大数据量提交;

将信息封装在消息头前边;

提交至服务端的中文乱码需要再次编码后再解码

post:地址栏上不显示提交的信息,避免信息泄露,安全;

提交数据量无限制,方便大数据提交;

将信息封装在消息头后边(空行后)的数据体中;

中文乱码可通过设定字符集方法简单搞定

Tomcat服务端默认使用的iso8859编码,两种提交方式提交中文时,服务端会显示乱码,需要在服务端使用指定字符集解码,request.setCharacterEncoding(GBK)但设定字符集方法只对数据体中的数据有效,get方式提交的信息封装在消息头中,不能使用这种方法。但可以通过先用iso8859编码再GBK解码的方式解决。推荐使用post方式提交。

 

暴力提交、暴力注册

<a href=http://注册地址?name=value&id=value......>暴力开始</a>

超链接默认就是get方式提交

客户端首先进行数据有效性校验,服务端对客户端提交的数据必须再次校验

 

label标签:用于给各元素定义快捷键

for属性指定快捷键起作用的表单元素,其值必须与该表单元素的id值相同

accessKey指定快捷键,要与Alt合用

例:<label for=user accessKey=u>user name</label>

<input type=text id=user />

label使用技巧:

label标签加到tr标签上,for属性指向该tr里的文本框,在这行的任意位置点击鼠标,文本框都将获得焦点。

 

其他标签:

<pre></pre>此标签内封装的文本数据格式将保持原样,包括空格和缩进等格式。常用于页面中显示带有缩进层次的代码。

<p></p>段落标签,两个段落之间带有空行

<b>加粗 <strong>加粗 <i>斜体 <u>下划线 <sub>下标 <sup>上标

<marquee direction=left/right/down/up behavior=scroll/alternate/slide>

此标签内可以让内容动起来,scroll滚动穿过/alternate来回弹/slide一下摔死

 

框架集frameset标签:将浏览器页面分成多个独立的部分,分别显示不同的页面

放在headbody之间  frameset分割页面 frame指定小页面内容

<frameset rows=30%, * frameborder=yes border=1 framespacing=0>

<frame src=1.html noresize=noresize />

<frame src=2.html noresize=noresize />

</frameset>

frameset中用rowscols属性指定分割页面大小区域,可用百分比也可用像素值

frame中的noresize属性使框架页面大小不可随意改动

frame中添加的超链接默认都是在当前框架页面内打开的,要让其在当前窗口中的其他框架页面中打开,需要将框架页面添加一个name属性,让超链接的target属性值等于这个框架页面的name属性即可

 

iframe画中画标签:直接在当前页面中挖出一个区域,显示指定页面内容

<iframe src=1.html width=30 height=50>画中画标签说明文字,这些文字在浏览器不支持iframe标签时显示</iframe>

画中画标签具有一定的危险性,可能被用于隐藏执行一些恶意的代码

如:<iframe src=1.js height=0 width=0>

 

头标签<head>内的一些标签:<title></title><base /><meta /><link />

title:页面标题,显示在浏览器标题栏上的文字

basehref指定页面中所有超链接的目录,可本地,也可网络,结尾一定要用斜杠/表示

目录,只作用于相对路径文件。target指定打开方式

meta<meta name=keywords content=电影,视频,关键字…… />

<meta http-equiv=refresh content=3, url=http://www.xxx.com />

http-equiv:模拟HTTP协议响应消息头,3秒后刷新,打开指定网页

link:给HTML关联一些文件,如CSSJS

<link rel=stylesheet href=1.css media=print/screen>

rel指定关联文件与HTML的关系 media指定文件作用的设备,多个设备斜杠分隔

 

XHTML是可扩展的(Extensible)超文本标记语言,可理解为HTMLXML的过渡。

XML是可扩展标记语言,是对数据信息的描述,而HTML是对数据显示的描述。XML规定更为严格,如标签不结束即错误。XML规范可被更多应用程序解释,将成为一种通用的数据交换语言,各个服务器、框架都将XML作为配置文件。

Dreamweaver创建HTML文件自动生成的头部信息中,又一个规范约束文件(.dtd),描述一些标签信息,由此文件来约束标签的自动闭合,删除这些头部信息后,DW中输入标签将不会自动闭合。前边的网址并不代表此文件要从网络获取,只表示名称空间,可自定义。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章