网页制作的文本标记完整版Word文件下载.docx
- 文档编号:20901992
- 上传时间:2023-01-26
- 格式:DOCX
- 页数:14
- 大小:87.95KB
网页制作的文本标记完整版Word文件下载.docx
《网页制作的文本标记完整版Word文件下载.docx》由会员分享,可在线阅读,更多相关《网页制作的文本标记完整版Word文件下载.docx(14页珍藏版)》请在冰豆网上搜索。
sup>
内容<
/sup>
(上标)
sub>
...<
/sub>
(下标)
fontface="
黑体"
size="
+6"
#00000FF"
>
文字内容<
/font>
(编辑文字的属性)
ul>
<
li>
ahref="
首页<
/a>
/li>
(超链接)
/ul>
(无序列表)
ol,li(有序列表)
h2>
一个定义列表:
/h2>
dl>
dt>
计算机<
/dt>
(标题)
dd>
用来计算的仪器......<
/dd>
(文段内容)
显示器<
以视觉方式显示信息的装置......<
/dl>
table表格:
tablewidth="
400"
border="
1"
cellspacing(单元格间距即单元格和单元格的距离)="
0"
cellpadding(单元格边距即单元格和单元格内容的距离)="
th>
/th>
(表头)
caption>
…<
/caption>
(表格标题)
tr>
(行)
td>
/td>
(列ttr)
/tr>
/table
表格table标签的属性:
1、width属性:
指定表格或某一个表格单元格的宽度。
单位可以是%或者象素。
2、height属性:
指定表格或某一个表格单元格的高度。
3、border属性:
表格边线粗细
4、bordercolor属性:
指定表格或某一个单元格的边框颜色。
5、bordercolorlight属性:
亮边框的颜色
6、bordercolordark属性:
暗边框的颜色c
7、bgcolor属性:
指定表格或某一个单元格的背景颜色。
8、background属性:
指定表格或某一个单元格的背景图片。
其属性值为一个URL地址。
表格tr标签的属性:
1、valign属性:
指定某一个单元格里的内容(文本、图片等)的垂直对齐方式。
垂直对齐方式的属性值包括:
top:
顶端对齐;
middle:
居中对齐;
bottom:
底端对齐。
Baseline:
相对于基线对齐。
2、align属性:
指定表格或某一个单元格里的内容(文本、图片等)的对齐方式
3、height属性:
单位可以是%或者象素
表格td标签的属性:
2、Colspan:
属性值表示当前单元格跨越几列(合并行内单元格)
3、Rowspan:
属性值表示当前单元格跨越几行(合并列单元格)
/body>
跑马灯:
marqueebehavior="
alternate(来回滚动)/scroll(循环滚动)/slide(滚动到目的地就停止)"
(滚动方式)direction="
up/left(滚动方向)"
loop="
0(不断滚动)"
(滚动次数)scrollamount="
10"
(滚动速度)scrolldelay="
4"
(属性设置两次滚动间的间隔时间)
onmouseover=this.stop()onmouseout=this.start()height="
120"
(光标移到指定范围就开始或停止)>
.........<
/marquee>
超链接:
1)用文本做超链接:
<
index.htm"
target="
_blank"
2)用图像做超链接:
images/info.gif"
title="
返回首页"
3)文本图像混合做链接:
brand1.htm"
green.gif"
br/>
格力空调1型<
该方法在商品展示
的网站上较常用。
4)热区链接:
使用map在图像上定义一幅地图,地图上可包含多个热区,每个热区用area单标记定义,area的shape属性定义了热区的形状,coords定义了热区的坐标点,href定义了热区链接的文件。
同时img标记用usemap指明用了哪幅地图
images/163227.png"
600"
height="
518"
usemap="
#Map"
mapname="
Map"
id="
areashape="
rect"
coords="
51,131,188,183"
href="
default.asp"
313,129,450,180"
#h3"
/map>
5)链接到其他网页或文件(jpg,rar等)
内部链接<
../index.htm"
返回首页<
外部链接<
网易网站<
下载链接<
software/wybook.rar"
点击下载<
6)电子邮件链接
mailto:
xiaoli@"
给我留言<
演示:
mail.html
target属性的取值:
-self(在本窗口打开)、-blank(空白窗口)、_parent(将链接的文件载入到父框架)、_top(将链接的文件载入到整个浏览器窗口中,并删除所有框架)
title的属性:
title属性在很多标记里都有,其作用是在鼠标停留在该元素上时显示设置的说明文字
制作超链接的规则:
1)可以使用相对链接尽量不要使用绝对链接,如../index.htm
而不是
2)链接目标尽可能简单
如,而不是
/html>
css
内联样式,具有最高优先级(写在标记里面)
内部样式表,优先级低于内联样式(head添加style标记)
外部样式表,优先级最低(新建css)
css基本写法
选择符{
属性:
属性值;
}
styletype="
text/css"
p{
/style>
(1)类型选择符(整体效果一致)
head>
p{属性:
}
/head>
我的样式表<
第二段落<
div>
第三段落<
/div>
(2)类选择符(在整体上实现不一致的效果)
.div1{属性:
.div2{属性:
.left{属性:
.right{属性:
divclass="
div1"
pclass="
第二段文字<
/P>
div2"
第三段文字<
left"
文字居左显示<
right"
文字居右显示<
(3)id选择符(具有最高优先级)
#footer{属性:
属性值}
divid="
footer"
联系我们:
demo@"
demo@<
(4)伪类:
a:
link超链接的初始状态
visited已经访问后的链接状态
hover鼠标滑过链接时的状态
active点击状态时
hover{color:
#ff00ff;
text-decoration:
none;
XX<
(5)子选择类:
语法格式:
选择符1选择符2
选择符1和2直接使用空格分隔,其含义是第一个选择符中的第二个选择符。
注意:
选择符1必须和选择符2有嵌套关系,否则无法正常使用
divp{width:
500px;
height:
150px;
background:
#009900;
包含在div里面的p元素<
独立的div元素<
独立的p元素<
(6)选择符分组(群选择符)
选择符1,选择符2,…..
每个选择符之间用“,”分隔
div,p,h1{width:
color:
white;
div元素<
p元素<
h1>
h1元素<
/h1>
div的嵌套
divid=“top”>
网页头部<
divid=“main”>
divid=“left”>
网页左边<
divid=“right”>
网页右边<
divid=“bottom”>
网页底部<
边界(margin)属性
补白(padding)属性
html>
title>
CSS设置填充属性<
/title>
style>
div{width:
400px;
300px;
red;
padding:
50px20px30px40px;
边框样式border
分为上、右、下、左四个子属性和一个border-style综合属性。
顶部边框样式border-top-style
Border-top-style:
none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;
None:
没有边框
Hidden:
隐藏边框
Dotted:
点线边框
Dashed:
虚线边框
Solid:
实线边框
Double:
双线边框
Groove:
3D凹槽边框
Ridge:
菱形边框
Inset:
3d凹边
Outset:
3d凸边
边框的综合属性
border:
border-width||border-style||border-color
CSS设置边框属性<
.dashed{border-top-style:
dashed;
dashed"
浮动定位:
float//none、right、left
浮动元素使得div块可以左右并排
清除浮动属性:
clear//none、right、left、both
相对定位:
position:
relative(相对于其原来位置不同方向的偏移)
属性值:
top(从上向下位移)、left(从左向右)、right、bottom
div{
position:
relative;
top:
50px;
left:
11111<
绝对定位:
absolute(以距离它最近的设置了定位属性的父级元素为定位基准,若它所有的父级元素都没有设置定位属性,则以浏览器窗口为定位基准
)
top、left、right、bottom
制作三角形
#nav{font-size:
14px;
#nava{display:
block;
/*将行内元素a设置为块级元素,从而具有块级元素的特点*/
#ff0000;
background-color:
#99ccff;
text-align:
center;
6px16px;
margin:
02px;
border:
1pxsolid#3399ff;
float:
left;
/*将每个块设置为左浮动*/
position:
/*让b元素以a元素为定位基准*/
#nava:
hover{
#ffffff;
background-color:
#993300;
}
hoverb{border:
8pxsolid#ffffff;
border-top-color:
/*以上两条形成红色下三角形*/
overflow:
hidden;
height:
0px;
width:
absolute;
top:
30px;
left:
35px;
/*以上3条相对于a元素边框的右下边*/
nav"
#"
>
中心简介<
政策法规<
常用下载<
为您服务<
技术支持<
规<
背景图片:
background
其属性:
background-color
background-image
background-repeat(背景的平铺方式):
repeat|no-repeat|repeat-x|repeat-y|round(两端对齐平铺,多出空间通过自身拉伸填充)|space(两端对齐平铺,多出来的空间使用空白代替);
background-position:
垂直方向:
top、center、bottom
水平方向:
left、center、right
background-attachment(滚动方式):
scroll:
背景图像滚动|fixed:
背景图像固定
背景综合属性:
用来设置背景的所有控制选项。
背景颜色、背景图片、平铺方式、定位、滚动
linkhref="
style/page.css"
rel="
stylesheet"
type="
/>
(css)
等高
#box{overflow:
padding:
0;
}/*对父级元素设置如果内容超过指定高度则隐藏,填充为零。
*/
#left{height:
auto;
margin-bottom:
-32767px;
padding-bottom:
32767px;
/*此三句用于实现等高效果*/
#right{height:
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 制作 文本 标记 完整版