XHTML相关知识点总结

更新时间：2023-07-27 19:07:01 阅读量：实用文档文档下载

说明：文章内容仅供预览，部分内容可能不全。下载后的文档，内容与下面显示的完全一致。下载之前请确认下面内容是否您想要的，是否完整无缺。

校花的贴身高手推荐度：
相关推荐

第二章 XHTML基础
元素与标签术语，HTML/XHTML/XML之间的联系与区别
在XHTML中，所有元素之间必须完成正确的嵌套，元素必须是闭合的，必须小写，必有一个根元素html。
标题标签（<h>)语法：<h# align="left|center|right">标题内容</h#>,其中#表示1到6之间的整数值
head标签：文档在网页中显示名称标签。<title> title text</title>
段落标签:<p align="left|center|right"> paragraph text</p>
换行标签：<br/>(没有终止标签的空元素标签，要求正确的关闭）<nobar>标签：禁止换行标签，成对出现<nobar></nobar>
水平线标签：<hr> <hr align="left|center|right" size="pixels" width="pixels or %" color="color or color code"/>
也是空元素标签，可以带有属性，必须正确的关闭。
注释标签
节元素（<div>) 语法：<div> content(text,image or table)</div>
超级链接(资源链接或锚链接）：<a>标签语法：<a href="url"> link text</a> 具有taget属性(新浏览器窗口中打开）：<a href="url" target="_blank"> link text</a>
路径及目录：绝对与相对路径。（用来组织网站的目录结构）
内链接（链接到页面中的一个位置，页内跳转）语法：1/首先是书签标记：<a name="label"> any content</a> 2、然后书签链接<a href="#label">link text</a>
标准邮件链接：<a href="mailto:someone@"> link text</a>
创建下载链接（即链接到资源的相应路径）pdf及压缩文件等文件均可。
插入图片：<img src="file name of image" alt="description text of image"/> file name of image为相应的链接地址
用图片作超链接：<a href="url"> <img src="file name of image" alt="description text of image"/> </a>
表格：<table> 语法：<table border="pixels">
<caption> caption text</caption>
<tr><th>header cell1</th> <th>header cell2</th>...</tr>
<tr><td> data cell</td> <td> data cell2</td>...</tr>

XHTML结构和DTD：一个XHTML文档包括三个主要部分1、DOCTYPE声明，2、<head>部分 3、<body>部分
有三种类型的XHTML DTD：
Strict （XHTML 1.0 Strict）
Transitional（XHTML 1.0 Transitional）
Frameset（XHTML 1.0 Frameset）
同时在head标签部分还可以有元数据<meta>标签，用来定义页面的描述、关键字等信息，主要用来搜索引擎检索、浏览器及web服务等功能

第三章 CSS基础
WEB标准设计方法：XHTML+CSS(DIV+CSS)
将css插入网页的三种方式：行内样式；内部样式；外部样式
行内样式语法：<tag style="property:value;property:value;..."> 其中tag为标签的名称，style参数可以应用除
了basefont、param、script的任意<body>内的元素，
样式属性可以为任何css属性，冒号用来分隔属性与值，分号用来分隔属性的定义。
内部样式表语法：
<style type="text/css">
<!--

selector1{property:value;property:value;...}
selector2{property:value;property:value;...}
...
-->
</style>
style：其中定义样式，type：根据css语法定义样式（type="text/css"）
,作用：使旧的浏览器可以使用，因为他们可能不知道css
selector：通常由元素/标签来定义

外部样式表：创建一个name.css的文件，然后内部格式如下：
selector1{property:value;property:value;...}
selector2{property:value;property:value;...}
...
链入：外部样式表链入到网页上：
<link rel="stylesheet" type="text/css" href="name.css"/> name.css为包括相关路径的链接
导入：
<style type="text/css">

</style>

层叠：三种样式的样式表：作者样式；用户样式；浏览器样式
2、层叠顺序第一：（1）标记为！important的用户样式（2）标记为！important的作者样式（3）作者样式（4）用户样式（5）浏览器默认样式
对于设计人员来说三种样式优先级别为;(1)行内样式（2）内部样式（3）外部样式
第二：看一个选择符是否具体，越具体优先级别越高。
第三：按他们被定义的顺序级别。

css最优方法：外部样式
css语法：（三部分构成：选择符、属性和值） selector{property:value}:selector可以是标签或者类选择符、id选择符，同时可以有多种形式
css注释：/*......*/
类选择符：语法如下：
tag1.classname1{property:value;property:value;...}
tag2.classname2{property:value;property:value;...}
tag3.classname3{property:value;property:value;...}
...
tagN.classnameN{property:value;property:value;...}
不含标签的类选择符语法如下：
.classname1{property:value;property:value;...}
.classname2{property:value;property:value;...}
.classname3{property:value;property:value;...}
...
.classnameN{property:value;property:value;...}

使用选择符的语法：
<tag class="classname1 classname2..."> content</tag>
可以一个元素应用多个类，也可以多个元素调用一个类。
id选择符：语法如下：
tag1#classname1{property:value;property:value;...}
tag2#classname2{property:value;property:value;...}
tag3#classname3{property:value;property:value;...}
...
tagN#classnameN{property:value;property:value;...}
不含标签的id选择符语法如下：
#classname1{property:value;property:value;...}
#classname2{property:value;property:value;...}
#classname3{property:value;property:value;
...}
...
#classnameN{property:value;property:value;...}
在xhtml中调用id的语法：
<tag id="idname">content</tag>

css常用属性
css

字体属性:字体名称：font-family（值：Times New Roman/Georgia/Arial/宋体/隶书、楷体、黑体....
字体名称列表中指定多个字体名称时，使用逗号分隔：p{font-family:"Times new Roman",Georgia,Serif}

字体大小：font-size(值：length/%/small/medium/large/smaller/larger....
绝对大小：(mm/cm/in/pt)/相对大小（em/ex/px) 像素/16=em
字体风格：font-style:值：normal/italic/oblique
字体粗细：font-weight：值：normal/bold/bolder/lighter/100/200/300...
字体变化：font-variant:值：nomal/small-caps/inherit
字体简写属性：font：值：font-style font-variant font-weight font-size font-family(顺序，如果缺少，则默认代替）

文本属性：css文本：文本对齐：text-align：值：left/center/right/justify
文本修饰：text-decoration:值：none/underline/overline/line-through/blink
文本缩进：text-indent:值：长度(em)/%
文本颜色：color:值：颜色名称/RGB/十六进制数
字符间距：letter-spacing:值：normal/长度

css背景：背景颜色：background-color:值：颜色名称/RGB/十六进制
背景图片：background-image:值：url（图片文件路径）
背景重复：background-repeat:值：repeat/repeat-x/repeat-y/no-repreat
背景附着：background-attachment:值：scroll/fixed
背景定位：background-position:值：xpos ypos/x% y%/top left/top right/bottom left/...
背景简写属性：background:值（按顺序）：background-color background-image backgrond-repeat background-attachment background-position

css边框属性：边框样式：border-style:值：none/dotted/dashed/solid/double/groove/ridge/inset/outset
边框宽度：border-width:值：medium/thin/thick/长度（mm、px、em等）
边框颜色：border-color：值：颜色名称、RGB、十六进制
边框简写属性：border：值（按顺序）：border-width border-style border-color

css外边框：属性：margin-left、margin-right、margin-top、margin-bottom：值：%、长度（in、mm、px、em等）、auto

可以这样使用：.margin{
margin-top:10px;
margin-bottom:10px;
margin-right:30px;
margin-left:30px;
}
外边框简写属性：margin:值（按顺序）：margin-top margin-right margin-bottom margin-left

/*定义简写外边框属性*/
.margin1{margin:10px 30px 10px 30px}/*从上右下左*/
.margin2{margin:10px}/*定义一个值，同时设置其他三个值*/
.margin3{margin:10px 30px}/*定义两个值，没有定义的采用对边的外边框属性*/
.margin4{margin:10px 30px 10px}/*
定义三个值，没有定义的采用对边的外边框属性*/

css内边距（padding）属性：padding-left、padding-right、padding-top、padding-bottom：值：%、长度（in、mm、px、em等）
/*定义单个内边框属性*/
.padding

{
padding-top:10px;
padding-bottom:10px;
padding-right:30px;
padding-left:30px;
}
/*定义简写内边框属性*/
.padding1{padding:10px 30px 10px 30px}/*从上右下左*/
.padding2{padding:10px}/*定义一个值，同时设置其他三个值*/
.padding3{padding:10px 30px}/*定义两个值，没有定义的采用对边的内边框属性*/
.padding4{padding:10px 30px 10px}/*定义三个值，没有定义的采用对边的内边框属性*/

css盒模型：
/*.boxmodel
{
width:280px;
padding:10px;
border:5px solid gray;
margin:10px;
}*/

<!--
.boxmodel
{
width:280px;
height:280px;
background-image:url(Sunset.jpg);
padding:20px;/*设置盒模型元素内边距为20px*/
border:solid gray 20px;/*设置盒模型元素边框为20px，灰色*/
margin:20px;/*设置盒模型元素外边距为20px
}
盒的总宽度：width+padding-left+padding-right+border-left+border-right+margin-left+margin-right
盒的总高度：height+padding-top+padding-bottom+border-top+border-buttom+marg
in-top+margin-bottom

css伪类：语法：selector：pseudo-class{property：value}
<a>链接标签是最常见的伪类。类如：a：link{color：red}
css度量单位：长度单位；百分比单位；颜色单位

本文来源：https://www.bwwdw.com/article/itjm.html

相关文章：

正在阅读：

初中物理《科学探究：电流的热效应》优质课教案、教学设计04-20

浅析如何提高法律援助服务质量01-14

OTIS故障代码04-17

论文自动干手器毕业设计 - 图文12-04

重大危险源管理制度3篇12-12

XXX党委关于XXX同志的鉴定材料12-29

上一篇：微机原理与接口技术实验报告及答案下一篇：河北省定州市高二上期中考试语文卷