1.网站是由域名(网址),网站源程序和网站空间。
2.HTML超文本标记语言。
一:HTML基础
1.网页头部内容<head></head>一般包括<title>标签, <meta>标签。
(1)<title>标签用来放置网页标题。
(2)<meta>标签。
<head>
<meta charset="UTF-8"> GB2312简体中文
<meta name="Generator" content="EditPlus®">页面说明
<meta name="Author" content="zxq">
<meta name="Keywords" content="网页设计">
<meta name="Description" content="">
<title>Document</title>
</head>
<meta>标签:主要用于搜索引擎robots定义页面主题信息,还可以用于用户浏览器上的cookie,作者,版权信息或关键字;同时还可以设置页面,使其根据定义的时间间隔刷新自己,以及设置pics内容等级。
设置页面的刷新时间(http-equiv刷新),html代码如下:
<meta http-equiv=”refresh” content=”2”/> //两秒内刷新当前页
<meta http-equiv=”refresh” content=”5;
URL=http://www.jquery.com”/> //五秒内跳转到指定的网址。
2.网页主题body
(1)网页背景色
单击属性->页面属性->外观(html)
<body bgcolor="#0066FF">
(2)网页背景图片
单击属性->页面属性->外观(html)
背景图像浏览
<body bgcolor="#0066FF" background="1.png">
(3)网页文字颜色
Text=”#FF0000”
(4)超级链接颜色
超级链接文字有三种状态:分别为“链接”“活动链接”“已访问链接”
默认情况下,“链接”“活动链接”文字的颜色是蓝色,
“已访问链接”文字的颜色是紫色。
link="#0000FF" vlink="#FF00CC" alink="0000FF"
链接:指定应用于链接文本的颜色(对应于link)
已访问链接:指定应用于已访问链接的颜色(对应于vlink)
活动链接:指定当鼠标(或指针)在链接上单击时应用的颜色。(对应于alink)
(5)页面边距
网页中的内容与页面四边之间的距离。
leftmargin="0"表示左边距 topmargin="0"表示上边距
(6)网页文字
设置文本格式有两种方法:使用HTML标签格式化文本和使用层叠样式表CSS格式化文本。
使用HTML标签和CSS都可以控制文本属性,包括特点字体和文字大小,粗体,斜体,下划线,文本颜色等。
两者的区别:使用HTML标签仅仅对当前应用的文本有效,当改变设置时,无法实现文本的自动更新。而css则不同,通过CSS事先定义好文本样式,当改变CSS样式表时,所有应用该样式的文本自动更新。
文字的语法为:<font >网页设计教程</font>
网页文字的样式,主要是设置文字的字体,字号,颜色等属性。
<font face="宋体" size ="3" color ="#ff0">网页设计教程</font>
Size的参数范围是1-7,
<br />回车换行。
(7)文字颜色
<font color ="red">网页设计教程</font><br/>
<font color="blue" size="5">网页设计教程</font><br/>
<font color ="#f00" size="7">网页设计教程</font>
文本的字体。
<font face="Arial,宋体">网页制作教程</font>
(8)标题字体
<body>
<h1>一号标题</h1>
<h2>二号标题</h2>
<h3>三号标题</h3>
<h4>四号标题</h4>
</body>
(9)逻辑字体和物理字体
逻辑字体不指明字体如何显示,而是让Web浏览器自行决定显示方式,不同的浏览器解释的效果可能就不一样。
物理字体:明确指明了字体的类型,无论何种浏览器,遇到这些表示的文字的标签时,都用相同的方式进行显示。
<b>粗体</b>
<i>斜体</i>
<u>下划线</u>
<sup>上标,将文字显示为上标</sup>
<sub>下标,将文字显示为下标</sub>
<tt>用等宽字体来显示文本,相当于打字机的效果</tt>
<s>删除线,该标签在指定的文本上画一条删除线</s>
二:常用的一些标签
1. 段落
(1) 段落标签
<p>这是一个段落</p>中间的内容就是表示一个段落。网页中有多少个<p>标签,就有多少个段落。
<body>
<p>网页制作教程</p>
<p>第一篇:HTML篇</p>
<p>第二篇:CSS篇</p>
<p>第三篇:JavaScript篇</p>
</body>
2.回车换行<br/>
<br/>标签就是强制换行。一个<br/>标签换一行,如果多个<br/>标签,就会换行多次。
3.注释
<!--下面一段代码的功能是……,代码开始-->
<p>HTML代码教程</p><br/>
<!--本段代码结束-->
4.空格
<p>   ;网页制作  ;   ;教程</p>
5.水平线
水平线的标签时<hr>
(1) 宽度可以是确定的像素值,也可以是窗口的百分比。
<hr width="宽度">
<hr width="500">
<hr width="80%">
(2) 水平线高度size
<hr size="高度">
<hr size="3"/>
高度只能是像素值。
<hr color="颜色">
<hr align ="对齐方式"> left左对齐 center居中对齐 right右对齐
6.文字对齐
如果要将网页中的文字对齐,可以使用align属性,对齐方式哟left,center,right三种。
<p align ="left">HTML代码教程<p>
<p align ="center">CSS教程<p>
<p align = "right">JavaScript教程<p>
<center></center>标签,也可以实现居中对齐,这个标签除了可以控制文字以外,还可以控制图片或其他图像。
7.pre标签
Pre标签是preformatted的简写,pre标签与p标签基本相同,唯一的区别就是该标签中的文字内容将保留空格和换行符,并且标签中的英文字符都将统一用等宽字体,一遍对齐。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body bgcolor="#0066FF" background="1.png">
text = "#FF0000"
link="#0000FF" vlink="#FF00CC" alink="0000FF"
leftmargin="0" topmargin="0"
<font face="宋体" size ="3" color ="#ff0">网页设计教程</font>
<font color ="red">网页设计教程</font><br/>
<font color="blue" size="5">网页设计教程</font><br/>
<font color ="#f00" size="7">网页设计教程</font>
<font face="Arial,宋体">网页制作教程</font>
<h1>一号标题</h1>
<h2>二号标题</h2>
<h3>三号标题</h3>
<h4>四号标题</h4>
<b>粗体</b>
<i>斜体</i>
<u>下划线</u>
<sup>上标,将文字显示为上标</sup>
<sub>下标,将文字显示为下标</sub>
<tt>用等宽字体来显示文本,相当于打字机的效果</tt>
<s>删除线,该标签在指定的文本上画一条删除线</s>
<p>这是一个段落</p>
<p>网页制作教程</p>
<p>第一篇:HTML篇</p>
<p>第二篇:CSS篇</p>
<p>第三篇:JavaScript篇</p>
<!--下面一段代码的功能是……,代码开始-->
<p>HTML代码教程</p><br/>
<!--本段代码结束-->
<hr width="宽度">
<hr width="500">
<hr width="80%">
<hr size="高度">
<hr size="3"/>
<hr color="颜色">
<hr align ="对齐方式"> left左对齐 center居中对齐 right右对齐
<p align ="left">HTML代码教程<p>
<p align ="center">CSS教程<p>
<p align = "right">JavaScript教程<p>
</body>
</html>