网页制作

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. <h1> (标题1标签) </h1>

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

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-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()”）

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

【Html,Css,JavaScript】初学总结的更多相关文章

  1. HTML,Css,JavaScript之间的关系

    简述HTML,Css,JavaScript 网页设计思路是把网页分成三个层次,即:结构层(HTML).表示层(CSS).行为层(Javascript). 1.HTML(超文本标记语言 Hyper Te ...

  2. Javascript初学篇章_5(对象)

    对象 Javascript是一种面向对象的语言,因此可以使用面向对象的思想来进行javascript程序设计对象就是由一些彼此相关的属性和方法集合在一起而构成的一个数据实体.举个例子,一只猫是个对象, ...

  3. html css javascript 加载的顺序

    html /css /javascript 这三者的加载顺序影响整个页面的加载速度.而加载速度的快慢直接影响pv(访问量),而且会影响经济收入.在大网站中,可能打开速度快一秒,一年能多带来上亿的收入. ...

  4. Sublime Text插件：HTML+CSS+JAVASCRIPT+JSON快速格式化[转]

    今天在github上乱逛,无意间找到victorporof分享的htmlpretty插件,特做推荐: 先看看他是怎么描述htmlpretty的: This is a Sublime Text 2 an ...

  5. html+css+javascript实现列表循环滚动示例代码

    使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...

  6. HTML+CSS+JAVASCRIPT 总结

    1. HTML 1: <!doctype html> 2: <!-- This is a test html for html, css, javascript --> 3: ...

  7. Umbraco（3） - CSS & Javascript（翻译文档）

    原文地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/umbraco3css-javascript/ CSS & Jav ...

  8. 原创的基于HTML/CSS/JavaScript的层级目录树

    之前参加过一些基于HTML/CSS/JavaScript的项目,当在页面中需要生成一颗目录树时,总是首先想着网上有没有现成的生成树的源代码,比如dtree.zthee,或者使用一些javascript ...

  9. MiniCodeEditor：只有168字节的在线Html/CSS/JavaScript编辑器

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:MiniCodeEditor:只有168字节的在线Html/CSS/JavaScript编辑器.

  10. CSS+Javascript的那些框架

    CSS CSS 制作框架 SASS http://www.oschina.net/p/sass Blueprint  http://www.oschina.net/p/blueprintcss Ela ...

随机推荐

  1. Windows 中属于不同Owner的Workspace 互相无法看见，且无法删除

    Windows 中属于不同Owner的Workspace 互相无法看见,且无法删除 而且不能重叠,重叠的话会报错,告诉你这个文件夹已经被其他用户映射, 所以你必须以那个Owner登陆tfs,然后删除 ...

  2. ARC102 C~D

    C: 枚举中间点,计算两边点差值,把个数乘起来即可 #include<iostream> #include<cstdio> #include<algorithm> ...

  3. bzoj 1180: [CROATIAN2009]OTOCI【LCT】

    一道几乎是板子的LCT,但是沉迷数学很久时候突然1A了这道题还是挺开心的 #include<iostream> #include<cstdio> using namespace ...

  4. 一文了解H5照片上传过程

    一.选择拍照或文件 HTML: 使用<input>标签, type设为"file"选择文件, accept设为"image/*"选择文件为图片类型和 ...

  5. 【爬坑系列】之解读kubernetes的认证原理&实践

    对于访问kube-apiserver模块的请求来说,如果是使用http协议,则会顺利进入模块内部得到自己想要的:但是如果是用的是https,则能否进入模块内部获得想要的资源,他会首先要进行https自 ...

  6. 关于数学函数中的abs——————————————杭电2057——————————————————————————

    数学函数中的abs当你用abs之后括号之中的数字就转换成了int格式.可能会丢失一些数据造成误差而且还会有,    警告: #include<stdio.h> #include<ma ...

  7. [ZPG TEST 118] 最大值【dp+离线】

    题4  最大值(findmax) [题目描述] 找到一个数组的最大值的一种方法是从数组开头从前到后对数组进行扫描,令max=a[0](数组下表从0..N-1),如果a[i]>max,就更新max ...

  8. [ZPG TEST 109] 兔子跳跃【构图】

    兔子跳跃 (jumping.pas/c/cpp) [问题描述] 兔子常常感到孤独,所以当他们决定出去走走,去见见他们的朋友,他们跳的很快. Iris正走在一条无限长的直线道路上.这条道路上点的编号.. ...

  9. 189 Rotate Array 旋转数组

    将包含 n 个元素的数组向右旋转 k 步.例如,如果  n = 7 ,  k = 3,给定数组  [1,2,3,4,5,6,7]  ,向右旋转后的结果为 [5,6,7,1,2,3,4].注意:尽可能找 ...

  10. 不重启IIS修改dotnet framework版本

    因为公司现在存在.net站点和asp站点共同运行的情况,所以需要对IIS进行一些修改,运行环境Win2003+IIS6 一.起因 原来的老站是asp开发的,用的是.net 2.0运行环境; 新站是.n ...