网页制作的文本标记(完整版)
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
</body>
（4）伪类：
a:link超链接的初始状态
a:visited已经访问后的链接状态
a:hover鼠标滑过链接时的状态
a:active点击状态时
<style type="text/css">
a:hover {color: #ff00ff;
text-decoration:none;}
</style>
onmouseover=this.stop() onmouseout=this.start() height="120"（光标移到指定范围就开始或停止）>......... </marquee>
超链接：
1)用文本做超链接：
<a href="index.htm" target="_blank">首页</a>
2)用图像做超链接：
<a href="index.htm"><img src="images/info.gif" title="返回首页" border="0" /></a>
3)文本图像混合做链接：
<a href="brand1.htm"><img src="green.gif" /><br />格力空调1型</a>
<map name="Map" id="Map"><area shape="rect" coords="51,131,188,183" href="default.asp" />
<area shape="rect" coords="313,129,450,180" href="#h3" /></map>
<head>
<style type="text/css">
p{属性：属性值；
}
</style>
</head>
<body>
<p>我的样式表</p>
<p>第二段落</p>
<div>第三段落</div>
</body>
（2）类选择符(在整体上实现不一致的效果)
<head>
<style type="text/css">
<style type="text/css">
div p{width:500px;
height:150px;
background:#009900;}
</style>
</head>
<body>
<div><p>包含在div里面的p元素</p>
</div>
<div>独立的div元素</div>
<p>独立的p元素</p>
</title>
</head>
<body>
<img src="图片路径" alt="光标移到图片的所显示的内容" width="" />
<p>（上下）一个段落的文字内容</p>
<span>左右顺序排列的文字</span>
<pre>保持文本内容的原形</pre>
<nobr>强制不换行</nobr>
<hr size="2"(水平线的厚度) width="5"(水平线的宽度) noshade="noshade"(是否要阴影)
.div1{属性：属性值；
}
.div2{属性：属性值；
}
.left{属性：属性值；
}
.right{属性：属性值；
}
</style>
</head>
<body>
<div class="div1">我的样式表</div>
<p class="div1">第二段文字</P>
<div class="div2">第三段文字</div>
<input type（元素的类型），size（含义依据type而不同）>
在HTML语言规范的基础上，XHTML对标记还有下面一些额外的要求：
1）标记名和属性名、属性值必须小写；
2）属性值必须用双引号引起；
3）所有标记包括单标记都必须封闭；
4）不允许省略属性值。
<html>
<head>
<title>
块级元素：p, div, hn, pre, hr, ul, ol, li, form
公共属性：
align（水平对齐方式），valign(垂直对齐方式)，border（边框），title（提示文字），src（链接的文件路径），style（引入CSS行内样式），id，name
特有属性：<a href（链接的目标），target（窗口打开方式）>
color="#FF0000"(颜色) align="center"(水平对齐方式) />
<b>粗体文字</b>
<i>斜体文字</i>
<u>加下划线</u>
<em>加粗，倾斜</em>
<sup>内容</sup>(上标)
<sub>...</sub>(下标)
<font face="黑体" size="+6" color="#00000FF">文字内容</font>(编辑文字的属性)
(6)选择符分组（群选择符）
语法格式：
选择符1，选择符2，…..
每个选择符之间用“,”分隔
<style type="text/css">
div, p, h1{width:500px;
height:150px;
background:#009900;
color:white;}
</style>
</head>
HTML标记的分类:
1)头部标记：title, meta, link, style
2)文本标记：font, b, i, u , strong,
3)段落标记：p, hn, pre, marquee, br, hr
4)列表标记：ul, ol, li, dl, dt, dd
5)超链接标记：a, map, area
该方法在商品展示百度文库
的网站上较常用。
4)热区链接：使用map在图像上定义一幅地图，地图上可包含多个热区，每个热区用area单标记定义，area的shape属性定义了热区的形状，coords定义了热区的坐标点，href定义了热区链接的文件。同时img标记用usemap指明用了哪幅地图
<img src="images/163227.png" width="600" height="518" border="0" usemap="#Map" />
<body>
<div> div元素</div>
<p>p元素</p>
<h1>h1元素</h1>
div的嵌套
<div id=“top”>网页头部</div>
<div id=“main”>
<div id=“left”>网页左边</div>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置... ...</dd>
</dl>
table表格：
<table width="400" border="1" cellspacing(单元格间距即单元格和单元格的距离)="0" cellpadding(单元格边距即单元格和单元格内容的距离)="0">
</head>
<body> <a href="http://www.baidu.com/" target="_blank">百度</a> </body>
（5）子选择类:
语法格式：
选择符1选择符2
选择符1和2直接使用空格分隔，其含义是第一个选择符中的第二个选择符。
注意：选择符1必须和选择符2有嵌套关系，否则无法正常使用
<ul>
<li><a href="http://www.baidu.com">首页</a></li>（超链接）
<li>...</li>
<li>...</li>
</ul>(无序列表)
ol,li(有序列表)
<body>
<h2>一个定义列表：</h2>
<dl>
<dt>计算机</dt>（标题）
<dd>用来计算的仪器... ...</dd>（文段内容）
3、height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素
表格td标签的属性：
1、valign属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包括：
top：顶端对齐；
middle：居中对齐；
bottom：底端对齐。
Baseline：相对于基线对齐。
<th>...</th>(表头)
<caption>…</caption> (表格标题)
<tr>(行)
<td>...</td>(列ttr)
</tr>
</table
表格table标签的属性：
1、width属性：指定表格或某一个表格单元格的宽度。单位可以是%或者象素。
2、height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素。
6)图像及媒体元素标记：img, embed, object
7)表格标记：table, tr, td, th, tbody
8)表单标记：form, input, textarea, select, option, fieldset, legend
9)框架标记：frameset, frame, iframe
2、Colspan：属性值表示当前单元格跨越几列(合并行内单元格)
3、Rowspan：属性值表示当前单元格跨越几行（合并列单元格）
</body>
跑马灯：
<marquee behavior="alternate(来回滚动)/scroll(循环滚动)/slide(滚动到目的地就停止)"(滚动方式) direction="up/left(滚动方向)" loop="0(不断滚动)"（滚动次数）scrollamount="10"(滚动速度) scrolldelay="4"(属性设置两次滚动间的间隔时间)
3、border属性：表格边线粗细
4、bordercolor属性：指定表格或某一个单元格的边框颜色。
5、bordercolorlight属性：亮边框的颜色
6、bordercolordark属性：暗边框的颜色c
7、bgcolor属性：指定表格或某一个单元格的背景颜色。
8、background属性：指定表格或某一个单元格的背景图片。其属性值为一个URL地址。
<a href="mailto:xiaoli@163.com">给我留言</a>
演示：mail.html
target属性的取值：
-self（在本窗口打开）、-blank（空白窗口）、_parent（将链接的文件载入到父框架）、_top（将链接的文件载入到整个浏览器窗口中，并删除所有框架）
title的属性：
表格tr标签的属性：
1、valign属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包括：
top：顶端对齐；
middle：居中对齐；
bottom：底端对齐。
Baseline：相对于基线对齐。
2、align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式
10)容器标记：div, span
11)单标记：<br />(强制换行)，<hr />(水平线)，<img />，<input />，<meta />，<link />
12)成组标记：table，form，ul, ol, dl, frameset，fieldset
行内元素和块级元素：
行内元素：a，img，font(文字属性)，b，i，u，span，input
</body>
</html>
css
内联样式，具有最高优先级(写在标记里面)
内部样式表，优先级低于内联样式（head添加style标记）
外部样式表，优先级最低（新建css）
css基本写法
选择符{
属性：属性值；}
<style type="text/css">
p{
属性：属性值；}
</style>
（1）类型选择符(整体效果一致)
5)链接到其他网页或文件（jpg, rar等）
内部链接<a href="../index.htm">返回首页</a>
外部链接<a href="http://www.163.com">网易网站</a>
下载链接<a href="software/wybook. rar">点击下载</a>
6)电子邮件链接
title属性在很多标记里都有，其作用是在鼠标停留在该元素上时显示设置的说明文字
制作超链接的规则：
1)可以使用相对链接尽量不要使用绝对链接，如../index.htm
而不是http://www.hynu.cn
2)链接目标尽可能简单
如http://www.hynu.cn，而不是http://www.hynu.cn/index.jsp
<p class="left">文字居左显示</p>
<p class="right">文字居右显示</p>
</body>
（3）id选择符（具有最高优先级）
<style type="text/css">
#footer{属性：属性值}
</style>
</head>
<body>
<div id="footer">联系我们: <a href="mailto:demo@demo.com">demo@demo.com</a></div>
（4）伪类：
a:link超链接的初始状态
a:visited已经访问后的链接状态
a:hover鼠标滑过链接时的状态
a:active点击状态时
<style type="text/css">
a:hover {color: #ff00ff;
text-decoration:none;}
</style>
onmouseover=this.stop() onmouseout=this.start() height="120"（光标移到指定范围就开始或停止）>......... </marquee>
超链接：
1)用文本做超链接：
<a href="index.htm" target="_blank">首页</a>
2)用图像做超链接：
<a href="index.htm"><img src="images/info.gif" title="返回首页" border="0" /></a>
3)文本图像混合做链接：
<a href="brand1.htm"><img src="green.gif" /><br />格力空调1型</a>
<map name="Map" id="Map"><area shape="rect" coords="51,131,188,183" href="default.asp" />
<area shape="rect" coords="313,129,450,180" href="#h3" /></map>
<head>
<style type="text/css">
p{属性：属性值；
}
</style>
</head>
<body>
<p>我的样式表</p>
<p>第二段落</p>
<div>第三段落</div>
</body>
（2）类选择符(在整体上实现不一致的效果)
<head>
<style type="text/css">
<style type="text/css">
div p{width:500px;
height:150px;
background:#009900;}
</style>
</head>
<body>
<div><p>包含在div里面的p元素</p>
</div>
<div>独立的div元素</div>
<p>独立的p元素</p>
</title>
</head>
<body>
<img src="图片路径" alt="光标移到图片的所显示的内容" width="" />
<p>（上下）一个段落的文字内容</p>
<span>左右顺序排列的文字</span>
<pre>保持文本内容的原形</pre>
<nobr>强制不换行</nobr>
<hr size="2"(水平线的厚度) width="5"(水平线的宽度) noshade="noshade"(是否要阴影)
.div1{属性：属性值；
}
.div2{属性：属性值；
}
.left{属性：属性值；
}
.right{属性：属性值；
}
</style>
</head>
<body>
<div class="div1">我的样式表</div>
<p class="div1">第二段文字</P>
<div class="div2">第三段文字</div>
<input type（元素的类型），size（含义依据type而不同）>
在HTML语言规范的基础上，XHTML对标记还有下面一些额外的要求：
1）标记名和属性名、属性值必须小写；
2）属性值必须用双引号引起；
3）所有标记包括单标记都必须封闭；
4）不允许省略属性值。
<html>
<head>
<title>
块级元素：p, div, hn, pre, hr, ul, ol, li, form
公共属性：
align（水平对齐方式），valign(垂直对齐方式)，border（边框），title（提示文字），src（链接的文件路径），style（引入CSS行内样式），id，name
特有属性：<a href（链接的目标），target（窗口打开方式）>
color="#FF0000"(颜色) align="center"(水平对齐方式) />
<b>粗体文字</b>
<i>斜体文字</i>
<u>加下划线</u>
<em>加粗，倾斜</em>
<sup>内容</sup>(上标)
<sub>...</sub>(下标)
<font face="黑体" size="+6" color="#00000FF">文字内容</font>(编辑文字的属性)
(6)选择符分组（群选择符）
语法格式：
选择符1，选择符2，…..
每个选择符之间用“,”分隔
<style type="text/css">
div, p, h1{width:500px;
height:150px;
background:#009900;
color:white;}
</style>
</head>
HTML标记的分类:
1)头部标记：title, meta, link, style
2)文本标记：font, b, i, u , strong,
3)段落标记：p, hn, pre, marquee, br, hr
4)列表标记：ul, ol, li, dl, dt, dd
5)超链接标记：a, map, area
该方法在商品展示百度文库
的网站上较常用。
4)热区链接：使用map在图像上定义一幅地图，地图上可包含多个热区，每个热区用area单标记定义，area的shape属性定义了热区的形状，coords定义了热区的坐标点，href定义了热区链接的文件。同时img标记用usemap指明用了哪幅地图
<img src="images/163227.png" width="600" height="518" border="0" usemap="#Map" />
<body>
<div> div元素</div>
<p>p元素</p>
<h1>h1元素</h1>
div的嵌套
<div id=“top”>网页头部</div>
<div id=“main”>
<div id=“left”>网页左边</div>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置... ...</dd>
</dl>
table表格：
<table width="400" border="1" cellspacing(单元格间距即单元格和单元格的距离)="0" cellpadding(单元格边距即单元格和单元格内容的距离)="0">
</head>
<body> <a href="http://www.baidu.com/" target="_blank">百度</a> </body>
（5）子选择类:
语法格式：
选择符1选择符2
选择符1和2直接使用空格分隔，其含义是第一个选择符中的第二个选择符。
注意：选择符1必须和选择符2有嵌套关系，否则无法正常使用
<ul>
<li><a href="http://www.baidu.com">首页</a></li>（超链接）
<li>...</li>
<li>...</li>
</ul>(无序列表)
ol,li(有序列表)
<body>
<h2>一个定义列表：</h2>
<dl>
<dt>计算机</dt>（标题）
<dd>用来计算的仪器... ...</dd>（文段内容）
3、height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素
表格td标签的属性：
1、valign属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包括：
top：顶端对齐；
middle：居中对齐；
bottom：底端对齐。
Baseline：相对于基线对齐。
<th>...</th>(表头)
<caption>…</caption> (表格标题)
<tr>(行)
<td>...</td>(列ttr)
</tr>
</table
表格table标签的属性：
1、width属性：指定表格或某一个表格单元格的宽度。单位可以是%或者象素。
2、height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素。
6)图像及媒体元素标记：img, embed, object
7)表格标记：table, tr, td, th, tbody
8)表单标记：form, input, textarea, select, option, fieldset, legend
9)框架标记：frameset, frame, iframe
2、Colspan：属性值表示当前单元格跨越几列(合并行内单元格)
3、Rowspan：属性值表示当前单元格跨越几行（合并列单元格）
</body>
跑马灯：
<marquee behavior="alternate(来回滚动)/scroll(循环滚动)/slide(滚动到目的地就停止)"(滚动方式) direction="up/left(滚动方向)" loop="0(不断滚动)"（滚动次数）scrollamount="10"(滚动速度) scrolldelay="4"(属性设置两次滚动间的间隔时间)
3、border属性：表格边线粗细
4、bordercolor属性：指定表格或某一个单元格的边框颜色。
5、bordercolorlight属性：亮边框的颜色
6、bordercolordark属性：暗边框的颜色c
7、bgcolor属性：指定表格或某一个单元格的背景颜色。
8、background属性：指定表格或某一个单元格的背景图片。其属性值为一个URL地址。
<a href="mailto:xiaoli@163.com">给我留言</a>
演示：mail.html
target属性的取值：
-self（在本窗口打开）、-blank（空白窗口）、_parent（将链接的文件载入到父框架）、_top（将链接的文件载入到整个浏览器窗口中，并删除所有框架）
title的属性：
表格tr标签的属性：
1、valign属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包括：
top：顶端对齐；
middle：居中对齐；
bottom：底端对齐。
Baseline：相对于基线对齐。
2、align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式
10)容器标记：div, span
11)单标记：<br />(强制换行)，<hr />(水平线)，<img />，<input />，<meta />，<link />
12)成组标记：table，form，ul, ol, dl, frameset，fieldset
行内元素和块级元素：
行内元素：a，img，font(文字属性)，b，i，u，span，input
</body>
</html>
css
内联样式，具有最高优先级(写在标记里面)
内部样式表，优先级低于内联样式（head添加style标记）
外部样式表，优先级最低（新建css）
css基本写法
选择符{
属性：属性值；}
<style type="text/css">
p{
属性：属性值；}
</style>
（1）类型选择符(整体效果一致)
5)链接到其他网页或文件（jpg, rar等）
内部链接<a href="../index.htm">返回首页</a>
外部链接<a href="http://www.163.com">网易网站</a>
下载链接<a href="software/wybook. rar">点击下载</a>
6)电子邮件链接
title属性在很多标记里都有，其作用是在鼠标停留在该元素上时显示设置的说明文字
制作超链接的规则：
1)可以使用相对链接尽量不要使用绝对链接，如../index.htm
而不是http://www.hynu.cn
2)链接目标尽可能简单
如http://www.hynu.cn，而不是http://www.hynu.cn/index.jsp
<p class="left">文字居左显示</p>
<p class="right">文字居右显示</p>
</body>
（3）id选择符（具有最高优先级）
<style type="text/css">
#footer{属性：属性值}
</style>
</head>
<body>
<div id="footer">联系我们: <a href="mailto:demo@demo.com">demo@demo.com</a></div>