HTML网页设计
第一章 HTML基本标签
第二章 HTML文本格式化
第三章 HTML链接
第四章 框架
第五章 表格
第六章 列表
第七章 表单
第八章 HTML图像
第九章 HTML多媒体运用
第十章 JavaScript
第十一章 CSS技术
第十二章 XHTML
第十三章 DHTML动态网页
来到科协，希望大家认真地从html代码开始学习。
在Web标准中，HTML/XHTML负责页面结构，CSS负责样式表现，JavaScript负责动态行为。
希望这份资料能够带大家快速入门，掌握一定的网页技术。
需要用到的的软件：记事本,EditPlus ,Dreamweaver, 推荐大家多使用前面两者、
第一章 HTML基本标签
1.1HTML基本标签
<标签名 属性1 属性2 属性3…>内容</标签名>
1.1.1文档标签
<html>
<head>
<title>网站名</title>
</head>
<html>
1.1.2头部标签
同上
1.1.3主题标签
主题标签是设置<body>标签属性的。
<body>标签属性以及含义
属性 | 含义 |
Link | 设置默认超链接文本颜 |
alink | 设置鼠标正在单击时超链接文本颜 |
vlink | 设置背景图像 |
background | 设置背景图像 |
bgcolor | 设置背景颜 |
leftmargin | 设置背景颜 |
topmargin | 设置上边距 |
bgproperities | 设置背景图片不随页面滚动而滚动 |
text | 设置文本颜 |
1.2字体属性标签
1.2.2标题文字标签
标题文字标签<hn>用来设置网页中的标题文字，<hn>标签共分6级，<h1></h1>之间的是最大最粗的。<h6></h6>之间的是最小最细的。Align是设置对其方式的。Left居左，right居右，center居中。
<hn>本身就具有换行的功能。
1.2.2.文字格式控制标签
文字格式控制标签是<font>
属性 | 功能 | 默认值 |
Face | 使用的字体 | 宋体 |
Size | 文字的大小 | 3 |
Color | 设置文字颜 | 黑 |
<font face=值1 size=值2 color=值3>徐师大科协</font> | ||
说明：size属性值为1-7,也可以使用+或者-来设置相对值。
Color为RGB颜代码(#nnnnn)，也可以直接输入颜名称（red）
1.2.3特定文字标签
一下列举的是常用的：
<b>粗体标签
<i>斜体标签
<u>下划线标签
<em>是强调文本用的，是以斜体字出现的
<strong> 也是强调文本用的，显示的时粗体
<small>文本以小号字体出现
<big>文本以大号字体出现
<sup>上标
<sub>下标
1,3换行符标签
<br />
1.4HTML注释标签
<!--以下为***-- >
1.5署名标签
<address></address>
1.6段落标签
<p></p>
p具有align属性，left center right
1.7居中对齐标签
可以用段落标签
也可以用<center></center>
1.8原样显示标签
<pre></pre>
使网页显示按照排版时的样式
1.9缩排标签
<blockquote></blockquote>
1.10水平线标签
<hr></hr>
属性 | 参数 | 功能 | 单位 |
Size | -- | 设置水平线粗细 | Px |
Width | -- | 设置水平线宽度 | Px |
Align | Left right center | 对齐方式 | -- |
Color | |||
Noshade | -- | 取消3d阴影 | |
第二章HTML文本格式化
2.1文本格式化标签
<b>
<big>
<em>
<i>
<small>
<strong>
<sub>
<sup>
<del>
2.2输出标签
<code>
<kbd>
<tt>
<var>
2.3
<abbr>缩写标签
<p>
徐州师范大学(<abbr title=”xuzhou normal universty”>xznu</abbr>)是一所。。。
</p>
2.4html字符实体
"双引号“
&与&
<小于<
>大于>
空格
第三章HTML链接
3.1.1超链接可以链接到一个网页，一张图片，一个email，一个文件等
3.2链接标签
<a></a>
基本语法示例如下：
<a href=”u.edu” target=”_blank” >点击打开徐师大主页</a>
3.2.1target属性
Target有_blank _self _top _parent 如果只有一个页面，_self _top效果是一样的，如果应用了框架，_self指的是框架本省 _top是浏览器窗口。
3.2.2.name属性
<a name=”标签名”></a>链接到网页某个具体位置
3.3链接分类
3.3.1内部链接
<a href=”login.php”></a>
Href连接到的是链接页面或者链接地址
如data/cache.index.html
3.3.2外部链接
如：<a href=”www.baidu /”><./a>
3.3.3
邮件链接
如<a href=”mailto:huhuadong@sogou”>点击这里给我发</a>
3.3.4脚本链接
脚本链接是执行网页中的JavaScript代码或者调用的函数
<a href=”JavaScript:….”>文字</a>
如：<a href=”javaScript:window.close()”>关闭窗口</a>
3.3.5空链接
<a href=”#”></a>
第四章框架
框架frames的主要功能是分割视图, 若使用框架集，则不需要<body></body>标记
语法格式如下
<frameset>
<frame src=”地址一”
<frame src=”地址二”
…..
</frameset>
地址既可以用相对地址，也可以用绝对地址
4.2框架标签fame
4.2.1对象文件的src
既可以用相对地址，也可以用绝对地址
4.2.2框架名称属性
如果一个网页需要连接到另一个网页中的一个框架，那么在之前的网页中target属性的name一定与该name属性的值一样
<!—以下表示网页被水平分成两个框架，分别占30%和70%-->
<frameset rows="30%,70%">
<frame src=”….” name=”,,,,”>
<frame src=”…. ”name=”….”>
</frameset>
<!—以下表示网页被水平分成三个框架，分别占30% 40% 30%-->
<frameset rows="30%,*,30%">
<frame src=”….” name=”,,,,”>
<frame src=”…. ”name=”….”>
<frame src=”…. ”name=”….”>
</frameset>
<!—以下表示网页被竖直分成两个框架，分别占30%和70%-->
<frameset cols="30%,*,30%">
<frame src=”….” name=”,,,,”>
<frame src=”…. ”name=”….”>
</frameset>
<!—以下表示网页被竖直分成三个框架，分别占30% 40% 30%-->
<frameset cols="30%,*,30%">
<frame src=”….” name=”,,,,”>
<frame src=”…. ”name=”….”>
<frame src=”…. ”name=”….”>
</frameset>
嵌套分割窗口
<frameset rows="150,*">
<frame>
<frameset cols="20%,55%,25%">
<frame>
<frame>
<frame>
</frameset>
</frameset>
4.2.3框架边框属性frameborder
<frame frameborder="是否显示">【只能在 0 或 1 中取值。取值为 0，边框线隐藏；取值为 1，边框线显示】
4.2.4框架边距属性marginheight和marginwidth
<frame src=”****” frameborder=”1”marginwidth=”50” marginheight=”80” />
4.2.5缩放框架属性noresize
<frame src=”****” noresize=”noresize”>
如果设置noresize则不可以改变html框架大小，否则可以通过拖动该改变
4.2..6框架滚动条属性scrolling
属性可以取yes no auto(自动)
4.2.7框架边框颜属性bordercolor
<frameset framespacing="边框宽度"【单位：像素】>【只能对框架集使用，对单个框架无效】
<frameset bordercolor="颜代码">【只能对整个框架集使用，对单个框架无效】
4.3框架集标签frameset
4.3．1
rows【上下分割窗口属性】
4.3.2
cols【左右风格窗口属性】
4.4浮动框架iframe
以下将各个属性列表
浮动框架：<iframe src="页面源文件地址"></iframe>
浮动框架可设置的参数 | 参数的含义 | 浮动框架可设置的参数 | 参数的含义 |
src | 浮动框架页面的源文件地址 | marginwidth | 设置页面与边框的水平间距 |
width | 浮动框架在页面中显示的宽度 | marginheight | 设置页面与边框的垂直间距 |
he网页html下载ight | 浮动框架在页面中显示的高度 | frameborder | 设定浮动框架的边框 |
align | 浮动框架在浏览器中的对齐方式【left、center、right】 | scrolling | 设定浮动框架页面内是否显示 滚动条 |
name | 设定框架页面的名称 | ||
第五章表格
1.<table><caption>表格标题</caption>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
……
</table>
2.<th>也可以用<td>，只不过<td>默认表头加粗。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论