HTML标签+css+JS

html文件基本结构

<html>
    <head>...</head>
    <body>...</body>
</html>

使用<span>标签为文字设置单独样式

<span>标签是没有语义的,它的作用就是为了设置单独的样式用的。

创建表格的四个元素:

table、tbody、tr、th、td

1、<table>…</table>:整个表格以<table>标记开始、</table>标记结束。

2、<tbody>…</tbody>:如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构, tbody包含行的内容下载完优先显示,不必等待表格结束后在显示,同时如果表格很长,用tbody分段,可以一部分一部分地显示。(通俗理解table 可以按结构一块块的显示,不在等整个表格加载完后显示。)

3、<tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。

4、<td>…</td>:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。

5、<th>…</th>:表格的头部的一个单元格,表格表头。

6、表格中列的个数,取决于一行中数据单元格的个数。

form表单

<input type="radio/checkbox" value="值" name="名称" checked="checked"/>

1、type:

   当 type="radio" 时,控件为单选框

   当 type="checkbox" 时,控件为复选框

2、value:提交数据到服务器的值(后台程序PHP使用)

3、name:为控件命名,以备后台程序 ASP、PHP 使用

4、checked:当设置 checked="checked" 时,该选项被默认选中

<form>
  <label for="male"></label>
  <input type="radio" name="gender" id="male" />
  <br />
  <label for="female"></label>
  <input type="radio" name="gender" id="female" />
  <label for="email">输入你的邮箱地址</label>
  <input type="email" id="email" placeholder="Enter email">
</form>

CSS代码

从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式、嵌入式和外部式三种。

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,如下面代码:

<link href="base.css" rel="stylesheet" type="text/css" />

这三种样式是有优先级的,记住他们的优先级:内联式 > 嵌入式 > 外部式

标签选择器

p{font-size:12px;line-height:1.6em;}

类选择器

.类选器名称{css样式代码;}

ID选择器

#setGreen{
   color:green;
}

盒子模型

盒子模型的边框就是围绕着内容补白的线,这条线你可以设置它的粗细样式颜色(边框三个属性)。

盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的,css内定义的宽(width)和高(height),指的是填充以里的内容范围。

因此一个元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

js的数据类型:原始类型和对象类型

原始类型:数字、字符串、布尔值、null、undefined

1. 数字:
较为复杂的运算定义在Math对象中
预定义了全局变量NaN,Infinity(ES5只读,不可修改)
对于NaN的判断,应该用x!=x,仅当x等于NaN为真,其中NaN!=NaN
js的计算精度问题:.3-.2 != .2 - .1
日期中,Date().getMonth(),[0,1,2,3,4,5,6]对应[“日”,”一”,”二”,”三”,”四”,”五”,”六”]
2. 文本:
注意对特殊字符的转义,例如在字符串中含有can’t应注意写为can\’t
一些特殊的转义字符,\n,\t,\\等
字符串的几种方法:length、charAt、slice、indexOf、split、lastIndexOf、substring,toUpperCase,toLowerCase,replace
正则匹配,RegExp(重点)
3. 布尔值:
flase转换:undefined、null、0、-0、NaN、”“
\==与===的区别
4. null和undefined:
type of null => object
type of undefined => undefined
两者区分要用严格判等符 ===
5. 全局对象:
在读取字符串、数字、布尔值的属性值时表现得像对象,但是为其属性赋值则会忽略

变量声明:

1. var声明,全局变量、局部变量
2. 变量声明提前(不赋值)
var scope = "global";
function f(){
    console.log(scope); // => undefined
    var scope = "local";
    console.log(scope); // => local
}

表达式与运算符
表达式类型:
1.原始表达式:
包括直接出现的常值,类似:1.23 “hello” /patter/
js中的保留字构成的原始表达式: true、false、null、this
js中的变量
2. 对象及数组初始化表达式
[]、[1,2,3]、[1,,,4]数组初始化表达式
{}、{x:1, y:-1.2}对象初始化表达式
3. 函数表达式

var f = function(x){return x*x}

4. 属性访问表达式
通过”.”访问,局限是属性名不能是保留字符 => expression.identifier
使用”[]”访问,指定要访问的属性名或者索引 => expression[identifier]
5. 调用表达式
包含函数与参数,例如:f(0)、Math.max(1,2,3,4)
6. 对象创建表达式
利用关键字new,构造函数
7. 算术表达式
算术计算的顺序,例如:

var a = 1,b;
b = (a++)+a // => b=2
/*
    过程为,计算b,计算a++(设值为c),计算a,计算a+c,将值赋给b
*/

 

posted @ 2020-02-24 21:53  松鼠航  阅读(127)  评论(0编辑  收藏  举报