具体步骤如下：
静态网页现阶段主要采用DIV+CSS+Javascript来实现,
第一步:在桌面上创建一个文本文件;
第二步:将文本名改为"testhtml"(扩展名为html或者htm即可,看不见扩展名可以到);
第三步:文件名改好后,右击打开方式,选择记事本;
第四步:写代码。
html代码写成下图这样即可:
2css代码写在下图区域内:
3javascript代码写在下图区域内:
第五步:在这些代码区域内写上你的代码;
第六步:保存该文本文件;然后右击打开选择一个浏览器打开;如果出现“已限制网页运行脚本。。。”点击允许。
代码如下：
<!doctype html>
<html>
<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>
<img src="这里填你的名字，例如1jpg，跟html放在同一个文件夹下面就行">
<img src="2jpg">
<img src="3jpg">
<p>这里输入你想要输入的文字</p>
</body>
</html>
1结构性定义
文件类型 <HTML></HTML> （放在档案的开头与结尾）
文件主题 <TITLE></TITLE> （必须放在「文头」区块内）
文头 <HEAD></HEAD> （描述性资料，像是「主题」）
文体 <BODY></BODY> （文件本体）
（由浏览器控制的显示风格）
标题 <H></H> （从1到6，有六层选择）
标题的对齐 <H ALIGN=LEFT|CENTER|RIGHT></H>
区分 <DIV></DIV>
区分的对齐 <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
引文区块 <BLOCKQUOTE></BLOCKQUOTE> （通常会内缩）
强调 <EM></EM> （通常会以斜体显示）
特别强调 <STRONG></STRONG> （通常会以加粗显示）
引文 <CITE></CITE> （通常会以斜体显示）
码 <CODE></CODE> （显示原始码之用）
样本 <SAMP></SAMP>
键盘输入 <KBD></KBD>
变数 <VAR></VAR>
定义 <DFN></DFN> （有些浏览器不提供）
地址 <ADDRESS></ADDRESS>
大字 <BIG></BIG>
小字 <SMALL></SMALL>
与外观相关的标签（作者自订的表现方式）
加粗 <B></B>
斜体 <I></I>
底线 <U></U> （尚有些浏览器不提供）
删除线 <S></S> （尚有些浏览器不提供）
下标 <SUB></SUB>
上标 <SUP></SUP>
打字机体 <TT></TT> （用单空格字型显示）
预定格式 <PRE></PRE> （保留文件中空格的大小）
预定格式的宽度 <PRE WIDTH=></PRE>（以字元计算）
向中看齐 <CENTER></CENTER> （文字与都可以）
闪耀 <BLINK></BLINK> （有史以来最被嘲弄的标签）
字体大小 <FONT SIZE=></FONT>（从1到7）
改变字体大小 <FONT SIZE=+|-></FONT>
基本字体大小 <BASEFONT SIZE=> （从1到7; 内定为3）
字体颜色 <FONT COLOR='#$$$$$$'></FONT>
2连结与图形
连结 <A href='/URL'></A>
连结到锚点 <A HREF='URL#'></A>（如果锚点在另一个档案）
<A HREF='#'></A> （如果锚点目前的档案）
连结到目的视框 <A href='/URL' TARGET=''></A>
设定锚点 <A NAME=''></A>
图形 <IMG src='/URL'>
图形看齐方式 <IMG src='/URL' ALIGN=TOP|BOTTOM|MIDDLE>
图形看齐方式 <IMG src='/URL'
ALIGN=LEFT|RIGHT|TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM>
取代文字 <IMG src='/URL' ALT=''> （如果没有办法显示图形则显示此文字）
点选图 <IMG src='/URL' ISMAP> （需要CGI程式）
N20 点选图 <IMG src='/URL' USEMAP='URL'>
N20 地图 <MAP NAME=''></MAP>（描述地图）
N20 段落 <AREA SHAPE='RECT' COORDS=',,,' href='/URL'|NOHREF>
30 大小 <IMG src='/URL' WIDTH='' HEIGHT=''>（以pixels为单位） N10 图形边缘 <IMG src='/URL' BORDER=> （以pixels为单位）
N10 图形边缘空间 <IMG src='/URL' HSPACE= VSPACE=> （以pixels为单位）
N10 低解析度图形 <IMG src='/URL' LOWsrc='/URL'>
N11 用户端拉 <META HTTP-EQUIV='Refresh' CONTENT='; URL=URL'>（使用端自动更新 ）
N20 内嵌物件 <EMBED src='/URL'> （将物件插入页面）
N20 内嵌物件大小 <EMBED src='/URL' WIDTH='' HEIGHT=''>
3分隔
段落 <P> （通常是两个return）
30 段落 <P></P> （新定义成容器型标签）
30 文字看齐方式 <P ALIGN=LEFT|CENTER|RIGHT></P>
换行 <BR> （一个return）
N10 文字部份看齐方式<BR CLEAR=LEFT|RIGHT|ALL>（与图形合用时）
横线 <HR>
N10 横线对齐 <HR ALIGN=LEFT|RIGHT|CENTER>
N10 横线厚度 <HR SIZE=> （以pixels为单位）
N10 横线宽度 <HR WIDTH=> （以pixels为单位）
N10 横线比率宽度 <HR WIDTH=%> （以页宽为100%）
N10 实线 <HR NOSHADE> （没有立体效果）
N10 不可换行 <NOBR></NOBR> （不换行）
N10 可换行处 <WBR> （如果需要，可在此断行）
列举 （可以巢状列举）
无次序式列举 <UL><LI></UL> （<LI> 放在每一项前）
N10 公布式列举 <UL TYPE=DISC|CIRCLE|SQUARE>（定义全部的列举项）
<LI TYPE=DISC|CIRCLE|SQUARE>（定义这个及其后的列举项）
有次序式列举 <OL><LI></OL> （<LI> 放在每一项前）
N10 数标型态 <OL TYPE=A|a|I|i|1> （定义全部的列举项）
<LI TYPE=A|a|I|i|1> （定义这个及其后的列举项）
N10 起始数字 <OL value=> （定义全部的列举项）
<LI value=> （定义这个及其后的列举项）
定义式列举 <DL><DT><DD></DL>（<DT>项目, <DD>定义）
表单式列举 <MENU><LI></MENU>（<LI> 放在每一项前）
目录式列举 <DIR><LI></DIR> （<LI> 放在每一项前）
背景与颜色
30 重复排列的背景 <BODY background='/URL'>
N11+ 背景颜色 <BODY BGCOLOR='#$$$$$$'> （依序为红、绿、蓝）
N11+ 文字颜色 <BODY TEXT='#$$$$$$'>
N11+ 连结颜色 <BODY LINK='#$$$$$$'>
N11+ 看过的连结 <BODY VLINK='#$$$$$$'>
N11 使用中的连结 <BODY ALINK='#$$$$$$'>
4特殊字元（以下标签需用小写）
特别符号 ; （其中 代表 ISO 8859-1 的编码）
< < > > & & ' '
注册商标TM
N10+ 注册商标TM
著作权符号
N10+ 著作权符号
5表单 （通常需要与CGI程式配合）
定义表单 <FORM ACTION='URL' METHOD=GET|POST></FORM>
N20 上传档案 <FORM ENCTYPE='multipart/form-data></FORM>
输入栏位 <INPUT TYPE='TEXT|PASSWORD|CHECKBOX|RADIO|IMAGE|HIDDEN|SUBMIT|RESET'>
栏位名称 <INPUT NAME=''>
栏位内定值 <INPUT value=''>
已选定 <INPUT CHECKED> （适用於checkboxes与 radio boxes）
栏位宽度 <INPUT SIZE=> （以字元数为单位）
最长字数 <INPUT MAXLENGTH=> （以字元数为单位）
下拉式选单 <SELECT></SELECT>
下拉式选单名称 <SELECT NAME=''></SELECT>
选单项目数量 <SELECT SIZE=></SELECT>
多选式选单 <SELECT MULTIPLE> （多选）
选项 <OPTION>
内定选项 <OPTION SELECTED>
文字输入区 <TEXTAREA ROWS= COLS=></TEXTAREA>
输入区名称 <TEXTAREA NAME=''></TEXTAREA>
N20 输入区换行方式 <TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL></TEXTAREA>
6表格
30 定义表格 <TABLE></TABLE>
30 表格框线 <TABLE BORDER></TABLE> （有或没有）
N11 表格框线 <TABLE BORDER=></TABLE>（可以设定数值）
N11 储存格左右留白 <TABLE CELLSPACING=>
N11 储存格上下留白 <TABLE CELLPADDING=>
N11 表格宽度 <TABLE WIDTH=> （以pixels为单位）
N11 宽度比率 <TABLE WIDTH=%> （页宽为100%）
30 表格列 <TR></TR>
30 表格列内容看齐 <TR ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>
30 储存格 <TD></TD> （须与列并用）
30 储存格内容看齐 <TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>
30 不换行 <TD NOWRAP>
N30 储存格背景颜色 <TD BGCOLOR=#$$$$$$>
30 储存格横向连接 <TD COLSPAN=>
30 储存格纵向连接 <TD ROWSPAN=>
N11 储存格宽度 <TD WIDTH=> （以pixels为单位）
N11 储存格宽度比率 <TD WIDTH=%> （页宽为100%）
30 表格标题 <TH></TH> （跟<TD>一样，不过会对中并加粗）
30 表格标题对齐 <TH ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>
30 表格标题不换行 <TH NOWRAP>
30 表格标题占几栏 <TH COLSPAN=>
30 表格标题占几列 <TH ROWSPAN=>
N11 表格标题宽度 <TH WIDTH=> （以pixels为单位）
N11 表格标题比率宽度<TH WIDTH=%> （页宽为100%）
30 表格抬头 <CAPTION></CAPTION>
30 表格抬头看齐 <CAPTION ALIGN=TOP|BOTTOM>（在表格之上/之下）
视框 （定义与控制萤幕上的特定区域）
N20 视框格式总定义 <FRAMESET></FRAMESET> （取代<BODY>）
N20 视框行长度分配 <FRAMESET ROWS=,,,></FRAMESET>（pixels 或 %）
N20 视框行长度分配 <FRAMESET ROWS=></FRAMESET> （ = 相对大小）
N20 视框栏宽度分配 <FRAMESET COLS=,,,></FRAMESET>（pixels 或 %）
N20 视框栏宽度分配 <FRAMESET COLS=></FRAMESET> （ =相对大小）
N20 定义个别视框 <FRAME> （定义个别视框）
N20 个别视框内容 <FRAME src='/URL'>
N20 个别视框名称 <FRAME NAME=''|_blank|_self|_parent|_top>
N20 边缘宽度 <FRAME MARGINWIDTH=> （「左」与「右」边界）
N20 边缘高度 <FRAME MARGINHEIGHT=> （「天顶」与「地底」边界）
N20 卷动条 <FRAME SCROLLING='YES|NO|AUTO'>
N20 不可改变大小 <FRAME NORESIZE>
N20 无视框时的内容 <NOFRAMES></NOFRAMES>（如果浏览器不提供视框功能的话）
7杂项
说明 <!-- --> （浏览器不会显示）
html网页背景颜色的代码就是background-color；颜色有6种表示方法。
html网页背景颜色的代码：
（ ＃ 00FFFF ）海蓝宝石 、（ ＃ 7FFFD4 ） 湛蓝 、（ ＃ F0FFFF ）米色 、 （ ＃ F5F5DC ）浓汤 、（ ＃ FFE4C4 ）黑色 、（ ＃ 000000 ） blanchedalmond 、 （ ＃ FFEBCD ）蓝色 、（ ＃ 0000FF ） blueviolet 、（ ＃ 8A2BE2 ）棕色 、（ ＃ A52A2A ） burlywood 、
（ ＃ DEB887 ） cadetblue 、（ ＃ 5F9EA0 ）沙特勒斯 、（ ＃ 7FFF00 ）巧克力 、 （ ＃ D2691E ） 珊瑚 、（ ＃ FF7F50 ） cornflowerblue 、 （ ＃ 6495ED ） cornsilk 、（ ＃ FFF8DC ）深红 、 （ ＃ DC143C ） 青色。
颜色有6种表示方法，即英文单词、十六进制、RGB、HSL、HSLA和GRBA。
欢迎分享，转载请注明来源：浪漫分享网
微信扫一扫
支付宝扫一扫
评论列表（0条）