XHTML的标签和表格

最新推荐文章于 2024-07-22 15:13:59 发布
最新推荐文章于 2024-07-22 15:13:59 发布
阅读量134 收藏
点赞数
分类专栏： web 文章标签： xhtml javascript c/c++ ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011388643/article/details/84612772
版权

考试周基本结束了，昨天重温了一下XHTML，这里做下总结。

首先，一个HTML网页必须要有一个DTD开头，DTD是文档类型定义，用于定义文档的根元素是谁 ， 子标记有哪些 ， 字标记的属性有哪些，

主要有下面三种类型：

 

严格定义(Strict)

<!DOCTYPE html PUBLIC "-//WBC//DTD XHTML 1.0

Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">

 

过渡类型(Trasitonal)

<!DOCTYPE html PUBLIC "-//WBC//DTD XHTML 1.0

Trasitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml-trasitoinal.dtd">

 

框架集(Frameset)

<!DOCTYPE html PUBLIC "-//WBC//DTD XHTML 1.0

Frameset//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml-frameset.dtd">

 

其中过渡类型使用最多

 

接下来还有一行xmlns，它的作用类似于C++里面的定义标准命名空间。

 

<html xmlns=" http://www.w3.org/1999/xhtml">

 

接下来便是一些基本的HTML框架标签

<html>

<head>

    <title></title>

    <meta htttp-quiv="content-type" content="text/html;charset=utf-8"/>        <!-- meta标记用来定义字符集 -->

</head>

<body>

</body>

</html>

 

下面是文本标签

 

加粗：<b>内容</b><strong>内容</strong>

倾斜：<em>内容</em><i>内容</i>

下划线：<u></u>

删除线：<s></s><strike></strike>

上标：<sup></sup>

下标：<sub></sub>

代码标记：<code></code>

字体标记：<font></font><font size="">(size的范围是1~7)

                <font color="red">(或"#Oxfff" "rgb(0,0,0)")

 

                <font face="华文行楷">

<p>段落标记</p>        属性：<p ailgn="center|left|right">

换行：<br/>

标题：<h1 align="center"></h1>

图片：<img src="路径" alt="注释"/>（src alt是必有属性）

                                          属性：边框 border 宽 width 高 heigh

 

 

列表：

1、无序列表

<ul type="disc|square|circle">

<li>内容</li>

<li>内容</li>

</ul>

2、有序列表

<ol type="1|a|i|I" start="10|1">

<li>内容</li>

<li>内容</li>

</ol>

3、定义列表

<dl>

<dd>内容</dd>

<dt>对上面内容的定义</dt>

</dl>

 

表格：

<table width="800" border="100" bgcolor="" background="" cellpadding="内边距" cellspacing="外边距" align="">

<tr> 行

<th></th>    表头

<td></td>    td属性：colspan=""合并列  rowspan="" 合并行

<td></td>

</tr>

 

</table>

 

水平分割线：

<hr width size color align/>

 

实体：

< : &It

> : &gt

' : &apos(IE6不支持) &#39

" : &quot

& : &amp

空格 : &nbsp

商标 : &reg

版权 : &copy

 

HTML比较重要的一个标签<a></a>便是超链接，

<a href="目标文档的路径"></a>

 

target属性:

_selt 在自身窗口中打开

_blank 在新窗口打开

_parent 在父窗口打开

_top 在顶层窗口打开

在指定框架打开

超链接可以链接到：

静态网页、动态网页、下载的压缩文件、发送邮件、

javaScript

例：<a href="javaScript:alert(哈哈测试一下)">点击我弹出内容</a></p>

空链接

<a href="#"></a>   <a href="javaScript:void(0)></a>

锚点

定义锚点：<a name="锚点名称"></a>

链接到锚点： <a href="#锚点名称"></a>

<a href="目标文件的URL#锚点名称"></a>

例：

<p><a href="#p1">如何添加好友</a></p>

 

<p>如何添加好友<a name="p1"></a></p>

 

ok!最后再来一发自己写的网页：

 

<!DOCTYPE html PUBLIC"//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtml-trasitional.dtd">

<html xmlns=" http://www.w3.org/1999/xhtml">

<head>
	
	<title>拉手网</title>
	<meta http-quiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<!-- 网站logo部分开始 -->
	<table width="950" border="0" align="center" cellpadding="10" cellspacing="10">
		<tr>
			<td><img src="lashouimg/logo.png" arl=""/></td>
		</tr>
	</table>
<!-- 网页导航内容开始 -->
	<table width="950" border="0" align="center" cellpadding="10" cellspacing="10"
	bgcolor="orange">
		<tr>
			<td>身边团购</td>
			<td>今日新单</td>
			<td>美食频道</td>
			<td>电影频道</td>
			<td>酒店机票</td>
			<td>购物频道</td>
			<td>品牌特卖</td>
			<td>教育培训</td>
		</tr>
	</table>

<!-- 网页主体部分开始 -->
	<table width="950" border="1" align="center" cellpadding="10" cellspacing="10"
	bgcolor="white">
	<tr>
<!-- 第1个单元格 -->
		<td align="center">
			<p><img src="lashouimg/1.jpg" arl="" /></p>
			<p><b>【清河】927艺术蛋糕：8英寸蛋糕1个，款式4选1</b></p>
			<p align="left">¥<font  size="6" color="ff7300" >68</font>市场价<s>128</s></p>
		</td>
<!-- 第2个单元格 -->
		<td align="center">
			<p><img src="lashouimg/2.jpg" arl="" /></p>
			<p><b>【人民大学】峰尚圣宴</b></p>
			<p align="left">¥<font  size="6" color="ff7300" >68</font>市场价<s>128</s></p>
		</td>
<!-- 第3个单元格 -->
		<td align="center">
			<p><img src="lashouimg/3.jpg" arl="" /></p>
			<p><b>【果园】巴适火锅</b></p>
			<p align="left">¥<font  size="6" color="ff7300" >68</font>市场价<s>128</s></p>
		</td>

	</tr>

<!-- 网页主体内容结束 -->
<!--分页显示区域-->

<table width="950" align="center" cellpadding="10" cellspacing="10" border="1">
<tr>
<td align="right">上一页</td>
<td align="center">1 2 3 4 5 6</td>
<td>下一页</td>
</tr>
</table>

<!--服务保障开始-->

<table width="950" align="center" cellpadding="10" cellspacing="10" border="1">
<tr>
<td>
	<h3>服务保障</h3>
	<ul type="disc">
		<li>团购三包</li>
		<li>退换货服务</li>
		<li>支付方式</li>
	</ul>
</td>
<td>
	<h3>服务保障</h3>
	<ul type="disc">
		<li>团购三包</li>
		<li>退换货服务</li>
		<li>支付方式</li>
	</ul>
</td>
<td>
	<h3>服务保障</h3>
	<ul type="disc">
		<li>团购三包</li>
		<li>退换货服务</li>
		<li>支付方式</li>
	</ul>
</td>
</tr>
</table>

<hr width="950" align="center" color="gray" size="2">
<!--  网页尾部 -->

<p align="center" >&copy2014  北京拉手网络技术有限公司</p>
<p>联系我们：808080</p>

</body>
</html>

 

 

 ok~到底结束~~~~~~~~~~~~

 

 

 

 

 

 

 

 

 

 



 

 

nb_meng
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
XHTML中的常用标签整理
09-28
以下是一些常见的XHTML标签及其用途： 1. `<html>` 和 `</html>`：这两个标签构成了整个XHTML文档的框架，所有其他内容都应被包含在这两个标签之间。它们是文档的根元素。 2. `<head>` 和 `</head>`：这个标签对...
sublime_text3 快速生成xhtml表头手动设置
weixin_34234721的博客
06-13 149
1. 在github上手动下载emmet安装插件 https://github.com/sergeche/emmet-sublime#how-to-install 2.把下载的安装插件放到package目录下，重启sublime。   3. 安装emmet需要安装PyV8。 4. html:xt...
【HTML】表格标记
Cherie
04-30 6918
设计网页时经常会用到表格来组织页面信息，它能将网页划分成任意多个矩形区域，每个区域可包含导航、文字、图像、动画等信息，设计者可将任意的网页元素放入其中。 1. 表格的定义： 1）在需要使用表格的地方插入成对的标记，就可以完成表格的插入。定义表格常用的标记有 标签                                       说明
html单双标记
热门推荐
天王盖帝湖的专栏
01-25 1万+
HTML标记的类型：单标记与双标记 一.单标记 (1). 单一型，无属性值。 如： 在xhtml中，规定，所有HTML标记，都要小写，所有的标记都要有关闭。 (2). 单一型，有属性值。 如： 二.双标记 （3）.... 没有属性值。 如：... (4）.... 有属性。 如：... 说明： 标记与属性，属性之间以空格分隔。 属性不区分先后顺序；且属性不是必要的
HTML学习之表格标签学习
独狼的博客
06-12 163
<html> <head> <title>表格标签学习</title> <meta charset="UTF-8"/> <pre> 表格标签学习: table :声明一个表格 tr:声明一行,设置行高及改行所有单元格的高度. th:声明一个单元格,表头格.默认居中加黑显示 td:声明一个单元格,默认居左显示原始数据 注意: 行高即改行所有单元格的宽度
XHTML入门学习教程:表格标签的应用
01-19
表格是XHTML中处境尴尬的一个标签，本节只做了解即可. 关于表格 在CSS流行之前，table被广泛应用于定位。在XHTML中，table不被推荐用来定位，W3C希望CSS可以取代在定位方面的地位。不过事实上由于利用CSS布局常常...
XHTML常用的结构标签
12-13
这些标签构成了XHTML的基本框架，理解并熟练运用它们能帮助开发者构建更清晰、更语义化的网页结构，提高网页的可读性、可访问性和搜索引擎优化效果。在实际开发中，还需要遵循XHTML的语法规则，确保文档的正确闭合和...
Xhtml下不常用却很有用的标签
09-28
以下是一些这样的不常用但非常有用的XHTML标签的详细介绍： 1. `<base>`标签： `<base>`标签用于设置页面中所有链接的基础URL或者链接目标。例如，如果你想让页面的所有链接都默认打开在新窗口，可以这样做： ```...
web前端基础面试85题（一）
柯晓楠
07-18 780
1、什么是HTML语义化？<基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等>根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。2、为什么要语义化？为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 284
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 909
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
VUE中的重点*
最新发布
qq_61132537的博客
07-22 673
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
JavaScript 常见数学用法
2302_77250325的博客
07-17 402
与其他全局对象不同，Math对象没有构造函数。方法和属性是静态的。返回角 x（以弧度计）的正弦（介于 -1 与 1 之间的值）。返回角 x（以弧度计）的余弦（介于 -1 与 1 之间的值）。可以在不首先创建Math对象的情况下使用所有方法和属性（常量）。
jquery-选择器常见用法
随笔
07-18 213
jquery-选择器，对象下有多个子元素时如何选择
Vue3企业级项目开发实战课-笔记记录
tuku0801的专栏
07-20 946
实践 Vue 3 自研组件库开发、Node.js 服务端开发、Vue 3 结合 Node.js 的全栈项目开发以及全栈项目的单元测试等大厂常见的项目技术场景
style-components使用手册
m0_62323931的博客
07-17 1128
div><MyButton $primary $color="black">按钮</MyButton></div>
vue3 vxe-grid修改currentPage，查询数据的时候，从第一页开始查询
jwbabc的专栏
07-18 244
vxe-grid查询数据的时候，从第一页开始查询，并且清空选中，清空复选框状态等，查询数据查询。
谷粒商城实战笔记-35-前端基础-ES6-模块化
epitomizelu的专栏
07-20 517
模块化就是把代码进行拆分，方便重复利用。类似 java 中的导包：要使用一个包，必须先导包。JS 中没有包的概念，JS中类似的概念是模块。export和import。export命令用于规定模块的对外接口。import命令用于导入其他模块提供的功能。
ios CCUIAlertActivityView.m
编程语言技巧经验分享
07-17 809
// // CCUIAlertActivityView.m // CCFC // // #import "CCUIAlertActivityView.h" #import "CCNSNumber.h" #import "CCU
精简HTML标签：XHTML与CSS的高效结合
例如，用CSS替代表格布局和图片处理，可以使HTML代码更加纯粹，专注于结构化的数据表示。然而，我们在使用CSS时，可能会不自觉地添加过多的class属性，以为这样可以更方便地控制样式。实际上，这可能导致代码的臃肿...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值