前端（基础）期末资料

<table border="1">
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>

内变框间隔

cellspacing=”0”

合并单元格

rowspan 合并竖直方向
colspan 合并水平方向

表单

select

下拉列表

intput

type

text只读后加readonly。

button	定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。
checkbox	定义复选框。
colorNew	定义拾色器。
dateNew	定义 date 控件（包括年、月、日，不包括时间）。
datetimeNew	定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。
datetime-localNew	定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。
emailNew	定义用于 e-mail 地址的字段。
file	定义文件选择字段和 "浏览..." 按钮，供文件上传。
hidden	定义隐藏输入字段。
image	定义图像作为提交按钮。
monthNew	定义 month 和 year 控件（不带时区）。
numberNew	定义用于输入数字的字段。
password	定义密码字段（字段中的字符会被遮蔽）。
radio	定义单选按钮。
rangeNew	定义用于精确值不重要的输入数字的控件（比如 slider 控件）。
reset	定义重置按钮（重置所有的表单值为默认值）。
searchNew	定义用于输入搜索字符串的文本字段。
submit	定义提交按钮。
telNew	定义用于输入电话号码的字段。
text	默认。定义一个单行的文本字段（默认宽度为 20 个字符）。
timeNew	定义用于输入时间的控件（不带时区）。
urlNew	定义用于输入 URL 的字段。
weekNew	定义 week 和 year 控件（不带时区）。

水平线

<hr>

折行

<br>

格式化标签

<b>加粗文本</b><br><br>

<i>斜体文本</i><br><br>

<code>电脑自动输出</code><br><br>

这是 <sub> 下标</sub> 和 <sup> 上标</sup>

<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字

<map> 标签

带有可点击区域的图像映射：

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">


<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

列表

<ol> 定义有序列表
<ul> 定义无序列表
<li> 定义列表项
<dl> 定义列表
<dt> 自定义列表项目
<dd> 定义自定列表项的描述

无序列表

<ul>
  <li>Coffee</li>
  <li>Milk</li>
</ul>

有序列表

<ol>
  <li>Coffee</li>
  <li>Milk</li>
</ol>

区块

<frameset cols="20%,80%" frameborder="0">
  <frame src="edu_12_5_1_left.html" name="left">
  <frame src="edu_12_5_1_left_2.html" name="right">
</frameset>

marquee属性0（滚动）

标签名称说明取值范围默认值

direction    表示内容滚动的方向 left，right，up，down   left
behavior     表示内容滚动的方式 scroll（连续滚动），slide（滚动一次）， alternate（来回滚动） scroll
loop     表示内容滚动的次数正整数无限循环
scrollamount        表示运动速度正整数 6
scrolldelay     表示停顿时间正整数 0
align 表示内容的垂直对齐方式 top，middle，bottom middle
bgcolor   表示运动区域的背景颜色 16进制的RGB颜色，或是颜色的英文白色
height 表示运动区域的高度正整数（单位是像素或者百分数）   标签内容的高度
width 表示运动区域的宽度正整数（单位是像素或者百分数）   width=100%
hspace 表示内容到区域边界的水平距离正整数（单位是像素） ——
vspace 表示内容到区域边界的垂直距离正整数（单位是像素） ——-

div

多个div在同一行显示

上一级的div的css中display:flex.

子级的div的css中flex:1(序号)

border-width：规定边框的宽度。

border-style：规定边框的样式。

border-color：规定边框的颜色。

JavaScript

document.getElementById("demo").innerHTML="你好 Dolly";

function 声明一个函数。

οnclick=”” 单击后事件

js

外部 <script src="myScript.js"></script>
内部 <script> alert("我的第一个 JavaScript"); </script>

将数字转换为字符串

String(x)

typeof 操作符

你可以使用 typeof 操作符来查看 JavaScript 变量的数据类型。

typeof "John"                 // 返回 string
typeof 3.14                   // 返回 number
typeof NaN                    // 返回 number
typeof false                  // 返回 boolean
typeof [1,2,3,4]              // 返回 object
typeof {name:'John', age:34} // 返回 object
typeof new Date()             // 返回 object
typeof function () {}         // 返回 function
typeof myCar                  // 返回 undefined (如果 myCar 没有声明)
typeof null                   // 返回 object

请注意：

NaN 的数据类型是 number

数组(Array)的数据类型是 object

日期(Date)的数据类型为 object

null 的数据类型是 object

未定义变量的数据类型为 undefined

产生随机数

math.random()是随机生产0-1的小数。
Math.floor(Math.random() * (max - min + 1) ) + min;

Array（数组）对象

var mycars = new Array();

var x=myCars.length             // myCars 中元素的数量
var y=myCars.indexOf("Volvo")   // "Volvo" 值的索引值

Math 对象属性

属性描述

E 返回算术常量 e，即自然对数的底数（约等于2.718）。

LN2 返回 2 的自然对数（约等于0.693）。

LN10 返回 10 的自然对数（约等于2.302）。

LOG2E 返回以 2 为底的 e 的对数（约等于 1.4426950408889634）。

LOG10E 返回以 10 为底的 e 的对数（约等于0.434）。

PI 返回圆周率（约等于3.14159）。

SQRT1_2 返回 2 的平方根的倒数（约等于 0.707）。

SQRT2 返回 2 的平方根（约等于 1.414）。

Math 对象方法

abs(x)   返回 x 的绝对值。
acos(x) 返回 x 的反余弦值。
asin(x) 返回 x 的反正弦值。
atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)   返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x) 对数进行上舍入。
cos(x)   返回数的余弦。
exp(x)   返回 Ex 的指数。
floor(x) 对 x 进行下舍入。
log(x)   返回数的自然对数（底为e）。
max(x,y,z,...,n) 返回 x,y,z,...,n 中的最高值。
min(x,y,z,...,n) 返回 x,y,z,...,n中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 四舍五入。
sin(x)   返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x)   返回角的正切。

Date 对象

创建 Date 对象： new Date()

css

链接样式

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

外部样式表

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

内部样式表

<style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style>

内联样式

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

背景

background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。

文本格式

属性描述

color 设置文本颜色
direction 设置文本方向。
letter-spacing   设置字符间距
line-height 设置行高
text-align   对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform   控制元素中的字母
unicode-bidi 设置或返回文本是否被重写
vertical-align   设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距

字体

font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。

列表

list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图像设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。

盒子模型

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。