【Html,Css,JavaScript】初学总结
网页制作
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】初学总结的更多相关文章
- HTML,Css,JavaScript之间的关系
简述HTML,Css,JavaScript 网页设计思路是把网页分成三个层次,即:结构层(HTML).表示层(CSS).行为层(Javascript). 1.HTML(超文本标记语言 Hyper Te ...
- Javascript初学篇章_5(对象)
对象 Javascript是一种面向对象的语言,因此可以使用面向对象的思想来进行javascript程序设计对象就是由一些彼此相关的属性和方法集合在一起而构成的一个数据实体.举个例子,一只猫是个对象, ...
- html css javascript 加载的顺序
html /css /javascript 这三者的加载顺序影响整个页面的加载速度.而加载速度的快慢直接影响pv(访问量),而且会影响经济收入.在大网站中,可能打开速度快一秒,一年能多带来上亿的收入. ...
- Sublime Text插件：HTML+CSS+JAVASCRIPT+JSON快速格式化[转]
今天在github上乱逛,无意间找到victorporof分享的htmlpretty插件,特做推荐: 先看看他是怎么描述htmlpretty的: This is a Sublime Text 2 an ...
- html+css+javascript实现列表循环滚动示例代码
使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...
- HTML+CSS+JAVASCRIPT 总结
1. HTML 1: <!doctype html> 2: <!-- This is a test html for html, css, javascript --> 3: ...
- Umbraco（3） - CSS & Javascript（翻译文档）
原文地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/umbraco3css-javascript/ CSS & Jav ...
- 原创的基于HTML/CSS/JavaScript的层级目录树
之前参加过一些基于HTML/CSS/JavaScript的项目,当在页面中需要生成一颗目录树时,总是首先想着网上有没有现成的生成树的源代码,比如dtree.zthee,或者使用一些javascript ...
- MiniCodeEditor：只有168字节的在线Html/CSS/JavaScript编辑器
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:MiniCodeEditor:只有168字节的在线Html/CSS/JavaScript编辑器.
- CSS+Javascript的那些框架
CSS CSS 制作框架 SASS http://www.oschina.net/p/sass Blueprint http://www.oschina.net/p/blueprintcss Ela ...
随机推荐
- JSON WEB TOKEN 从原理到实战
阅读本文大概需要 4.2 分钟. 作者:王廷骏原文:https://juejin.im/post/5ce272c1e51d45109b01b0f8 1. JSON WEB TOKEN 1.1 什么是J ...
- 使用jquery进行跨域操作
ajax默认是不支持跨域操作的,只能提交跨域请求,无法获得响应.而可以用$.getScript()函数来进行跨域操作.代码如下: <button id="btnTest"&g ...
- SwipeLayou与ScrollerView滑动冲突
在SwipeLayout内嵌套ScorllerView滑动会出现上滑滑动冲突,ScollerView不能往上滑,,,,,, mSlv.getViewTreeObserver().addOnScroll ...
- Mondriaan's Dream POJ - 2411
Mondriaan's Dream POJ - 2411 可以用状压dp,但是要打一下表.暴力枚举行.这一行的状态.上一行的状态,判断如果上一行的状态能转移到这一行的状态就转移. 状态定义:ans[i ...
- Vue.js学习笔记--4. 组件的基本使用
整理自官网教程 -- https://cn.vuejs.org/ 1. 所有Vue组件同时也都是Vue实例,分为全局组件和局部组件,注册方式如下. <div id="app" ...
- Elasticsearch--集群管理_再平衡&预热
目录 控制集群的再平衡 再平衡 集群的就绪 集群再平衡设置 控制再平衡何时开始 控制同时在节点移动的分片数量 控制单个节点上同时初始化的分片数量 控制单个节点上同时初始化的主分片数量 控制分配的分片类 ...
- CSS综合用法
div 居中 {position: absolute; top: 50%; left: 50%; margin-top: -180px; margin-left: -160px;}
- git ---回到过去
git命令回顾 git checkout /git reset -git reset HEAD~ //~代表回滚到第几个版本.. 有多个的话可以在~后面加个数字 git reset --mixe ...
- 当前主要的常用的PHP环境部署套件比较
当前主要的常用的PHP环境部署套件比较 作为新手,需要学习PHP,或者需要搭建PHP+MySQL运行环境时,就需要去找各种搭建方法,一步一步按照操作流程操作,不仅繁琐,而且容易出错,还会带来安全隐患. ...
- cmanformat - 不是命令啦，是个演示文件
描述 DESCRIPTION cmanformat 是 man pages 格式的演示文件. 由于系统不同会有差异.在 XWindow 下会好些. __________________________ ...