网站在线生成app,避免网站侵权,群晖安装wordpress域名,网站开发 法律XHTML是更标准的HTML
在HTML的发展史中#xff0c;最广为人知的是HTML3.2和HTML4.0.1。HTML4.0.1和XHTML1.0相互兼容#xff0c;我们现在编写的HTML文档时#xff0c;都应该遵守HTML4.0.1规范
XHTML#xff1a;可扩展超文本编辑语言#xff0c;XHTML和HTML4.0.1具有很好… XHTML是更标准的HTML
在HTML的发展史中最广为人知的是HTML3.2和HTML4.0.1。HTML4.0.1和XHTML1.0相互兼容我们现在编写的HTML文档时都应该遵守HTML4.0.1规范
XHTML可扩展超文本编辑语言XHTML和HTML4.0.1具有很好的兼容性而且是更严格更纯净的HTML由于HTML已经发展到了一种极度混乱的程度所以W3c组织制定了XHTML,它的目标是取代原有的HTML简单的说XHTML就是最新版本的HTML规范所以现在我们重新编写网页时应该遵循最新的XHTML规范这样可以保持较好的向后兼容性
若标签没有正确的结束显然违背了结构化文档的规则但使用浏览器来浏览这份文档时依然可以看到浏览效果这就是HTML不规范的地方而XHTML则致力于消除这种不规范它要求HTML文档首先必须是一份XML文档
XML文档是一种结构化文档如下四个基本规则
1. 整个文档有且仅有一个跟元素
2. 每个元素由开始标签和结束标签组成除非使用空元素语法(br/)
3. 元素与元素之间应该合理嵌套
4. 元素的属性必须有属性值而且属性值应该用引号(单引号双引号)引起来
计算机里的浏览器可以对付各种不规范的HTML文档但很多浏览器运行在移动电话和手持设备上他们就没有能力来处理那些糟糕的HTML文档所以w3c建议使用XML规范来约束HTML文档将HTML和XML的长处结合从而得到了现在和未来都能使用的标记语言XHTML
XHTML的基本语法
XHTML比HTML更加规范更加严格因而掌握了XHtML的知识自然也就学会了编写HTML文档。而且是更加严格更加规范的HTML文档。
1. XHTML文档首先是一份XML文档所以遵守XML的四条基本规则所有标记名都用小写字母所有属性名都应小写属性都必须指定属性值不能简写而且属性值必须使用引号引起来
XHTML和DTD
XHTML首先是一份XML文档除了需要满足基本的文档规则之外还应该使用DTDDocument Type Definition,即文档类型定义或Schema来定义XML文档的语义约束所以XHTML文档也应该指定合适的语义约束XHTML使用 DTD来指定语义约束
DTD信息应添加到XHTML文档的开头部分也是XHTML文档的必须部分
XHTML1.0的三种文档类型分别对应如下三种DTD声明
XHTML 1.0 Strict整个文档需要干净的XHTML标记
严格的XHTML语义约束
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhrml1/DTD/xhtml1-strict.dtd” XHTML 1.0 Transitional这种文档语义约束和传统的HTML文档保持了较好的兼容性是常用的DTD语义约束
传统的XHTML语义约束
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhrml1/DTD/xhtml1- Transitional.dtd” XHTML 1.0 Frameset页面中需要使用框架使用这种类型的DTD语义约束
框架集XHTML语义约束
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhrml1/DTD/xhtml1- Frameset.dtd” 一旦指定了某个页面使用框架集则该页面不能再包含body/元素 XHTML的常用标签:
1. 基本标签
html:是HTML的根元素在XHTML文档中使用时可以指定一个xmlns属性其值只能是http://www.w3.org/1999/xhtml.
h1到h6定义标题一到标题六
!--…-à:定义注释
div:定义文档中的节span与div基本相似区别只是span定义的节默认不会换行
几乎所有的HTML元素都可以指定id,style,class属性id属性用于为XHTML元素指定一个唯一的标识该标识是通过DOM访问XHTML元素的重要途径class和style属性是css样式相关属性 span/,div/,p/:三个元素的效果有点类似都可作为其他内容的容器。
span/元素和p/元素只能包含文本图像超链接文本格式化元素表单控件元素等内容p/元素可包含span/元素但span/元素不能包含p/元素。div/元素除了包含以上元素包含p/,span,还可包含h1到h6,form…/,table../,列表项元素和div…/元素由此可见div…/元素可以包含更多的内容
1. 文本格式标签基本的格式化如果需要对文本进行更丰富的格式化建议使用CSS
bdo:定义文本的显示方向dir属性值只能是ltr或者rtl
2. 超级链接和锚点
XHTML使用超链接与网络上的另一个资源保持关联
a…/元素 href指定超链接所关联的另一个资源 Target指定使用框架集中的哪个框架来装载另一个资源该属性值可以是_self,_blank,_top,_parent等值分别代表自身新窗口顶层框架父框架来装载新资源
Href属性值如果是一个相对路径浏览器会再该页面的基准路径上加上该文件名作为此超链接所关联的资源 URL统一资源定位器用于对互联网上的文档进行寻址。
URL地址解释
Scheme://host.domain:port/path/filename
Scheme:指定因特网服务的类型最流行的类型是HTTP
Host:指定此域中的主机如果省却掉则HTTP默认主机是www
Domain:指定因特网域名比如 XXX.org等
Port:指定主机的端口号。端口号可以被省略HTTP服务的默认端口是80
Path:指定远程服务器上的路径该路径可以被省略省略该路径则默认被定为到网站的根目录
Filename指定远程文档的名称如果省略通常会定位到index.html等文件或定位到Web服务器上设置的其他文件
URL最流行的scheme以及对应的资源
Scheme 对应资源
File 本地磁盘上
ftp 远程ftp服务器上的文件
http World Wide Web服务器上的文件
news 新闻组上的文件
telnet Telnet连接
gopher 远程Gopher服务器上的文件
a…/元素还可以生成一个命名锚点命名锚点用于在XHTML页面生成一个定位点这样允许超链接直接连接到指定页面的该定位点
插入定位锚点需要指定name属性name 属性的值就是该命名锚点的名称a name”test”/a/ a href”asf.html#test”定位到test锚点/a
定位到锚点需要在URL资源后指定锚点名锚点名和资源之间以#隔开 列表相关标签
ul:无序列表 只能包含li…/子元素
ol:有序列表只能包含li…/子元素在XHTML 1.0 Transitional的语义下该元素可以指定如下两个属性;start:指定列表项的启始数字。默认是第一个如1A等type:指定使用哪种类型的编号例如1代表使用数字A和a代表使用字母I和i代表使用罗马数字
li:定义列表项目该元素里可以包含与div…/完全类似的内容因此合一包含较多类型的子元素
dl:也用于定义列表只能包含dt…/和dd…/两种子元素
dt:定义标题列表项该元素只能包含文本图像超级链接文本格式化元素和表单控件元素
dd:定义普通列列表项可以包含与div…/完全类似的内容因此可以包含较多类型的子元素
图像相关标签
img…/
map:用于定义图像映射该元素主要包含一个或多个area…/子元素每个area…/子元素定义一个区域不同的区域可以连接到不同的URL
area:用于定义图像映射的内部区域该元素只能是一个空元素可以指定如下属性
Shape:该内部区域是哪种区域默认是“rect”即矩形区域还可以是circle,poly圆形区域和多边形区域
Cords:可指定多个坐标值用于确定图像的位置
Href:用于确定该区域所连接的资源
Alt:指定一段文本为该图片区域的提示信息
Target:用于指定使用框架集中的哪个框架来装载另一个资源
map…/元素定义了图像映射就可以让指定图片使用该图像映射通过img…/元素指定usermap属性让该图片使用图像映射设置usemap属性值为#mapname即可
表格相关标签
table只能包含0个或1个caption…/子元素0个或一个thread…/子元素0个或一个tfoot…/子元素多个tr…/子元素多个tbody…/子元素
th:用于定义表格页眉的单元格和td用法完全一样只是浏览器在呈现时有一定差别
tbody:用于定义表格的主体该元素只能包含tr…/子元素使用tbody可以将表格分为几个独立的部分将表格中的一行或几行合并成一组使用Ajax时常需要动态修改表格中的某几行就需要使用tbody…/元素了
thead定义表格的页头用法与tbody基本相似指定功能稍有差别
tfoot定义表格的页脚用法与tbody基本相似指定功能稍有差别
thead…/,tfoot…/,tbody…/元素可以让我们对表格中的行进行分组每个tbody…/都是一组可以多行在Ajax编程中经常用到如果在创建表格时希望拥有一个标题行由多个数据行组成以及位于底部的一个统计行以便浏览器对表格标题和页脚之间的表格内容进行滚动且在打印成表格内容时表格的表头和页脚打印在包含表格数据的每个页面上都要借助与这三个元素实现
table
caption/caption
thead
tr
th/th
th/th
/tr
/thead
tfoot
tr
td/td
/tr
/tfoot
tbofy
tr
td/td
td/td
/tr
tr
td/td
td/td
/tr
/tbody
/table
这三个元素只能在table…/元素内使用这些标签 框架相关标签
通过使用框架可以将浏览器分成几个不同的部分允许在一个浏览器窗口中显示多个XHTML页面
在XHTML中使用框架应该在XHTML页面中使用”XHTML 1.0 Frameset”DTD而且框架集主页面的html…/元素中不允许包含body子元素普通的html…/元素只能包含head…/和body…/两个子元素如果需要在框架集页面中包含body…/元素应将body…/子元素放在noframes…/元素之中框架集页面使用frame…/元素来装载其他页面
framset用于定义一个框架集包含其他框架该元素只能包含frameset…/,frame…/,noframes…/三种子元素
noframes用于定义框架集的非框架部分该元素的内容不会被显示出来 与框架相关的还有一个iframe…/元素该元素可以在XHTML页面中使用用于生成一个内联框架在用法上与frame…/元素非常相似但不支持noresize属性只是该元素无需放在frameset…/元素内部可以直接放在HTML页面的任意位置
XHTML的表单标签
form…/ 属性enctype用于指定对表单内容进行编码所使用的字符集 Target:用于指定使用哪种方式打开目标URL(提交请求会打开另一个URL资源)
Get请求会将请求参数的名和值转换成字符串并附加在URL之后传送的数据量较小一般不大于2KB
POST请求提交表单的方式发送需要设置form…/元素的method属性为post传送的数据量大通常认为post请求参数的大小不受限制往往取决于服务器的限制post请求传输的数据量总比GET传输的数据量大而且post方式发送的请求参数以及对应的参数值放在HTML Header中传输用户不能再地址栏里看到请求参数值相对安全性高
HTML HEADER
Http头信息。一个表单在提交后会被转换成http头信息比如你有一个 from1里面有二个文本框a,b.在提交后AB会被转成一段信息附加到http头然后请求这个URL并发送这个头信息远程服务器则可以通过http hander获取你提交的AB信息
表单的enctype属性用于指定表单数据的编码方式有如下3个值
Application/x-www-form-urlencoded:这是默认的编码方式它只处理表单控件里的value属性值采用这种编码方式的表单会将表单控件的值处理成URL编码方式
Multipart/form-data:这种编码方式会以二进制流的方式来处理表单数据会把文件域指定文件的内容也封装到请求参数里需要通过表单上传文件时使用该属性值
Text/plain:这种编码方式在表单的action属性为mailto:url的形式时比较方便这种方式主要适用与直接通过表单发送邮件 在XHTML页面中提交请求通常有两种方式提交表单和使用超文本链接提交表单可以让用户输入请求参数并以PSOt方式提交请求如果以超链接方式来提交请求则只能提交GET请求超链接提交请求也可以包含请求参数只是不能收集用户输入而已 form…/元素里定义一个或多个表单控件一旦提交该表单该表单里的表单控件将会转换成请求参数规则如下
1. 每个有name属性的表单控件对应一个请求参数没有name属性的表单控件不会生成请求参数
2. 如果有多个表单控件有相同的name属性则多个表单控件只生成一个请求参数只是该参数有多个值
3. 表单控件的name属性指定请求参数名value指定请求参数值
4. 如果某个表单控件设置了disable”disable”属性则该表单控件不再生成请求参数
大部分表单控件input…/(除了type”hidden”)button../select…/textarea…/都能获得鼠标焦点响应鼠标事件因此都可以设置onfocus和onblur属性分别用于设置得到焦点和失去焦点的事件响应而且这些表单控件都可以指定一个tabindex属性通过设置tabindex属性可让用户无需使用鼠标就可以让输入焦点在个表单控件上转移
单选框复选框不能接受用户输入因此定义它们时也会指定value属性值用于设置它们对应的请求参数值对于单选框复选框而言只有当它们被勾选后才会生成对应的请求参数 文件上传域会生成一个单行文本框和一个“浏览按钮”允许用户通过浏览本地磁盘文件并将该文件上传到服务器 图像域和提交域的作用基本一样作用基本一样单击它们都会导致表单被提交区别就是图像域是一个图像按钮
input…/属性
Checked;用于设置单选框复选框的初始状态是否被选中值只能是checked
Disable:设置首次加载时禁用此元素值只能是disable表示该元素被禁用该元素无法获得输入焦点无法被选中无法在其中输入文本无法响应鼠标单击双击等事件当type”hidden”时不能指定该属性
Maxlength:其值是一个数字用于指定文本框中允许输入的最大字符数 Size:用于指定该元素的宽度 当type”hidden”时不能指定该属性
Src:用于指定图像域所显示图像的URL只有当type”image” 时才可以指定该属性
Align:用于指定图像域之后的文本的对齐方式值可以是left,right,top,texttop,middle,absmiddle,baseline,bottom,absbottom等只有当type”image”时才可指定该属性
采用Get方式发送请求所以请求参数名请求参数值将被追加到URL之后参数字符串的请求参数名和请求参数值之间以等号隔开多组请求参数之间以隔开
请求URL的最后部分是 ok %CC%E1%BD%BB 该请求参数由用户单击的“提交”按钮生成用户通过哪个按钮提交表单则该按钮也会生成请求参数前提是该按钮指定了name 属性值。该“提交”按钮的value属性值为“提交”使用application/x-www-form-urlencoded对“提交”字符串编码后得到“%CC%E1%BD%BB”字符串
使用label定义标签
label…/元素不需要生成请求参数因此不要为lable…/元素指定value 属性值
label…/元素可已指定一个for属性用于指定该标签与哪个表单控件关联
label…/生成的标签有一个作用当用户单击label…/所生成的标签时该标签关联的表单控件元素就会获得焦点
让标签和表单控件关联有两种方式
隐式使用for属性指定label…/元素的for 属性为所关联表单控件的id属性值
显式关联将普通文本表单控件一起放在label…/元素内部即可(尽量少用浏览器不是很好的支持)
form
label for”username”/label
input id”username” name”username” type”text”/br/
label密码框input id”password” name”password” type”password” //labelbr /
input id”ok” type”submit” value””/
/form
使用Button定义按钮
button…/元素用于定义一个按钮在其内部可以包含普通文本文本格式化标签图像等内容这也是button…/按钮和input…/按钮的不同之处button…/和input… type”button”/相比提供了更为强大的功能和更丰富的内容button/button标记之间的所有内容都是该按钮的内容其中包括任何可接受的正文内容文本或图像。
button与/button标记之间不要放置图像映射因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为
列表框和下拉菜单
一个select…/元素到底是生成列表框还是生成下拉菜单完全由是否指定了size或multipe属性来决定只要指定了这两个属性其中之一浏览器就会生成列表框否则就是下拉菜单
select…/元素里只能包含option…/和optgroup…/两种子元素其中option…/定义列表项或菜单项而optrgoup…/用于定义列表项或菜单项组 。option…/元素里只能包含文本内容作为该选项的文本optgroup…/里只能包含option…/子元素处于optgroup…/里的option…/就属于该组
optgroup…/属性label用于指定该选型组的标签这个属性必填
Disable:用于设置禁用该选项组里的所有选项其值只能是disabled.
Textarea定义文本域
可以接受用户输入用户可以选中文本域中的文本因此可以指定onselect和onchange两个属性分别用于响应文本域内文本被选中和文本被修改的事件
textarea…/指定name 属性作为请求参数的参数名与单行文本不同的是textarea…/
不能指定value属性textarea和/textarea标记之间的内容将作为textarea…/所对应的请求参数的参数值
XHTML元信息
base…/用于指定该页面中的所有连接的基准链接必须是空元素 href:用于指定所有链接的基准链接target:用于指定超级链接默认在哪个窗口打开其值只能是_blank _parent _self _top其中之一
meta…/用于定义页面元信息定义元信息就是指定一些name-value对
meta…/属性http-equiv:用于指定元信息的名称该属性指定的名称具有特殊意义可向浏览器传回一些有用的信息帮助浏览器正确处理网页的内容
Name:指定元信息的名称
Content:用于指定元信息的值 meta…/元素里的http-equiv属性和name 属性的作用基本相同只是http-equiv属性值通常有规定应该是浏览器可以是别的具有特殊意义的名称
http-equiv:
Expires:指定网页的过期时间一旦网页过期则必须重新从服务器上下载
meta http-equiv”Expires” content”Sat Sep 277 16:12:36 CST 2011”/
Pragma:指定禁用浏览器从本地磁盘缓存中调阅页面内容浏览器一旦离开该页面就无法脱机访问该页面
meta http-equiv” Pragma” content”no-cache”/
Refresh:用于指定浏览器多长时间后自动刷新指定页面
meta http-equiv” Refresh” content”2”/
meta http-equiv” Refresh” content”2” URL”http://www.baidu.com”/
Set-Cookie:设置Cookie如果网页过期那么客户端上的Cookie也将被删除
meta http-equiv” Set-Cookie” content”namevalue;expiresSat Sep 277 16:12:36 CST 2011”/
Content-Type:设置该页面的内容类型和所用的字符集
meta http-equiv” ContentType” content”text/html;charsetGBK”/
