html:
<html>这个是HTML5的根元素。可以省略 注意每个文件最多只有一个根元素
<head>页面头部分,可以省略
<style>引入样式
<h1 - h6> 标题1-6字体越来越小
<p> 定义的是段落 可以指定id class style 等属性
<hr> 定义水平线
<span> 和div基本相似，只是不会默认换行，定义文档中的节
<meta> 元素可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。
<progress> 进度条头部信息：
<script> 该元素包含javaScript脚本。
<style> 该元素定义内部css样式
<link> 该元素用于连接外部CSS样式等资源
<base> 该元素用于指定该页面中所有的连接和基准链接
<meta> 该元素用于定义HTML页面的元数据
<table>标签
1.table标签的作用: 显示数据
帮助页面布局
2.colspan: 跨列
rowspan: 跨行
3.<table>相关标签:
<caption>：用于定义表格标题
<tr>:用来定义表格行
<td>:用来定义表格列
<th>:用来定义表格页眉的单元格,内容自动居中
<thead>：用来定义一个子表格块的表格头
<tbody>：用来定义一个子表格块的内容主体
<tfoot>: 用来定义一个子表格块的页脚
<col>: 为表格中的一个或者多个列指定属性值
<colgroup>：用来组织多个<col...../>元素
框架:
作用:可以实现在同一个页面中
<frameset>：不负责页面内容的显示,只是辅助页面的分割 cols rows
<iframe> </iframe> frameborder=0:内联框的边框为0
表单：form
action:提交位置
method:提交方式,get,post
表单元素：
文本框,input type=text name="",value
密码框,input type=password
单项框，radio,name=""
复选框：checkbox
提交按钮：submit
普通按钮：button
图片按钮：image src=""
文件上传：file
隐藏域：hidden
重置按钮：reset
disabled:禁用标签
readonly只读
下拉列表：select,option
文本域：textarea
html:超文本标签语言，内容
css:层叠样式表，美化
js:java脚本，动画
标签的分类
块级标签：
标题标签：h1,h2,h3,h4,h5,h6
段落标签:p
水平线标签：hr
有序列表标签：ol,li
无序列表标签：ul,li
定义描述标签：dl,dt,dd
表格标签：table，tr,td
表单标签：form
分区标签：div
行级标签：
图像标签：img
范围标签：span
换行标签：br
<b> 定义粗体文本
<i> 定义斜体文本
<em>定义强调文本 实际效果和斜体文本差不多
<strong> 定义粗体文本 与<b>差不多
<sub> 定义下标文本
<bdo>定义文本的显示方向 只能是ltr 或者是 rtl 比如
<bdo dir = ltr>左至右</bdo><br/>
<bdo dir = rtl>右至左</bdo><br/>
<article> 该元素代表页面上独立、完整的一篇文章。
该元素内部可以使用<head> <footer> <section> <article>(附属文章)
<section> 页面分块
<nav> 该元素用于定于导航条 包括主导航条 边栏导航 等
<aside> 该元素专门用于定义当前页面或当前文章的附属信息
<header> 该元素内部可以包含多个<h1-6>这样的标题
<hgroup> 用于组织多个<h1-6> 这样的标题元素
<footer> 用于脚注部分 什么版权信息，作者授权
<figure> 一块独立的图片区域 可以包含<figcaption> <img>元素标签
<figcaption> 图片区域标题
<abbr> 用以表达一个缩写，可以指定如下属性（title）
表示的是该缩写所代表的全称
比如：疯狂教育中心的简写是<abbr title = 疯狂java >fkjava</abbr>
<address>用于表示的是一个地址 浏览器会使用缩进的方式显示这段被引用文本，可以加上cite
比如：疯狂软件的地址是<address>广州市天河区车坡大岗路4号沣宏大厦3006-3011</address>
<cite> 表示是一本书或者一首歌等的标题
<dfn> 浏览器通常会用粗体或者斜体字显示 <dfn.../>所包含的文本
<del>:定义文档中被删除的文本，浏览器通常会以中划线形式显示这个文本
cite：该属性值是个URL该URL对应的文本解释了文本被删除或者插入的原因
datetime: 定义文本被删除或者插入的日期
<ins>:定义文本被删除的文本浏览器通常会以下划线的形式显示这个文本
<pre>: 预格式化，实际上就是浏览器会保留<pre ..../>里面的文本格式比如空格回车
<sample>: 用于定义示范文本内容
<kbd>: 用于定义键盘文本。该元素用于表示文本是通过键盘输入的。通常在计算机使用文档、使用说明中会经常使用该元素
<var> :用于表示一个变量。浏览器会通常使用斜体字来显示其文本
css:
div+css页面布局:
1.盒子的属性:
内容:变迁中的文字或图片,或者是其他盒子
边框:border （border-color、border-style、border-width）
内边距:padding,标识内容离边框的距离
外边距:margin
2.超链接的样式:
超连接4种样式:
(有顺序)
未访问状态(a:link)
已访问状态(a:visited)
鼠标移上状态(a:hover)
激活选定状态(a:active) relative(相对的)
3.样式分类:按照样式的位置来分类
行内样式: 样式代码写到标签后面
内部样式: 样式代码写在style标签里面,调试阶段使用
外部样式: 样式代码写在css文件中,外部样式标签需要使用link标签来引用: <link rel="stylesheet" href="**.css">
优先级: 行内样式 > 内部样式 > 外部样式
先记住其优点在慢慢体会
表达效果丰富
文档占用的体积小
便于信息的检索
可读性好
另外记住由外部导入：
<style type = "txt/css">
@import "文件名.css";
</style>
这种方式外部导入
另外一种就是在内部设置css样式
内联样式：
eg:
<div style = "
font-size: 18px;
color : #60c;
height: 30px;
width: 200px;
border-top:3px solid #cccccc;
border-left: 3px solid #cccccc;
border-bottom: 3px solid #000000;
border-right: 3px solid #000000;
">
接下来是元素选择器：
实际上就是在自己设置的css样式前面加上名字元素标签的名字
比如：div{
这里面上就是css样式的设置
}
属性选择器：
实际上在元素选择器上面的元素标签后面加上这个元素的属性设置比如说：
div(id = 3){
...
}
div(id *= xx){
...
}
ID选择器：
实际上就是在名字前面加个#号
比如 #XX{
...这里面同样是css样式的内容
}
表示的是对id = xx的元素起css的样式作用
还可以
p#xx{
。。。
}
这个就表示id为xx而且是只对这个id元素的p元素起作用
class选择器：
比如:
.myclass {
。。。
}
对所有的myclass元素都起作用的css样式
再比如：
div.myclass{
...
}
对所有的class为myclass的div元素起作用
包含选择器：
用于指定目标选择器必须处于某个选择器对应的元素内部
比如：
div{
...
}
div .a{
...
}
子选择器：
等于说包含选择器可以包含孙子但是子选择器却只能够包含直接子元素
比如说：
div{
。。。
}
div>.a{这个格式就是说a是这个div元素的直接子类
...
}
兄弟选择器：
格式如下：Selector1~selector2{
...
}等于说同时兄弟两个选择器都是这种css格式设置
于是就多了个
选择器组合？
格式：
Selector1,selector2,Selector3...{
...
}
这里面定义的css样式会出现在这个所有的选择器匹配的元素里面
比如：
div,.a,#abc{
...
}
伪元素选择器：
如下几个：
:first-letter:该选择器对应的css样式对指定的对象内的第一个字符起作用
:first-line:该选择器对应的css样式对指定对象内的第一行内容起作用
:before：该选择器与内容相关的属性结合使用，用于在指定对象内部的前端插入内容
:after：该选择器与内容相关的属相结合使用，用于在指定对象的内部的尾端添加内容
在元数据中的http-equiv属性有很多种设置:
实际上表示的是http文件头作用还有很多其他属性可以设置，慢慢积累
记住solid表示的是实现为dotted表示的是虚线
UI状态下的伪类选择器：
Selector:link：匹配selector选择器且未被访问前的元素
selector:visited:。。且已被访问过的元素
上面两种都是大部分指超链接。
:hover : 匹配。且已处于被用户激活状态的元素(鼠标点击与释放之间)
:focus：。。且处于鼠标悬停状态的元素
:enabled：，，且当前处于可用状态的元素
:disabled：。。不可用状态的元素
:checked：。。处于选中状态的元素
:defualt：、、且页面打开时处于选中状态的元素(即使当前没有被选中)
:read-only: 且处于只读状态的元素
:read-write:且处于读写状态的元素
:selection:匹配当前selector选择器中当前被选中的内容
not 和 target 属性：
Selector:not (Selector2)
匹配选择器1但是不匹配选择器2的元素。
Selector:target
匹配符合selector选择器而且必须是命名锚点目标的元素(双击选中)
随机改变页面的颜色：
function changeBg(){
var bgColor = "";
for(var i = 0; i <6 ; i++){
bgColor += "" + Math.round(Math.random() * 9);
}
//将随机生成的背景颜色复制给页面的背景颜色
document.body.style.backgroundColor = "#" + bgColor;
}
几个字体相关的属性：
letter-spacing:字符间距，11px,14px
word-spacing ：单词之间的间隔 11px,14px
text-shadow:阴影效果
color,radius(偏移半径),xoffset,yoffset(偏移方向)
一般是在span的style里面设置这些属性
常用背景属性：
p{
background: url(images/bg.jpg) no-repeat 30px 60px #86748b;
}
常用文本属性：
p{
white-space: nowrap;
}
white-space用于设置目标组件中文本内容对空格处理的方式。normal或者是nowrap
normal抵达容器边界自动换行
mowrap强制在同一行内显示所有文本除非遇到<br/>或者文本结束
a{
text-decoration: none;
}
表示是否有修饰线，下划线等，none,blink,uderline,line-through,overline
//下面内容出自转发：http://www.cnblogs.com/sunyunh/archive/2012/09/01/2666841.html
CSS中， Box Model叫盒子模型（或框模型），Box Model规定了元素框处理元素内容（element content）、内边距（padding）、边框（border） 和 外边距（margin） 的方式。在HTML文档中，每个元素（element）都有盒子模型，所以说在Web世界里（特别是页面布局），Box Model无处不在。下面是Box Model的图示：
Box-Model 1
说明：上图中，由内而外依次是元素内容（content）、内边矩（padding-top、padding-right、padding-bottom、padding-left）、边框（border-top、border-right、border-bottom、border-left）和外边距（marging-top、margin-right、margin-bottom、margin-left）。
内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。而且，外边距可以是负值，而且在很多情况下都要使用负值的外边距。
下图是W3School的Box Model 图解：
Box-Model 2（W3School）
说明：
1.和第一幅图一样，在上图中，元素框的最内部分是实际的内容（element）；直接包围内容的是内边距（padding），内边距呈现了元素的背景（background）；内边距的边缘是边框（border）；边框以外是外边距（margin），外边距默认是透明的，因此不会遮挡其后的任何元素（其实元素的margin就是其所在父元素的padding）。元素的背景应用于由内容和内边距、边框组成的区域。
2.内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器（*）对所有元素进行设置：
/*设置所有元素的外边距和内边矩为0*/
* {
margin: 0;
padding: 0;
}
3. 在 CSS 中，width 和 height 指的是内容区域（element）的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，以下是CSS代码：
#box {
width: 70px;
margin: 10px;
padding: 5px;
}
下图是对上面CSS代码的解释：
以下是一个完整的CSS Box Model布局的示例。
View Code
以下是上面示例的效果截图：
js部分：
仅提供部分代码：如果学会了javase 基本上js语法没有什么太大的问题但是要注意js和javase是两个不相关的语言
<html>
<head>
<title>www.mldnjava.cn</title>
<script language="JavaScript">
function fun(){
var arr = new Array("MLDN","MLDNJAVA","LiXingHua") ;// 开辟三个元素的数组
var str = "数组内容：" ;
for(i=0 ;i<arr.length;i++){
str += arr[i] + "、" ;
}
return str ;
}
alert(fun()) ;
</script>
</head>
<body>
</body>
</html>
<html>
<head>
<title>www.mldnjava.cn</title>
<script language="JavaScript" src="hello.js">
</script>
</head>
<body>
</body>
</html>
helllo.js:
alert("Hello World!!!") ;
<html>
<head>
<title>www.mldnjava.cn</title>
<script language="JavaScript">
document.write("<h1>Hello MLDN !!!</h1>") ;
document.write("<h5>www.MLDNJAVA.cn</h5>") ;
</script>
</head>
<body>
</body>
</html>
<html>
<head>
<title>www.mldnjava.cn</title>
<script language="JavaScript">
document.write("<table border=\"1\">") ;
for(i=1 ; i<=9; i++){
document.write("<tr>") ;
for(j=1; j<=9; j++){
if(j<=i) {
document.write("<td>" + i + "*" + j + " = " + i*j + "</td>") ;
} else {
document.write("<td> </td>") ;
}
}
document.write("</tr>") ;
}
document.write("</table>") ;
</script>
</head>
<body>
</body>
</html>
<html>
<head>
<title>www.mldnjava.cn，MLDN高端Java培训</title>
<script language="javascript">
function fun(){
alert("Hello World!!!") ;
}
</script>
</head>
<body>
<h3><a href="#" onclick="fun()">按我吧！</a></h3>
</body>
</html>
<html>
<head>
<title>www.mldnjava.cn，MLDN高端Java培训</title>
<script language="javascript">
function validate(f){
var value = f.email.value ;
if(!/^\w+@\w+.\w+$/.test(value)){
alert("EMAIL输入格式不正确！") ;
f.email.focus() ;// 让email获得焦点
f.email.select() ;// 让已有的内容全选
return false ;
}
return true ;
}
</script>
</head>
<body>
<form action="test.htm" method="post" name="myform" onsubmit="return validate(this)">
EMAIL：<input type="text" name="email">
<input type="submit" value="提交">
</form>
</body>
</html>
<html>
<head>
<title>www.mldnjava.cn，MLDN高端Java培训</title>
<script language="javascript">
function show(val){
document.myform.result.value = val ;
}
</script>
</head>
<body>
<form action="test.htm" method="post" name="myform">
部门： <select name="dept" onchange="show(this.value)">
<option value="技术部">技术部</option>
<option value="销售部">销售部</option>
<option value="财务部">财务部</option>
</select>
结果： <input type="text" name="result" value="">
</form>
</body>
</html>
<html>
<head>
<title>www.mldnjava.cn，MLDN高端Java培训</title>
<script language="javascript">
function show(){
var name = document.myform.name.value ;
alert("姓名：" + name) ;
var sex ; // 表示性别
if(document.myform.sex[0].checked) {
sex = document.myform.sex[0].value ;
} else {
sex = document.myform.sex[1].value ;
}
alert("性别：" + sex) ;
var inst = "" ;
for(i=0 ; i<document.myform.inst.length; i++){
if(document.myform.inst[i].checked){
inst += document.myform.inst[i].value + "、" ;
}
}
alert("兴趣：" + inst) ;
}
</script>
</head>
<body>
<form action="test.htm" method="post" name="myform">
姓名：<input type="text" name="name"><br>
性别：<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女<br>
兴趣： <input type="checkbox" name="inst" value="唱歌">唱歌
<input type="checkbox" name="inst" value="游泳">游泳
<input type="checkbox" name="inst" value="跳舞">跳舞
<input type="checkbox" name="inst" value="编程" checked>编程
<input type="checkbox" name="inst" value="上网">上网<br>
<input type="button" value="显示" onclick="show()">
</form>
</body>
</html>
<html>
<head>
<title>www.mldnjava.cn，MLDN高端Java培训</title>
<script language="javascript">
function returnValue(thisurl){
var city = document.myform.city.value ;// 取出当前选择好的信息
var doc = window.opener.document ;// 取得父窗口文档
doc.parentform.result.value = city ;// 设置新内容
window.close() ;
}
</script>
</head>
<body>
<form name="myform">
选择： <select name="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
<option value="广州">广州</option>
<option value="天津">天津</option>
</select>
<input type="button" value="返回" onclick="returnValue()">
</form>
</body>
</html>
<html>
<head>
<title>www.mldnjava.cn，MLDN高端Java培训</title>
<script language="javascript">
function fun(thisurl){
window.open(thisurl,"页面标题","width=470,heigth=150,scrollbars=yes,resizeable=no") ;
}
</script>
</head>
<body>
<form action="" method="post" name="myform">
网址： <SELECT name="url" onChange="fun(this.value)">
<OPTION VALUE="hello_1.htm">hello1</OPTION>
<OPTION VALUE="hello_2.htm">hello2</OPTION>
</SELECT>
</form>
</body>
</html>
<html>
<head>
<title>www.mldnjava.cn，MLDN高端Java培训</title>
<script language="javascript">
function fun(thisurl){
if(window.confirm("确认删除？")){
alert("您选择的“是”！") ;
} else {
alert("您选择的“否”！") ;
}
}
</script>
</head>
<body>
<a href="#" onclick="fun()">删除邮件</a>
</body>
</html>
<html>
<head>
<title>www.mldnjava.cn，MLDN高端Java培训</title>
<script language="javascript">
function shownewpage(thisurl){
window.open(thisurl,"页面标题","width=470,heigth=150,scrollbars=yes,resizeable=no") ;
}
</script>
</head>
<body>
<form name="parentform">
<input type="button" value="选择信息" onclick="shownewpage('content.htm')">
<br>选择的结果：<input type="text" name="result">
</form>
</body>
</html>
等等
关于前端html css js 实际上可以不用自己写出网站 但是要能够在网上找框架 和资源 并且能够修改
这是对后端的基本要求
此内容纯属个人看法和总结 。。