首页 > 网站 > WEB开发 > 正文

XHTML 基础(含部分css)

2024-04-27 14:28:18
字体:
来源:转载
供稿:网友
XHTML 基础(含部分CSS

基于http://www.ycku.com/xhtml/ 的视频教程的一些笔记

关于xhtml的解释 引用百度百科

可扩展超文本标记语言,是一种置标语言,表现方式与超文本标记语言(HTML)类似,不过语法上更加严格。从继承关系上讲,HTML是一种基于标准通用置标语言的应用,是一种非常灵活的置标语言,而XHTML则基于可扩展标记语言,可扩展标记语言是标准通用置标语言的一个子集。XHTML 1.0在2000年1月26日成为W3C的推荐标准。
下面的例子在头部声明使用了html5了<!doctype html>,只是在语法上更加靠近xhtml而已,实在有误请有望提出,个人感觉先学习XHTML再去学习HTML5会比较理想对于大部分的标签的属性可以到http://www.Vevb.com.cn/tags/index.asp 进行查询了解,一般进行控制外观的内置属性开发中基本甚少使用,所以这里就不细说了。然而css基本要在开发中才会发现一些比较在意的问题,可以去看兼容性问题(pc css),然而切片布局的,稍后会开新的稍微说说自己目前的见解。

XHTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

XHTML1.0 风格标记

1.所有单标记都必须关闭:<br />、<hr />、<option />等

2.所有的单属性必须等于自身:checked="checked"、readonly="readonly"等

3.尽可能不使用废弃标记:<center>、<font>等

4.尽可能不使用废弃属性:align、bgcolor

html基本标签

<!doctype html><html><head><meta charset="UTF-8"/><title>标题</title><body>粗 <b>cu</b><br>斜<i>xie</i><br>删<s>sha</s><br>下划<u>u</u><br>电报<tt>dianb</tt><br>下标<sub>shang</sub><br>上标<sup>xia</sup><br><address>dianzhi</address><br><big>大写:字体变大</big> <br><del>删除</del><br><ins>修改 下划线</ins><br><small>xiaoxie:字体变细</small><br><strong>jiaqiang jiacu</strong> 基本与b标签一样<b>jiaqiang jiacu</b><br><em> xieti jiaqiang</em><br><PRe> 格式化让文本的空格和换行都显示在html上面</pre><p>同一的html标签也是这样,采取更有语意性的</p><p><blockquote>同一的html标签也是这样,采取更急有语意性的</blockquote></p>blockquote 引用标签所以del strong em ins这些标签比上述标签会起到更好的语意作用;</body></head></html>

  

blockquote 引用文本,左右缩排

del strong em ins这些标签比上述标签会起到更好的语意作用;然而html5已经删除了部分标签了

html序列

<!doctype html><html><head><meta charset="UTF-8"/><title>hao</title></head><body>无序列表       <ul type="circle">              <li>1</li>              <li type="disc">2</li>       </ul>有序列表       <ol type="">              <li>1</li>              <li>2</li>       </ol>定义列表(无前序)<dl>       <dt>13</dt>              <dd>11</dd>              <dd>11</dd>       <dt>题目</dt>              <dd>细明</dd>              <dd>细明</dd></dl></body></html>

由于使用css reset之后,dd的margin-left的值被清空 来实现{float:left} ,清空前序号样式 {display:inline;}不过一般在reset里面已经使用了

html表格

<!doctype html><html><head><meta charset="UTF-8"><title>表格</title></head><body>       <table summary='这是一个注释,结构化提示信息,搜素,页面不会显示出来' border="1">              <thead></thead>              <tbody>              <col bgcolor='red'></col>              <colgroup bgcolor='green'></colgroup>              <tr>                     <th>a</th>                     <td>b</td>                     <th>c</th>              </tr>              <tr >                     <th>1</th>                     <th>1</th>              </tr>                            <tr >                     <th colspan='3' >1</th>              </tr>              </tbody></table>table边框设置frame和rules 不常用,对边框的设置cellspacing 0cellpadding 0nowrap限制文本框里面不换行th是隐藏了一个加粗和居中的属性col标签对应table的列进行操作,例如颜色或者背景</body></html>

  

表格的背景优先级会比背景颜色优先级高

html图像

<!doctype html><html><head><meta charset="UTF-8"><title>图像</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></head><body><p><img src="" width='200px' align="left" vspace="10" hspace="10" height='150px' alt="tuxiang"/>文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top</p>缺省是bottom,在图像最的下方见到文字,top上 center中间<br/>主要用 left或者right,align left或者right属性的设置相当于 浮动float的设置(博客或者日志的图文粗略显示模式<br/>vspace="10" hspace="10" 对应上下margin <br/>上述基本属性基本使用css来实现就可以了<br/>在a标签的包括下图像,边框的设置:css设置图像边框为0,css reset中要设置设置图标 ie6会有问题显示不了图标<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><a href="http://localhost"><img src=""  width='200px' style="border:0px"></a></body></html>

  

Alt属性对应无图像加载时候,对图像的描述,开发的时候必须加入,然而title属性看效果使用也无伤大雅。

Html 超链接

<!doctype html><html><head><meta charset="UTF-8"><title>超链接</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></head><body><pre>超链接也叫 URL 中文翻译为资源定址器.这个定址器的功能主要告诉浏览器根据 URL的地址找到所需的资源。格式:scheme://host[:post]/path/filenamescheme指的是 http,ftp,file,mailto,news,gopher,telnet 七种host 指的是 ip 地址或计算机名称post 指的是服务器端口path 指的是文件路径filename 指的是文件基准参考点基本格式:&lthead&gt&lt basehref=”http://localhost:8080”&gt &lt/head&gt对应的该页面下的超链接为http://localhost:8080/*</pre><a href="mailto:163@163.com">163@163</a>href="mailto:163@163.com" 使用本机的邮件发送</br>锚点 a设置name name="123"</br>跳转到123的锚点,a超链接 href写的#123 一般直接使用top返回顶部,对应某些页面的锚点,使用href="1.html#123"超链接hover 点击后css失效  使用正确的书写顺序 link visited hover active 其实就是一个样式重写的问题</body></html>

  

Target属性 target="_blank" 新窗口打开

_blank

浏览器总在一个新打开、未命名的窗口中载入目标文档。

_self

这个目标的值对所有没有指定目标的 <a> 标签是默认目标,它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的,除非和文档标题 <base> 标签中的 target 属性一起使用。

_parent

这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中,那么它与目标 _self 等效。

_top

这个目标使得文档载入包含这个超链接的窗口,用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

当然你还可以自己定义新窗口的名称 例如target="du" 然后新窗口都会在du 这个窗口或者标签打开了

<ul>

<li><a href="/example/html/pref.html" target="view_window">Preface</a></li>

<li><a href="/example/html/chap1.html" target="view_window">Chapter 1</a></li>

<li><a href="/example/html/chap2.html" target="view_window">Chapter 2</a></li>

<li><a href="/example/html/chap3.html" target="view_window">Chapter 3</a></li>

</ul>

超链接全部会在定义的view_window 打开,不会重复开过多页面

html 表单

<!doctype html><html><head><meta charset="utf-8"><title>表单</title></head><body>       <input type="image" src="1.jpg" alt="文本">       <button >       <img src="1.jpg"  alt="文本">       </button>       <input type="file">              <select  name='good'>       <optgroup label="广东"&g
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表