第一篇 Web页面制作基础
web简介
1、web与Internet之间的关系是:web是Internet的一个应用
2、WWW是Internet最核心的部分,它是Internet上那些支持WWW服务和HTTP协议的服务器集合。
HTML基础
(1)HTML的全局标准属性
在HTML规范中,规定了8个全局标准属性
1、class属性:用于定义元素的类名。class属性不能在以下元素中使用:<base>
、<head>
、<html>
、<meta>
、<param>
、<script>
、<style>
、<title>
。
2、id属性:用于指定元素的唯一id。该属性的值在整个HTML文档中要具有唯一性。
3、style属性:用于指定元素的行内样式。使用该属性后将会覆盖任何全局的样式设定。
4、title属性:用于指定元素的额外信息。通常会在鼠标移动到元素上时显示定义的提示文本。
5、accesskey属性:用于指定激活某个元素的快捷键。支持该属性的元素有:<a>
、<area>
、<button>
、<input>
、<object>
、<select>
、<textarea>
。
6、tabindex属性:用于指定元素在Tab键上的次序。支持该属性的元素有:<a>
、<area>
、<button>
、<input>
、<object>
、<select>
、<textarea>
。
7、dir属性:用于指定元素中内容的文本方向。该属性值只有ltr和rtl两种(left to right和right to left)。。不生效的元素有<base>
、<br>
、<frame>
、<frameset>
、<hr>
、<iframe>
、<param>
、<script>
。
8、lang属性:用于指定元素内容的语言。不生效的元素有<base>
、<br>
、<frame>
、<frameset>
、<hr>
、<iframe>
、<param>
、<script>
。
(2)HTML的全局事件属性
在HTML中,事件可以通过JavaScript直接触发,也可以通过全局事件属性触发。
Window窗口事件
onload:在页面加载结束之后触发。
onunload:在用户从页面离开时触发,如单击跳转、页面重载、关闭浏览器窗口。
Form表单事件
onblur:当元素失去焦点时触发。
onchange:当元素的元素值被改变时触发。
onfocus:当元素获得焦点时触发。
onreset:当表单中的重置按钮被单击时触发。
onselect:在元素中文本被选中后触发。
onsubmit:在提交表单时触发。
Keyboard键盘事件
onkeydown:在用户按下按键时触发。
onkeypress:在用户按下按键时,按着按键时触发,不生效的有Alt键、Ctrl键、Shift键、Esc键。
onkeyup:当用户释放按键时触发。
Mouse鼠标事件
onclick:当在元素上单击鼠标时触发。
ondblclick:当在元素上双击鼠标时触发。
onmousedown:当在元素上按下鼠标按钮时触发。
onmousemove:当鼠标指针移动到元素上时触发。
onmouseout:当鼠标指针移出元素时触发。
onmouseover:当鼠标指针移动到元素上时触发。
onmouseup:当在元素上释放鼠标按钮时触发。
Media媒体事件
onabort:当退出媒体播放器时触发。
onwaiting:当媒体已停止播放但打算继续播放时触发。
(3)HTML的无语义元素
<span>
和<div>
<span>
是内联标签,用在一行文本中,前后衔接紧密。
<div>
是块级标签,它等同于前后有换行。
(4)HTML的标题元素
<h1>
~<h6>
标签支持全局标准属性和全局事件属性。
(5)HTML的格式化元素
<h1>普通文本格式化</h1>
粗体文本:<b>网页</b>是什么?<br />
大号字:<big>网页</big>是什么?<br />
着重文字:<em>网页</em>是什么?<br />
斜体字:<i>网页</i>是什么?<br />
小号字:<small>网页</small>是什么?<br />
加重语气:<strong>网页</strong>是什么?<br />
下标字:<sub>网页</sub>是什么?<br />
上标字:<sup>网页</sup>是什么?<br />
插入字:<ins>网页</ins>是什么?<br />
删除字:<del>网页</del>是什么?<br />
<h1>计算机输出格式化</h1>
普通文本:<p>
public class HTMLUtils{
private static final VERSION = 5.0;
}
</p>
计算机代码文本:<br />
<code>
public class HTMLUtils{
private static final VERSION = 5.0;
}
</code><br />
键盘文本:<br />
<kbd>
public class HTMLUtils{
private static final VERSION = 5.0;
}
</kbd><br />
计算机代码样本:<br />
<samp>
public class HTMLUtils{
private static final VERSION = 5.0;
}
</samp><br />
打字机样式文本:<br />
<tt>
public class HTMLUtils{
private static final VERSION = 5.0;
}
</tt><br />
变量:<var>int x=10;</var><br />
预格式文本:
<pre>
燕雀 安知
鸿鹄之 志
哉
</pre><br />
<h1>引用、术语格式化</h1>
缩写:<abbr title="abbreviation">abbr</abbr><br />
首字母缩写:<acronym title="HyperText Markup Language">HTML</acronym><br />
地址:<address>北京市东城区王府井大街10号</address><br />
文字方向从左往右:<bdo dir="ltr">北京欢迎你,Welcome to Beijing!</bdo><br />
文字方向从右往左:<bdo dir="rtl">北京欢迎你,Welcome to Beijing!</bdo><br />
长引用:<blockquote>To be or not to be,that's a question!</blockquote><br />
短引用:<q>莎士比亚</q>一个人,诠释了整个世纪。<br />
引用:<cite>北京欢迎你</cite>是北京奥运会宣传曲<br />
定义:<dfn>HTML</dfn>是一种标记语言。<br />
(6)HTML的图片元素
<img>
标签支持全局标准属性和全局事件属性。
(7)HTML的超链接元素
在HTML中,创建超链接需要用到<a>
、<map>
、<area>
3种标签,均支持全局标准属性和全局事件属性。
<a>
标签的target属性进行规定在哪里打开目标页面。默认值为_self.
值 | 含义 |
---|---|
_self | 在超链接所在框架或者窗口中打开目标页面 |
_blank | 在新浏览器窗口中打开目标页面 |
_parent | 将目标页面载入含有该链接框架的父框架集或者父窗口中 |
_top | 在当前的整个浏览器窗口中打开目标页面,因此会删除所有框架 |
1、文本链接
2、锚点链接
一份大型文档可以分为多个小节,读者可以通过锚点链接快速定位到自己想看的部分。锚点通常用唯一属性值id设定,然后在<a>
元素的name属性中用“#+对应的锚点”
<h1 id="main">首页</h1>
<a href="#html_base">跳转到HTML基础</a><br />
<a href="#css——base">跳转到CSS基础</a><br />
<a href="#javascript_base">跳转到JavaScript基础</a><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br />
<h1 id="html_base">HTML基础</h1>
<a href="#main">回到顶部</a><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br />
<h1 id="css——base">CSS基础</h1>
<a href="#main">回到顶部</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br />
<h1 id="javascript_base">JavaScript基础</h1>
<a href="#main">回到顶部</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br />
3、图像链接
4、图像热区链接
通过<map>
标签定义一个image-map,可以包含一个以上的热区<area>
,每个热区都有独立的链接。另外,要为<map>
标签赋予name属性。
<map name="image-link">
<area shape="circle" coords="50,50,30" href="" alt="" />
<area shape="rect" coords="90,20,150,80" href="" alt="" />
<area shape="poly" coords="200,30,300,10,280,70,260,100,220,50" href="" alt="" />
</map>
<img usemap="#image-link" src="./images/01.jpg" alt="Baidu Logo" width="351" height="114">
5、Email链接
<a href="mailto:someone@example.com">联系我们</a>
6、JavaScript链接
<a href="javascript:alert('Hello World!');">点击弹窗</a>
7、空链接
(8)HTML的列表元素
1、无序列表
无序列表的每一项前缀都显示为图形符号。
<ul>
定义无序列表,<li>
定义列表项
<ul>
的type属性值:disc(点)、square(方块)、circle(圆)、none(无)
2、有序列表
有序列表的前缀通常为数字或字母
<ol>
定义有序列表,<li>
定义列表项
<ol>
的type属性值:1(数字)、A(大写字母)、I(大写罗马数字)、a(小写字母)、i(小写罗马数字),<ol>
通过start属性定义序号的开始位置。
3、定义列表
定义列表是一种特殊的列表,它的内容是项目及其注释的组合。
<dl>
定义列表,<dt>
定义每个列表项标题,<dd>
定义列表项标签内部每个列表项描述。