XHTML笔记

最新推荐文章于 2019-09-01 19:37:08 发布

ddv1999

最新推荐文章于 2019-09-01 19:37:08 发布

阅读量1.1k

点赞数

字体修饰标记

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

斜体：<i>内容</i>

下划线：<u>内容</u>

下标：<sub></sub>

上标：<sup></sup>

字体颜色、大小：<font size=“字号大小，取值1-7” color=“颜色单词”>内容</font>

例如：<font size=”6” color=”blue”>大家好</font>

<body>的常用属性

Text：指网页的前景颜色，就是指网页中的文本颜色；

bgColor：网页的背景颜色

background：网页背景图片路径。background=”images/bg.gif”

例如：<body bgcolor="#999999"background="bg01.jpg">

排版标记

1、水平线：<hr size=“线的粗细” width=“线的宽度” align=“水平对齐方式” noshade>

常用的属性：

Size：指定水平线的粗细，单位默认是像素，例如：size=5

Width：指定水平线的宽度，取值：固定值、百分比。例如：width=500 width=50%

Align：水平线的水平对齐方式，取值：left、center、right

Noshade：不加阴影，也就是纯色显示，该属性比较特殊，没有属性值。

2、段落标记：<p></p>

Align：水平对齐，取值：left、center、right

提示：在段落的前后，会自动插入一个空行。

3、标题标记

一级标题：<h1 align=“left|center|right”></h1>

二级标题：<h2></h2>

三级标题：<h3></h3>

四级标题：<h4></h4>

五级标题：<h5></h5>

六级标题：<h6></h6>

4、预排版标记<pre></pre>

含义：将保留其中的所有的空白字符(空格、换行符)。原封不动的输出结果。

说明：真正排网页过程中，<pre>标记几乎用不着。但在PHP中用于打印一个数组时使用。

HTML字符实体

空格： 

>：>

<：<

&：&

人民币：¥

版权：©

乘号：×

除号：÷

项目符号(无序列表)标记

标记结构：

<ul>

……

</ul>

常用属性：

Type：指定项目符号的类型，取值：disc(实心圆点)、circle(小圆圈)、square(方块)

提示：这个type属性，既可能给<ul>添加，也可以给<li>添加。

注意：项目符号可以是图片，但是通过CSS设置<li>标记的背景图片来实现。(CSS中讲)

项目符号之间相互嵌套

<ul>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

说明：项目符号嵌套，是在某一个<li>标记中来嵌套一个完整的<ul>标记。

编号列表(有序列表)标记

<ol>

……

</ol>

常用的属性：

Type：编号的类型，取值：1、a、A、I(大罗马)、i(小罗马)

Start：从第几开始编号，取值只能是数字。

<h2>编号列表的应用</h2>

<ol>

<li type="a"start="3">JavaScript</li>

<li>PHP+MySQL</li>

</ol>

编号列表相互嵌套：跟上面<ul>的嵌套一样，也都是在<li>标记中，来嵌套一个完整的<ol>。

定义列表的格式：

<dl>

</dl>

标记的解释说明：

dl，define List

dt，define title

dd，define description

<dl>标记中，至少包含一个<dt>或<dd>标记，也可以包含多个<dt>或<dd>。

<dt>定义标题，这个标记是必须的；

<dd>描述信息，可以根据情况使用，如果不需要它，可以不用加。

<div>和<span>

<div></div>和<span></span>标记，没有任何意义，但在网页中，又是使用最多的标记。

这两个标记，基本上没有太多的属性。

<div>和<span>这两个标记，一般要结合CSS来实现效果，或者说，DIV+CSS来实现各种样式。

块元素和行内元素(详细在CSS中再讲)

块元素(标记)：是块元素的前后，会自动插入一个换行符。块元素会另起一行进行排版。

比如：<div>、<p>、<ul><ol><dl>、<pre>、<h1>、<h2>等

行内元素(标记)：行内元素的高度和宽度由内容决定。多个行内元素将排在同一行，不会另起一行进行排版。

比如：<font><b><i><u><a><span>等

滚动字幕标记

常用属性：

Direction：滚动的方向，取值：left、 right、up、 down

Behavior：滚动的方式，取值：alternate(弹动)、scroll(滚动)、slide(滚动一次)

bgColor：背景颜色

width：滚动的宽度

height：滚动的高度

align：水平对齐方向，取值：left center right

scrollAmount：滚动的步长值，值越大，滚动的越快。

scrollDelay：两次滚动间的停留时间

<marqueedirection="up" width="450" height="300"bgcolor="#FFFF99" behavior="scroll" scrollamount="10"scrolldelay="1000"></marquee>

超级链接

1、概念：要想从一个网页跳转到另一个网页，就需要使用“超级链接”来实现。

2、超级链接的标记<a></a>，双边标记，是行内元素

常用属性：

Href：目标URL，如：href=http://www.sina.com.cn href=“about/index.html”

Name：主要用于设置一个锚点的名称。

Target：设置目标页面打开方式。

_blank：在新窗口中来打开目标文件，原来的窗口不关闭

_self：在当前窗口中来打开目标文件，原来窗口中的内容将被替换掉。

_top：在最顶层窗口中来打开目标文件，常用于“框架技术”中

_parent：在父级窗口中来打开目标文件，常用于“框架技术”中

例如：<a href=“http://www.sina.com.cn”></a>

5、其它常用的链接

E-mail链接：<ahref="mailto:976296751@qq.com">给我发邮件</a>

下载链接：任何网页不能直接执行的文件，都会出现下载对话框。

网页可以直接执行的文件：.html .jpg .png .gif .htm

空链接：<a href="#">课外100网论坛</a>

JS空链接：<ahref="javascript:void(0)">JS的空链接</a>

提示：在HTML中写JS程序时，一般是以“javascript:”开头，void(0)返回一个假值，什么也不做

JS的弹出一个警告窗口：<ahref="javascript:alert('别烦我！')">请点我！</a>

提示：alert()是JS的Window对象的一个方法，弹出一个字符串信息。

6、锚点链接：实现在一个网页的不同部分进行跳转

第一步：先定义一个锚点(记号)

<a name=“top”></a> 中间一般不写内容

第二步：链接到定义的锚点所在的位置

地址栏中的地址显示：http://www.sina.com.cn/about/index.html#top

图片标记

单边标记：<img>

常用的属性

Src：指图片的路径，如：src=“images/bg.gif”

Width：指图片的宽度，不加单位。Width=400

Height：指图片的高度。

Align：指图片的水平对齐方式，取值：left center right

Border：图片的边框线的粗细

Alt：如果图片不显示时，将显示alt指定的内容

Hspace：指图片左右的边距

Vspace：指图片上下的边距

Title：指定图片的提示信息，有利于SEO优化(关键字优化)

说明：title是一个公共的属性，任何标记都有title属性。

注意事项：

（1）如果要想保证图片等比例缩放，请只设置width和height其中一个。

（2）如果想实现图文混排的效果，请使用align属性，取值为left或right。

<a href=“images/word.exe”>下载Word软件</a> .html .htm .jpg .png .gif .css .js

<a href=“mailto:beijing2000@126.com”>给我发邮件</a>

<a href=“javascript:alert(‘大家好’)”>弹出一个警告窗口</a>

锚点：通过锚点(记号)，可以访问到一个网页的不同地方。

定义锚点：<a name=“top” id=“top”></a>

说明：name属性是HTML4.0以前使用的，id属性是HTML4.0后才开始使用。为了向前兼容，因此，name和id这两个属性都要写上，并且值是一样的。

链接到锚点：<a href=“news/news.html#top”>锚点链接</a>

DTD文档类型定义

DTD，Document Type Definition文档类型定义，是一套标记的规则，理解为一种“验证机制”。

DTD有三种类型：

第一种：Strict严格型：在这种XHTML中，结构中不能出现格式或表现的内容。

格式标记：<font>、<b>、color属性、background属性

这种类型下，在<body>中只有结构标记，不能出现任何的表现。

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

第二种：Transitional过渡型：在这种XHTML中，结构中可以出现格式标记或表现(CSS)的内容。(用的最多)

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

第三种：Frameset框架型：在这种XHTML中，可以使用框架技术，实现多个网页在一个浏览器窗口中呈现

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<meta>

（1）<meta>标记的概念

（2）<meta>的两个属性

http-equiv：相当于http的文件头信息，告诉浏览器如何正确的显示网页的内容。

name：描述信息，指定网页关键字、网页描述、作者、版权信息

（3）常用的<meta>设置

设置网页的字符集：<meta http-equiv=“content-type” content=“text/html;charset=utf-8” />

网页自动刷新：<meta http-equiv=“refresh”content=“3” /> 3秒自动刷新网页

延迟一定时间后跳转：<meta http-equiv=“refresh” content=“3;url=http://www.sina.com.cn” />

设置网页的关键字：<meta name=“keywords” content=“网站建设,广州网站,网站开发”/>

网页描述：<meta name=“description” content=“描述信息” />

网站作者：<meta name=“author” content=“广州” />

……

表格的结构

<table>

<tr>

</tr>

<tr>

</tr>

</table>

表格结构的说明：

<table>是表格标记，里面包含<tr>行标记；

<tr>代表一个行

<td>或<th>代表一个单元格(列)，<th>标题单元格(内容居中加粗显示)，<td>普通单元格

2、<table>的常用属性

Width：表格的宽度

Height：表格的高度

Border：表格的边线粗细

Bordercolor：表格的边线颜色

Align：表格的水平对齐方式，取值：left center right

Cellpadding：指单元格边线到内容间的距离(内边距)

Cellspacing：指两个单元格之间的距离(外边距)

bgColor：表格背景色

background：表格的背景图片

注意：在HTML中所有的属性值都不加px单位，但在CSS中所有数值都必须加单位。

3、<tr>的常用属性

Height：一行的高度

bgColor：行的背景色

align：一行的内容水平居中显示，取值：left、center、right

valign：行的内容垂直居中，取值：top、middle、bottom

4、<td>或<th>的属性

Width：单元格的宽度

Height：单元格的高度

bgColor：背景色

background：背景图片

align：单元格内容水平对齐

valign：单元格内容垂直对齐

rowspan：合并行的单元格(跨行合并)合成一列

colspan：合并列的单元格(跨列合并)合成一行

实例：用户登录的表单

用户名：<input type="text"name="username" size="40" />

密码：<inputtype="password" name="password" size="40" />

<inputtype="submit" name="submit" value="提交表单" />

</form>

<form>标记常用属性

Name：表单的名称，用于JS来操作或控制表单时使用；

Id：表单的名称，用于JS来操作或控制表单时使用；

Action：指定表单数据的处理程序，一般是PHP，如：action=“login.php”

Method：表单数据的提交方式，一般取值：get(默认)和post

GET方式：将表单数据，以“name=value”形式追加到action指定的处理程序的后面，两者间用“?”隔开，每一个表单的“name=value”间用“&”号隔开。

/login.php?username=admin&password=admin1234&submit=提交表单

特点：只适合提交少量信息，并且不太安全(不要提交敏感数据)、提交的数据类型只限于ASCII字符。

POST方式：将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见。

Action指定的处理程序可以获取到表单数据。

特点：可以提交海量信息，相对来说安全一些，提交的数据格式是多样的(Word、Excel、rar、img)

Enctype：表单数据的编码方式(加密方式)，取值：application/x-www-form-urlencoded、multipart/form-data

Enctype只能在POST方式下使用。

Application/x-www-form-urlencoded默认加密方式：除了上传文件之外的数据都可以

Multipart/form-data：上传附件时，必须使用这种编码方式。

单行文本框：用户名、邮箱、QQ号、公司地址等

Type：指定文本框的类型，取值：text(文本框)、password(密码)、radio(单选)、checkbox(复选框)

Name：指定文本框的名称

Value：指文本框中默认显示的文本；

Size：指文本框的宽度(字符数)

Maxlength：最大可以输入多少个字符

注意：表单和表格嵌套时，是在<form>标记中赋套<table>标记。

单行密码框

7、单选项

<input type=“radio”name=“sex”value=“先生”checked=“checked” />先生

<input type=“radio”name=“sex”value=“女士”/>女士

Checked属性：是默认选择其中一项。

提示：单选是一组相互排斥的选项，每次只能选择一个，不能同时选择多个。

8、复选框：同时选择多个，也可以一个都不选

<input type=“checkbox” name=“hobby”value=“KK” checked=“checked” />KK

<input type=“checkbox” name=“hobby”value=“TT” />TT

<input type=“checkbox” name=“hobby”value=“AA” />AA

Checked属性：默认选中哪几个选项

提示：复选框也是一组选项，名称是一样的，最终用PHP来获取值时，将产生一个数组(一个名称好几个不同的值)的结果。

9、上传文件

提示：如果要限制上传文件的类型，需要配合JS来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。

10、文本区域

<textarea name=“name” cols=“宽度” rows=“高度”>默认的显示文本</textarea>

11、下拉列表

</select>

Selected属性：是默认选中一个下拉列表项；

12、提交按钮、重置按钮、普通按钮、图片按钮

提交按钮：<input type=“submit” name=“submit” value=“提交表单” />

注意：如果按钮上的文本，不想发送到服务，可以不用加name属性。

重置按钮：<input type=“reset” name=“reset” value=“重新填写” />

普通按钮：<input type=“button” name=“button” value=“普通按钮”/>

普通按钮没有任何功能，既不会提交表单，也不会重置表单；如果想实现“提交”“重置”功能，将需要配合JS来实现。

图片按钮：<input type=“image” src=“图片的URL”/>

图片按钮的默认动作，就是提交表单。

ddv1999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
XHTML笔记

字体修饰标记加粗：内容斜体：内容下划线：内容下标：上标：字体颜色、大小：内容例如：大家好的常用属性Text：指网页的前景颜色，就是指网页中的文本颜色；bgColor：网页的背景颜色background：网页背景图片路径。background=”images/bg.gif”例如：排版标记1、水平线：
复制链接

扫一扫