网页制作HTML

一、通用模板：

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8”/>

<title>文档标题</title>

<link rel="shortcut icon" href="img\wujiaoxing.ico"/><!- -设置标签页图标- ->

<link rel=”stylesheet” href=”url”/><!--外接样式表-->

</head>

<body>

<header role=”banner”>

<nav role=”navigation”> 页眉</nav>

</header>

<main role=”main”>

<article>

<section>

<p>主要内容</p>

</section>

</article>

</main>

<aside role=”complementary” >附注栏的其他内容</aside>

<footer role=”contentinfo”>页脚（如：版权）</footer>

</body>

</html>


二、网页三要素：

1.元素标签：

（1）同行显示：

<a> (链接标签) </a>

<em>（斜体标签）</em>

<strong>(粗体标签)</strong>

<code> 标记代码</code>

（2）换行显示：

1.<h2> (标题1标签) </h2>

2.<h3> (标题2标签) </h3>

3.<article> (文章标签)</article>

4.<p> (段落标签) </p>

5.<main></main>注:一个页面最多使用一次！不能放置header; footer ; aside; article中

6.<header> </header>

7.<footer> </footer>

8.<hr> (分隔线标签) </hr>

9.<div>容器标签换行是<div> 固有的唯一格式表现</div>

10.<section> 区块</section>

（3）未知：

1.<img> (图像标签) </img>

2.<font> (字体标签) </font>

3.<b> (粗体标签) </b>

4.<i> (斜体标签) </i>

5.<u> (下划线标签) </u>

6.<sup>(上标标签) </sup>

7.<sub>(下标标签) </sub>

8．<audio> </audio>

9.<video> </video>

10.<li> 列表</li>

11.<ol type=”a ” start=” 3”>

<li>有序列表</li>

<li>有序列表</li>

<li>有序列表</li>

</ol>

12.<ul type=”disc/circle/square”>

<li>无序列表</li>

<li>无序列表</li>

<li>无序列表</li>

</ul>

13．<ins>添加内容(表现为加下划线)</ins>

14.<del>删除内容（表现为加删除线）</del>

15.<cite>标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。按照惯例，引用的文本将以斜体显示。

</cite>

16.<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。</figure>

2.属性:

<a>: href; title;

<img>: src; width; height; alt

3.值：

三、其他：

4.注释：

如：<!--我是被注释内容，并且在浏览器中不会显示-->

5.学习相关链接：

网页转义符号HTML代码大全：http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

HTML 系列教程：http://www.w3school.com.cn/h.asp

各类标签及其用法：http://www.w3school.com.cn/tags/tag_doctype.asp

6．链接锚链接：链接到某一页面的特定区域。

CSS

模板：Selector(选择器){

Attribute(属性): value(值) ;

} // 各种元素。

Color：#000000(黑色)/#ffffff(白色)

注：单斜杆表示或者！

1.链接样式：

a:link{

color: blue;

} /*链接激活前的外观*/

a:hover{

color: orange;

} /*鼠标指向链接时的外观*/

a:hover{

color: red;

} /*激活链接后的外观*/

2.文本样式：

字体：

font-family: Geneva,Tahoma,sans-serif;/*字体类型,三选一*/

font-style: italic/normal; /*斜体和正体二选一*/

font-weight: bolder/bold/normal/lighter;*更粗/正常/更细/三选一*/

font-size: 16px/1em;/*字体大小，默认1em=16px*/

line-height:16px/*行高*/

字间距：word-space:length(4px或其他);

字偶距:letter-space:length(4px或其他);

添加缩进：text-indent: length(2em或其他);

对齐文本：text-align: left/right/center/justify（两端对齐）;

修改文本大小写:text-transform: uppercase(大)/lowercase(小)/none;

装饰文本：：text-decoration: underline/overline/through/none;

(下划线/上划线/删除线/无)

3.元素显示方式：display: block/inline/;(换行/行内显示)

4.元素可见性：visibility: visible/hidden;

5.边框：border-style :dashed/solid/dotted; (虚线/实线/点划线)

border -width:

border -color:

border:2px solid red;

border-radius:length; //边框圆角半径

6.外/内边距：margin-top/-bottom:length;

Padding：length;

Padding-top/bottom/left/right:length;

7.元素浮动：float:left/right/none;

8.清除浮动：clear:left/right;

9.处理溢出：overflow: visible/hidden/scroll/auto;

10.修改指针形状：cursor: pointer/default/crosshair/move/wait/help;

11.列表标记：

list-style-type:disc/circle/square….;

/*

disc:圆点；circle：圆圈；square：方块；decimal：数字；

upper-alpha：大写字母。

*/

12.有序列表：

<ol start=”2”>从2开始编号</ol>

List-style-position: inside/outside;


13.fieldset(表单):

表单字段(type属性值)：text/email/password/url/submit/radio(单)/checkbook（复选）

<input type=”text” placeholder=”提示信息”>

单选框：

<p>

<input type="radio" id="tankzx" name="school" value="T"/>

<label for="tankzx" >tk</label>

</p>

复选框:

<p>

<input type="checkbox" id="tank" name="学校" value="TZ"/>

<label for="tank" >tk</label>

</p>

列表框：

<p>

<label for="state">State（国家）：</label>

<select id="state" name="state" size=” ”>

<optgroup label=”xx”> /*分组列表*/

<option value="ch">China</option>

<option value="usa">American</option>

</optgroup>

<option value="en">England<option>

</select>

</p>

14.表格:

<table>

<tr> //行标记

<th></th> //表头标记

<td></td> //单元格标记

</tr>

<tr>

<td></td> //单元格标记

<td></td> //单元格标记

</tr>

</table>

Javascript

1.函数调用：

直接调用 (functionname(形参))

事件响应调用（onclick=”check()”）

超链接调用 (<ahref=”javascript:check()”)