:table data,表格单元格。
:表格标题。
rowspan
:这个单元格跨多少行。
colspan
:这个单元格跨多少列。
< table border = " 1" >
< caption> 表格标题caption >
< thead>
< tr>
< td> 第一行 第一列td >
< td> 第一行 第二列td >
< td rowspan = " 3" > 合并行 第三列td >
tr >
thead >
< tbody>
< tr>
< td colspan = " 2" > 第二行 合并列td >
tr >
< tr>
< td> 第三行 第一列td >
< td> 第三行 第二列td >
tr >
tbody >
table >
表格样式
样式属性:
border
:设置边框。单位 px。
cellpadding
:单元格内容边距。单位 px 或 %。
cellspacing
:单元格与单元格之间的距离。单位 px 或 %。
width
、height
:宽、高。单位 px 或 %。 (px 可以省略不写)
< table border = " 1" cellpadding = " 6" cellspacing = " 5" width = " 500" height = " 100" >
< tr>
< td> 我是数据td >
< td> 我是数据td >
tr >
< tr>
< td> 我是数据td >
< td> 我是数据td >
tr >
< tr>
< td> 我是数据td >
< td> 我是数据td >
tr >
table >
表单
表单通过
和
元素实现。
元素通用属性:
type
:表单元素的类型。
name
:表单元素名称,可以随意设置。下面代码演示中不再赘述。
value
:表单元素初始值。
disabled
:禁用这个表单元素。加上后表单元素处于禁止状态,无法输入。
< input type = " text" value = " 我是显示的文本" />
< input type = " password" value = " 我是显示的密码" />
< input type = " radio" name = " 单选框名字" > A:XXX
< input type = " radio" name = " 单选框名字" > B:XXX
< input type = " radio" name = " 单选框名字" > C:XXX
< input type = " radio" name = " 单选框名字" checked > D:XXX
< input type = " checkbox" name = " 多选框名字" checked > A:XXX
< input type = " checkbox" name = " 多选框名字" checked > B:XXX
< input type = " checkbox" name = " 多选框名字" > C:XXX
< input type = " checkbox" name = " 多选框名字" checked > D:XXX
< select>
< option> 选项 1option >
< option selected > 选项 2option >
< option> 选项 3option >
select >
< textarea maxlength = " 最大字符长度" > 这里是默认显示的文本textarea >
< input type = " submit" value = " 提交按钮的名称" >
< label for = " username" > 用户名:label > < input type = " text" name = " username" >
元素用来将以上的表单元素包裹起来(可选)。
< form>
< label for = " username" > 用户名:label >
< input type = " text" name = " username" >
form >
框架
主页面(index.html):
元素用来定义一个框架,这些框架都放到
元素下。
元素的 cols
属性用来定义「分列」。下面示例中定义了两列,第一列宽度 120,第二列占满剩余宽度。
元素的 name
属性定义该框架的「名称」,用于
元素的跳转。
< html>
< frameset cols = " 120,*" >
< frame src = " tryhtml_contents.html" name = " sidebar" />
< frame src = " frame_a.html" name = " content" />
frameset >
html >
子页面(可以有多个): frame_a.html:
< html>
< p> 这里是 frame_a.html 文件p >
< a href = " frame_b.html" target = " content" > 点击这里在 content 框架中跳转到 frame_b.htmla >
html >
frame_b.html:
< html>
< p> 这里是 frame_b.html 文件p >
< a href = " frame_c.html" target = " content" > 点击这里在 content 框架中跳转到 frame_c.htmla >
html >
frame_c.html:
< html>
< p> 这里是 frame_c.html 文件p >
< a href = " frame_a.html" target = " content" > 点击这里在 content 框架中跳转到 frame_a.htmla >
html >
CSS
基础知识
CSS 的三种引入方式:
< style>
CSS代码
style >
< link rel = " stylesheet" type = " text/css" href = " CSS文件地址" >
< p style = " CSS代码 " > p >
三种方式的优先级:外部样式 < 内部样式 < 内联样式 。
CSS 基本语法:
选择器 {
属性1 : 值;
属性2 : 值;
}
选择器 {
属性1 : 值;
属性2 : 值;
}
选择器规则
p { }
h1, h2, h3 { }
* { }
.cls { }
.cls, .a { }
.cls.a { }
#hello { }
文本样式
p {
color : green;
color : #ffffff;
color : rgb ( 0, 0, 0) ;
}
p {
font-family : "Times New Roman" ;
font-size : 18px;
font-weight : bold;
font-weight : 200;
font-style : italic;
}
p {
text-decoration : none;
text-decoration : underline;
text-decoration : overline;
text-decoration : line-through;
}
p {
text-align : center;
line-height : 10px;
line-height : 200%;
line-height : normal;
letter-spacing : 10px;
letter-spacing : normal;
word-spacing : 10px;
word-spacing : normal;
}
背景样式
body {
background-color : #cccccc;
background-image : url ( "图片地址" ) ;
background-repeat : repeat-x;
background-repeat : repeat-y;
background-repeat : no-repeat;
background-position : top left;
}
表格样式
th, td {
border : 1px solid black;
}
table {
border-collapse : collapse;
}
Javascript
引入 Javascript
< script>
script >
< script src = " JS源文件路径" />
基础语法
变量
var global_var = 123 ;
function func ( ) {
var local_var = 114 ;
}
console. log ( local_var) ;
console. log ( local_var) ;
var local_var = 123 ;
数据类型
var a = 123
var b = 123.456
var str1 = '字符串' ;
var str2 = "单双引号皆可" ;
var b = true || false ;
var arr = [ 1 , 2.3 , "js 的数组可以包含不同类型的值" , false ] ;
var n = null ;
var u = undefined ;
var obj = {
属性 : "值" ,
属性2 : "值2"
} ;
类型互转
parseInt ( str) ;
parseFloat ( str) ;
Number ( str) ;
num. toString ( base) ;
Boolean ( val) ;
运算符
a + b
a - b
a * b
a / b
a % b
a++
++ a
a--
-- a
a == b
a === b
a != b
a !== b
a > b
a >= b
a < b
a >= b
a ? b : c
! a
a && b
a || b
a = b
a += b
a -= b
a *= b
a /= b
a &= b
流程控制
只列举特殊的。
for-in
循环: (见对象)
for ( var prop in obj) {
console. log ( obj[ prop] ) ;
}
数组
var arr1 = new Array ( 5 ) ;
var arr2 = [ undefined , undefined , undefined , undefined , undefined ] ;
arr[ arr. length] = 1122 ;
arr. push ( 1122 ) ;
arr. unshift ( 3344 ) ;
delete arr[ 0 ] ;
arr. pop ( ) ;
arr. shift ( ) ;
for ( var i = arr. length - 1 ; i >= 0 ; i-- ) {
console. log ( arr[ i] ) ;
}
arr. forEach ( function ( element, index, arr ) {
console. log ( element) ;
} ) ;
常用方法
arr. indexOf ( element) ;
arr. lastIndexOf ( element) ;
c = a. contact ( b) ;
arr = arr. reverse ( ) ;
arr. join ( sep) ;
arr. sort ( [ compareFunc] ) ;
subArr = arr. slice ( a[ , b] ) ;
函数
函数的定义:
function foo ( arg1, arg2 ) {
return 114 + 514 ;
}
var foo = function ( arg1, arg2 ) {
return 114 + 514 ;
}
函数的参数:
function a ( arg1, arg2 ) {
console. log ( arg1) ;
console. log ( arg2) ;
}
a ( 1 ) ;
function sum ( ) {
var sum = 0 ;
for ( var i = arguments. length - 1 ; i >= 0 ; i-- ) {
sum += arguments[ i] ;
}
return sum;
}
console. log ( 1 , 2 , 3 ) ;
对象
对象的五种构造方法:
var obj1 = {
prop1 : "value1" ,
prop2 : "value2" ,
} ;
var obj2 = new Object ( ) ;
obj2. prop1 = "value1" ;
obj2. prop2 = "value2" ;
function createObj ( value1, value2 ) {
var obj = new Object ( ) ;
obj. prop1 = value1;
obj. prop2 = value2;
return obj;
}
var obj3 = createObj ( "value1" , "value2" ) ;
function Obj ( value1, value2 ) {
this . prop1 = value1;
this . prop2 = value2;
}
var obj4 = new Obj ( "value1" , "value2" ) ;
function Obj ( ) { }
Obj . prototype. prop1 = "value1" ;
Obj . prototype. prop2 = "value2" ;
var obj5 = new Obj ( ) ;
对象属性的增删查改:
obj. prop
obj[ "prop" ]
prop in obj
obj. hasOwnProperty ( "prop" ) ;
for ( var prop in obj)
console. log ( prop) ;
obj. getOwnPropertyNames ( ) ;
obj. keys ( ) ;
obj. prop = 123 ;
delete obj. prop
异常处理
try {
throw new Error ( "错误信息" ) ;
}
catch {
}
finally {
}
内置库
字符串
[]
内的参数表示可选。
str. indexOf ( 子字符串[ , 开始位置] ) ;
str. lastIndexOf ( 子字符串[ , 开始位置] ) ;
str. charAt ( 下标) ;
str. slice ( a[ , b] ) ;
str. substring ( a[ , b] ) ;
str. substr ( a[ , len] ) ;
str. split ( 分隔符)
str. toUpperCase ( ) ;
str. toLowerCase ( ) ;
数学
Math. PI ;
Math. ceil ( x) ;
Math. floor ( x) ;
Math. sqrt ( x) ;
Math. round ( x) ;
Math. abs ( x) ;
Math. pow ( x, a) ;
Math. max ( a, b, ... , n) ;
Math. min ( a, b, ... , n) ;
时间日期
new Date ( ) ;
new Date ( tt) ;
new Date ( timeString) ;
new Date ( year, month, day, hour, minute, second, millsecond) ;
var date = new Date ( ) ;
date. getFullYear ( ) ;
date. setFullYear ( year[ , month[ , day] ] ) ;
date. getMonth ( ) ;
date. setMonth ( month[ , day] ) ;
date. getDate ( ) ;
date. getDay ( ) ;
JSON
JSON 语法:
{
"值1" : "属性" ,
"值2" : "属性类型可以为:字符串、数字、布尔型、null、对象、数组" ,
"数组演示" : [ 1 , 2.3 , "string" , true , null ] ,
"对象演示" : {
"obj1" : { "key1" : "value1" } ,
"obj2" : { "key1" : "value1" }
}
}
Javascript 与 JSON:
var json = {
"key1" : "value1" ,
"key2" : "value2"
} ;
JSON . parse ( 字符串) ;
JSON . stringify ( JSON 对象) ;
正则
正则语法
表示
含义
[A-Z]
匹配一个从 A-Z 的字符
\w
匹配大小写字符或数字
\W
匹配非字母,非数字
\d
匹配数字
\D
匹配非数字
表示
含义
{x}
前面的字符出现 x 次
{a, }
前面的字符出现 a~∞ 次
{a, b}
前面的字符出现 a~b 次
?
前面的字符出现 0~1 次
*
前面的字符出现 0~∞ 次
+
前面的字符出现 1~∞ 次
表示
含义
^
匹配字符串开头
\b
匹配单词边界
\B
匹配非单词边界
表示
含义
例
(expr)
圆括号用于分组 ,表示一个子表达式。 每个分组都有一个编号,编号从 1 开始,从前往后开始编号。
(play(ed|ing))
其中 (ed|ing)
是第 2 个子表达式
expr1|expr2
将整个正则表达式一份为二,相当于”expr1 或 expr2“。 通常配合圆括号 ()
使用。
-
\x
表示引用第 x 个子表达式匹配到的内容。
-
Javascript 与 正则
var regex = new RegExp ( "表达式" ) ;
var regex = / 表达式 / ;
/ expr/ i;
/ expr/ g;
/ expr/ m;
regex. test ( str) ;
str. search ( regex) ;
str. split ( regex) ;
str. replace ( regex, str) ;
str. replace ( regex, "$1" ) ;
DOM
document 文档模型
获取 DOM 结点:
document. getElementById ( "idName" ) ;
document. getElementsByTagName ( "tagName" ) ;
document. getElementsByClassName ( "className" ) ;
document. querySelector ( "cssSelector" ) ;
document. querySelectorAll ( "cssSelector" ) ;
DOM 结点操作:
var node;
node. firstElementChild;
node. lastElementChild;
node. previousElementSibling;
node. children;
var node = document. createElement ( "form" ) ;
node. method = "post" ;
node. id = "myForm" ;
document. body. appendChild ( node) ;
document. body. insertBefore ( a, b) ;
node. removeChild ( child) ;
node. replaceChild ( oldChild, newChild) ;
DOM 结点属性操作:
node. innerText;
node. innerHTML;
node. getAttribute ( 属性名称) ;
node. getAttribute ( 属性名称, 值) ;
node. className;
window 浏览器模型
定时
var id = window. setTimeout ( func, millsecond) ;
window. clearTimeout ( id) ;
var id = window. setInterval ( func, millsecond) ;
window. clearInterval ( id) ;
location
对象
window. location. href;
window. location. host;
window. location. hostname;
window. location. pathname;
window. location. port;
window. location. protocal;
window. location. search;
window. location. href = "https://www.baidu.com" ;
对话框
window. alert ( msg) ;
window. comfirm ( msg) ;
var text = window. prompt ( msg[ , default ] ) ;
窗口操作
var win = window. open ( url, name, specs, replace) ;
win. close ( ) ;
你可能感兴趣的:(css,前端,html,javascript)