XSS(Cross-Site Scripting,XSS)类型

反射型：又叫非持久型，攻击者通过右键等方式将XSS代码发给目标，当目标访问连接的时候，服务器接收并处理，浏览器解析这段带有XSS代码，例如http://www.test.com/haha.php?name="><script>alert("xixi")</script>

存储型：攻击脚本通过留言板等地方一起被存储在服务器里，当其他用户浏览了这个被注入恶意脚本的帖子的时候，恶意代码就会被执行

DOM型XSS：一种基于DOM文档对象模型的漏洞，本质上是一种特殊类型的反射型XSS，浏览器为页面创建一个顶级的document object文档对象，接着在生成各个子文档对象，通过JS脚本对文档对象进行编辑来改变页面的元素，攻击者构造一个含有XSS代码的URL，当浏览器处理这个响应的时候，DOM对象就会处理XSS代码

XSS基础

2021依旧有效的XSS payload

PHP中使用$_REQUEST，所有用户输入的变量数组，包括$_GET$_POST$_COOKIE，4.3版本后不包括$_FILES

例如<?PHP echo $_REQUEST[name];?>这个代码代表从前面的表单当中获取属性为"name"的提交值

攻击脚本的本质

基于<>的攻击:
我们可以任意的使用<>等引入标记，以此来操纵一个HTML标签，然后通过<script>标签来插入js或vs编写的恶意脚本代码,如<script>alert('xixi')</script>

基于HTML标签属性：
如果不能构造HTML标记，我们仍然可以通过javascript:code伪协议这一种方式来运行我们的js代码，如<img src="javascript:alert(/xixi/);">,要注意的是不是所有的浏览器都能够支持伪协议。如果可行的话，我们可以使用href\lowser\bgsound\background\value\action\dynsrc这些属性来测试XSS

空格：
js语句常以分号结尾，如果js引擎认为一个语句是完整的且这一行的结尾有换行符，那么可以省略分号，如果一行中有多个语句，则每个语句必须以分号来结束，除了这两种方式以外，额外的空白字符都不会影响代码的执行，我们可以使用这种方式来拆分关键字以绕过waf，例如<img src="javas cript:alert('haha');" width=100>这个句子虽然当中有两个空格，但是依旧可以被执行

eval:js中的eval()可以计算字符串并执行内部的js代码，如<script>eval("alert('xxx')");<script>

ASCII：
HTML属性值本身支持ASCII码格式，我们可以参照ASCII码表，把字符转化为对应的码以绕过，如t变成t,同理，我们还可以利用ASCII码来插入空白自如，如 TAB, 换行符， 回车符可以被插入代码中的任何地方，此外，
\&#02等字符可以插到js或者vs的头部，如<img src="&#01;javascri&#09pt:alert(xixi)">

示例如下

ASCII表

基于事件的攻击
上面的几种方式都是想办法直接来执行我们的js代码，此外，我们可以靠事件来触发我们的代码，例如<input type="button" value="点这" onclick="alert('xixi')"/>当我们点击这个按钮的时候，就会触发我们的脚本

可使用的事件列表
onResume
onReverse
onRowInserted
onSeek
onSynchRestored
onTimeError
onTarckChange
onURLFlip
onRepeat
onMediaComplete
onMediaError
onPause
onProgress
onOutOFSync
oncontrolselect
onlayoutcomplete
onafterprint
onbeforeprint
ondatavailable
ondatasetchanged
ondatasetcomplete
onerrorupdate
onrowenter
onrrowexit
onrowsdelete
onrowsinserted
onbounce
onfinish
onstop
onresizeend

利用CSS跨站

CSS样式表在不同浏览器甚至是不同版本之间可能不通用。脚本通常嵌入到style标签或者属性里面,利用expression来执行js代码，如<img style="xss:expression(alert(/xss/));">,又或者使用样式表里面的url属性来执行xss<img style="background-image:url(javascript:alert('xss'))">

另外，我们可以把CSS脚本写在文件里面，用<link>标签来引用，如下例

另外还可以使用@import来引入文件，同时，@import能够直接执行javascript代码，如

<style>
@import 'javascript:alert("XSS");
</style>

混淆
混写大小写依旧可以执行代码，同时，属性可以使用双引号也可以使用单引号也可以都不使用，一样能被执行，如<ImG sRc=jaVascRipt:alert(1);>

如果空格被过滤，可以考虑使用/来代替空格<img/scr='javascript:alert(1);'>

可以使用全角字符来绕过

/**/注释符会被浏览器忽略，所以可以使用这个来注释字符，或者插入混淆字符绕过过滤，如<div style="wid/****/th:expre/*heihei*/ssion(alert('xss'));">

面对黑名单式过滤，可以考虑使用注释字符来干扰

或者，样式标签中的\和结束符\0也会被无视，如@\0im\port'\0ja\vascr\000000ipt:alert("xixi")';或者也可以把关键字进行转码

利用HTML注释存在的问题执行js

<!--<img scr="--><img scr=x onerror=alert(1)//">
<comment><img scr="</comment><img src=x onerror=alert(1)//">

将HTML标签中的某些属性值转码成ASCII码，可以转成十进制(&#,后面的;可加可不加)或者十六进制(&#x),另外，上面提到的eval()函数，也可以把他内部的js代码转码成为十六进制码(格式为\n)，或者配合使用String.fromCharCode()函数使用十进制码<img src="javascript:eval(String.fromCharCode(97,108,101......))">，另外，样式表也可以使用\连接的十六进制码，js则支持unicode,escapes,十六进制，八进制等等，另外对IE有script encode

拆分法：在未进行过滤但是有字符限制的地方，可以考虑拆分法

防御

XSS Filter:跨站脚本过滤器

XSS Filter一般基于黑白名单的安全过滤策略，如下图一般

preg_replace是一个支持正则的替换函数，用法为ixed preg_replace ( mixed $pattern , mixed $replacement , mixed $subject [, int $limit = -1 [, int &$count ]] )搜索subject中匹配pattern的部分，再用replacement来替代

过滤除了关键字，还得过滤掉&#\等特殊字符

css中的expression\javascript\import等关键字

要通过PHP连接到MySQL，需要为PHP脚本创建一个用户，以最少权限为原则，一般只需要给增删改查这几个权限

GRANT和REVOKE这两个可以授予或者取消MySQL用户的权限，权限分为四个等级：全局、数据库、表、列

GRANT命令格式

GRANT privileges [columns]权限列表
ON item权限所引用的库或者表
TO user_name [IDENTIFIED BY 'password']用户名可以被解释成[email protected]，可以用此来区分用户从什么地方连接到
[REQUIRE ssl_options]
[WITH [GRANT OPTION | limit_options]]

用户权限类型：SELECT\INSERT\UPDATE\DELETE\INDEX\ALTER\CREATE\DROP

管理员权限：CREATE TEMPORARY TABLES\FILE\LOCK TABLES\PROCESS\RELOAD\REPLCATION CLIENT\REPLICATION SLAVE\SHOW DATABASES\SHUTDOWN\SUPER

特别权限:ALL(全部)\USAGE(只能登陆)

REVOKE命令

REVOKE privileges [(columns)]
ON item
FROM user_name

工作原理：

1. 用户的浏览器发出一个HTTP请求，请求一个特定的Web页面，该搜索结果页面为a.php
2. Web服务器接收到对a.php的请求之后，检索文件并传递给PHP引擎
3. PHP引擎解析脚本，启动对MySQL服务器的连接并对服务器发送查询
4. MySQL服务器接收到数据库查询的请求并查询，然后将查询结果返回给PHP引擎
5. PHP引擎完成脚本运行后，将HTML返回给Web服务器
6. Web服务器将HTML返回给客户端浏览器

以下是一个例子

从Web到数据库的步骤

1. 检查并过滤
2. 建立连接
3. 查询数据库
4. 获取查询结果
5. 显示结果

以上面那个例子进行解释

检查并过滤

$searchterm = trim($_POST['searchterm']);,trim()函数会过滤两端空白字符

magic_quotes_gpc魔术引号开关，启用后将对post\get\sql进行转义处理，数据中心的单引号、双引号、反斜线与NULL等字符会被转义，这个配置在php.ini中可以进行设置

get_magic_quotes_gpc()该函数的用处是检查magic_quotes_gpc是否开启，7.4版本后被废弃

$searchtype = addslashes($searchtype)，addslashes()函数将对上面几种字符进行转义，如果magic_quotes_gpc已经被打开无需再使用，如果使用会造成双重转义，但是请注意，如果参数没有被单引号包裹，那么这个函数将不起作用

stripslashes()，删除反斜杠

连接数据库

PHP在5.0版本的时候引进了mysqli,i表示改进，我们可以通过mysqli函数拓展来完成对数据库的操作

查看完整mysqli函数列表

$db = new mysqli('servername','username','password','database');最后的数据库名可以不加

查询数据库

使用$db->select_db(dbname)或者mysqli_select_db(db_resouce,db_name)来选择数据库

查询数据库：$restult = $db->query($query)或者$result = mysqli_query($db,$query);

统计行数：mysqli_num_rows($result);:可以知道结果的行数有多少，方便后面通过循环来取出里面的内容

与数据库断开连接

$result->free();
or
mysqli_free_result($result);
$db->close();
or
mysqli_close($db);

总览数据库操作

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
 
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检测连接
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
} 
 
// 使用 sql 创建数据表
$sql = "CREATE TABLE MyGuests (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY, 
firstname VARCHAR(30) NOT NULL,
lastname VARCHAR(30) NOT NULL,
email VARCHAR(50),
reg_date TIMESTAMP
)";
 
if ($conn->query($sql) === TRUE) {
    echo "Table MyGuests created successfully";
} else {
    echo "创建数据表错误: " . $conn->error;
}
 
 $sql = "INSERT INTO MyGuests (firstname, lastname, email)
VALUES ('John', 'Doe', '[email protected]')";
 
if ($conn->query($sql) === TRUE) {
    echo "新记录插入成功";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}

$sql = "INSERT INTO MyGuests (firstname, lastname, email)
VALUES ('John', 'Doe', '[email protected]');";
$sql .= "INSERT INTO MyGuests (firstname, lastname, email)
VALUES ('Mary', 'Moe', '[email protected]');";
$sql .= "INSERT INTO MyGuests (firstname, lastname, email)
VALUES ('Julie', 'Dooley', '[email protected]')";
 
if ($conn->multi_query($sql) === TRUE) {
    echo "新记录插入成功";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}


$sql = "SELECT id, firstname, lastname FROM MyGuests";
$result = $conn->query($sql);
 
if ($result->num_rows > 0) {
    // 输出数据
    while($row = $result->fetch_assoc()) {
        echo "id: " . $row["id"]. " - Name: " . $row["firstname"]. " " . $row["lastname"]. "<br>";
    }
} else {
    echo "0 结果";
}//查询

$result = mysqli_query($con,"SELECT * FROM Persons
WHERE FirstName='Peter'");

while($row = mysqli_fetch_array($result))
{
    echo $row['FirstName'] . " " . $row['LastName'];
    echo "<br>";
}
$conn->close();
?>

PHP基础

PHP的四种代码风格

XML风格:使用最广泛的风格<?php echo'<p>Hello world</p>';?>

简短风格：遵循SGML处理说明的风格，在大多数环境的默认配置中不支持<? echo '<p>Hello world</p>'; ?>

SCRIPT风格：<script language='php'>echo '<p>Hello world</p>';</script>

ASP风格<% echo '<p>Hello world</p>';%>默认禁用

PHP解释器会运行脚本并用脚本的输出替换脚本本身，也就是说，即使源码含有PHP代码，但是我们在浏览器中可能并不会看见

空格：任何间隔字符都会被当做是空格，比如说换行、空格、制表符

注释：PHP支持C\C++\Shell脚本风格的注释，如/**/，//，#

变量：PHP脚本的变量一大特点便是都以$符号开始，通过变量我们有3中方式来访问表单数据

方法一：$data：默认关闭

方法二：$_POST['data']、$_GET['data']、$_REQUEST['data']不管是通过post还是get方式提交的表单都可以通过request来获得

方法三：HTTP_POST_VARS['data']：已过时

字符串的连接：可以将变量与字符串连接在一起输出，方式是多样的

方法一：echo $data.'haha<br/>';

方法二：echo "$data haha<br/>";请注意这里的双引号，双引号当中的命令会被执行，但是如果换成单引号则会被当做一个纯文本来输出

文本：除了上面单双引号表示法以外，还有一种指定字符串的方法

heredoc语法：

echo <<<theEnd
line 1
line 2
line 3
theEnd

theEnd标记不会出现在文本中

标识符：变量的名字是严格区分大小写的，但是函数却可以大小写混写

变量与常量：PHP支持integer\float\string\boolean\array\object\null\resource这几种数据类型，其中source通常被函数返回，在创建变量的时候无需声明具体的变量类型，后面想要改变变量种类的时候也可以使用强制类型转换

$data = 0;整数类型
$data2 = (float)data;浮点类型

除了这些以外，我们还可以设定常量define('data3',100);，一但被设定，后面不得修改

常见变量：

$GLOBALS,所有的全局变量数组
$_SERVER，服务器环境变量数组
$_GET，通过GET方法传递给该脚本的变量数组
$_POST，通过POST方法传递给改脚本的变量数组
$_COOKIE,cookie变量数组
$_FILES,与文件上传有关的变量数组
$_ENV,环境变量数组
$_REQUEST，所有用户输入的变量数组，包括上面的$_GET\$_POST\$_COOKIE，4.3版本后不包括$_FILES
$_SEESSION，会话变量数组

可替换的控制结构语法：PHP的if\switch\while\for等等语法与其他语法大同小异，但是PHP可以对部分语法进行替换，它使用冒号替换花括号，使用新关键字来结束代码块，但是do-while没有可替换

例如

if($data==1)
{
    echo "haha!<br/>";
    exit
}

可被换成
if($data==1):
echo "haha!<br/>";
exit;
endif;

另有一种控制结构叫做declare结构

declare(directive)
{

}

数据存储与检索

打开文件：PHP使用fopen()函数来打开文件，同时需要选择文件模式来确定对文件进行什么$data4 = fopen("$DOCUMENT_ROOT/../haha.txt",'w');,此处我们使用了内置变量$_SERVER['DOCUMENT_ROOT']来袋子web服务器文档树的根，并使用..来返回上一级目录， $DOCUMENT_ROOT=$_SERVER['DOCUMENT_ROOT'];

我们一共有三种方式可以获取到文档的根目录

$_SERVER['DOCUMENT_ROOT']首选风格
$DOCUMENT_ROOT
$HTTP_SERVER_VARS['DOCUMENT_ROOT]

文件模式：

r只读
r*只读
w只写
w+只写
x谨慎写，如果文件已经存在，则该文件不会被打开
x+谨慎写
a追加
a+追加
b二进制
t文本

除了使用路径，我们也可以使用FTP或者HTTP的方式来打开文件，其文件名开头如ftp://或者http://www.xxxx.com/，要注意http的目录地址必须以斜线为结束，url中域名可能不会区分大小写，但是路径名和文件名会

写文件：我们可以使用fwrite()或fpute()函数来进行对文件的写入，方式为fwrite($fp,$outputstring,length)，将后面的内容写到前面那个所指向的文件中，第三个参数是控制最大字符数，可以不写

关闭文件：fclosc($fp)

判断是否读完文件：feof($fp)，这个函数的唯一参数是文件指针，如果这个指针指向了文件末尾，那他会返回true

读取一行数据：我们可以使用几个不同的函数来读取一行的数据

$order = fgets($fp,n);这个函数将从文件里面不停的读数据，直到读到换行符或者文件结束符EOF或者从中读取了n-1个字符

另外也可以使用fgetss(),fgetcsv()

读取整个文件：

方法一：readfile("$DOCUMENT_ROOT/../orders/xx.txt"),这个可以直接把文件打开并把文件内容输出到浏览器中再关闭这个文件

方法二：fpassthre($fp)，想要使用这个函数，必须现在之前用fopen()吧文件打开

方法三：$filearray = file($DOCUMENT_ROOT/../xx.txt)file()函数会把结果发送到一个数组里面

读取一个字符：fgetc($fp)

读取任意长度：fread($fp,n)，从文件中读出任意长度

查看文件是否存在：file_exists("$DOCUMENT_ROOT/../xx.txt")

查看文件大小：filesize("$D...")

删除一个文件：unlink($D...)

文件锁定：flock($fp,操作值)

操作值：LOCK_SH\LOCK_EX\LOCK_UN\LOCK_NB,分别为：读操作锁定，可以共享、写操作锁定，不能共享、释放已有的锁定、防止在请求加锁时发生阻塞

数组
创建数组的方式可以有以下几种：

$data=arrar('j','sd','afwda');
$numbers = range(1,10);
$price=array('Tires'=>100,'oil'=>10);以关键字来创建关联数组，后面可以以$price['Tires']这种方式才访问数组内容
或者也可以这样
$price=array('Tires'=>100);
$price['Oil']=>10;

$a=array(array('1','2','3'),
         array('a','b','c'));

关联数组的循环：关联数组的索引不是数字，无法使用for语句进行循环，但是可以用foreach循环或者list()和each()

foreach($price as $key => $value){}

while($element = each($price)){}

while(list($name,$price) = each($price)){echo $name - $price<br/>";}将后面的变量赋值给list中的变量

数组排序：sort($array),asort()关联数组按照元素值排序，ksort()关联数组按照关键字排序

格式化字符串：addslashes()或stripslashes(),这种函数会自动把一些特殊字符如双引号进行转义以免在数据库中引起歧义

函数

require()和include()函数：这两个函数都可以把一个文件加载到PHP脚本当中

a.php
<?php echo 'haha'; ?>

main.php
<?php
echo 'you?';
require('a.php');
echo 'emmm';
>
当浏览器载入main.php，你会发现require那行会被a.php替代掉

通常来讲，PHP语句如果被放在html文件里面，被加载的时候里面的语句是不会被执行的，但是，如果是require的话，他不管文件的扩展名是什么，他都会执行里面的命令

phpinfo()：这个函数将返回PHP信息、Web服务器的配置等等信息

自设函数

function f_name(参数)
{

    xxx;
}

类

class classname
{
    public $data1;
    function op1()
    {

    }
    function _construct($param)构造函数
    {}
    function _destruct()析构函数
    {}
}


$a = new classname("wow");实例化

class classname2 extends class{}类的继承

其他与其他语言大差不差

异常处理

<?php
try{
    throw new Exception("Something going wrong",42);
}
catch(Exception $e)
{
    echo "Exception".$e->getCode().":".$e->getMessage()."<br/>"."in".$e->getFile()."on line".$e->getLine()."<br/>";
}
?>

代码在try代码块被调用执行，如果try代码块出现某些错误，可以执行一个throw跑出异常，try代码块之后，必须至少给出一个catch代码块，可以将多个catch代码块与try进行连接，上面是一个捕获Exception类的异常的写法，传递给catch代码块的对象就是导致错误并传递给throw的对象，该异常可以是任何类型

虽然以前写过，这次学的时候顺带复习一下

HTML超文本标记语言

html中，大多数元素具有起始和结束标签，在两个标签之间包含的是元素主体，起始标签包含元素的名称和可选属性，元素的属性包含属性和属性值两部分，中间通过等号连接，多个属性之间通过空格进行分割；标签可以互相嵌套，但是必须一对一对匹配

HTML文档扩展名为.htm或.html

注释对

<!--
...........多行注释
-->

常用标签

文档结构标签

<html></html>文档的起始与终止
<head></head>标识头部
<body></body>主体区域

文本格式标签

<title></title>标识网页标题
<hi></hi>标识标题文本，i用数字表示相应的等级
<p></p>标识段落文本
<pre></pre>标识预定义文本
<blockquote></blockquote>标识引用文本

字符格式标签

<b></b>加粗
<i></i>斜体
<big></big>放大
<small></small>缩小
<sup></sup>上标
<sub></sub>下标
<cite></cite>引用
<blink></blink>闪烁,已淘汰

列表

<ul></ul>无序列表
<ol></ol>有序列表
<li></li>列表项目

<dl></dl>定义列表
<dt></dt>词条
<dd></dd>解释

• 1
• 2
• 3

1. 1
2. 2

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

<ol>
<li>1</li>
<li>2</li>
</ol>

夏塞波步枪

崔斯波特枪使用的11mm纸壳弹，火帽装在弹药的底部。左边为.22长弹，右边是Gras M1874步枪使用的11mm金属壳弹。崔斯波特使用与现代步枪类似的闩式枪机，单发装填。它的主要特色就是在枪机上装了一个橡胶密封圈，能有效地防止后膛漏气，加上更小的口径和更多的发射药，崔斯波特枪的有效射程是德莱塞针枪的两倍，表尺最大可以调到1200米。仰角27.02度时可达到最大射程2750米。

<dl>
<dt>夏塞波步枪</dt>
<dd>崔斯波特枪使用的11mm纸壳弹，火帽装在弹药的底部。崔斯波特使用与现代步枪类似的闩式枪机，单发装填。它的主要特色就是在枪机上装了一个橡胶密封圈，能有效地防止后膛漏气，加上更小的口径和更多的发射药，崔斯波特枪的有效射程是德莱塞针枪的两倍，表尺最大可以调到1200米。仰角27.02度时可达到最大射程2750米。</dd>

</dl>

链接

<a></a>超链接

多媒体

<img></img>嵌入图像
<embed></embed>嵌入多媒体
<object></object>嵌入多媒体，两者浏览器支持不一样

表格

<table></table>表结构
<caption></caption>表格标题
<th></th>表头
<tr></tr>表格行
<td></td>表格单元格

<table border=1>
<caption>小组成员出生年份情况</caption>
<tr>
<th>姓名</th><th>年份</th>
</tr>
<tr>
<td>张三</td><td>1999</td>
</tr>
</table>

表单

<form></form>表单结构
<input/>定义文本域、按钮和复选框
<textarea></textarea>多行文本框
<select></select>下拉列表
<option></option>下拉列表中的选择项目

form name="test" method="post" action="">

<p>姓名<input type='text' method='name' id="textfield"></p>
<p>留言<textarea name="textareafield"  id="textareafield"></textarea></p>

<p><input name="radio" type="radio" value="">按一下</p>

<p>今天的菜单
<select>
<option value="1">麻辣兔头</option>
<option value="2">红烧羊肉</option>
<option value="3">砂锅狗肉</option>
<option value="4">清蒸桂鱼</option>
</select>
</p>
</form>

以下为input的属性
value 属性为 input 元素设定值。

对于不同的输入类型，value 属性的用法也不同：

type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 定义与输入相关联的值
注释：<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。

注释：value 属性无法与 <input type="file"> 一同使用


name属性定义的是元素名称
size:定义文本框的宽度
maxlength：最大接受字符数

type规定元素类型：
button
checkbox：复选
file
hidden：隐藏
image
password：密码域
radio:单选
reset
submit
text

以下是form元素的属性
enctype:将设置表单中用户输入的数据发送到服务器时，浏览器使用的编码类型
action:用来设置表单提交数据的目标文件
method:get或post

字符实体

XHTML和XML可扩展标记语言

xhtml文档第一行新增<!DOCTYPE>元素，该元素用于定义文档类型，并且其名称和属性必须大写

XHTML是由XML语法简化而来，又大量继承HTML语言语法规范，但是对代码要求严格：

1. 在文档开头必须定义文档类型
2. 在根元素中应声明命名空间，即设置xmlns属性
3. 所有标签必须闭合
4. 所有元素和属性必须小写
5. 所有属性必须用""括起来
6. 所有标签必须合理嵌套
7. 所有属性必须被赋值，没有值的属性用自身作为值来赋值
8. 所有特殊符号用编码表示，如<必须被编码为`<,
9. --只能出现在注释的开头，不能出现在注释的内容中
10. 废除name,使用id作为统一的名称

XHTML支持三种DTD声明：过度型，严格型，框架型

属性

核心属性：大部分元素都拥有

class:定义类的规则或样式规则
id:定义元素的唯一标识
style:定义元素的样式声明

语言属性：用来定义元素的语言类型

lang:定义元素的语言代码或编码
dir:定义文本方向，包括ltr,rtl，及从左向右和从右向左

键盘属性：定义元素的键盘访问方法

accesskey:定义访问某元素的键盘快捷键
tabindex:定义元素的tab键索引编号

内容属性

alt:定义元素的替换文本
title:定义元素的提示文本
longdesc:定义元素包含的打断描述信息
cite:元素包含内容的引用信息
datatime:元素包含内容的日期和时间

网页的正文应该用p元素进行组织，但也可以用div来分割文本块

CSS

CSS规则主要由两部分组成：选择器和声明

例h1 {color:blue;font-sezi:12px;}

css声明以大括号包围，并且语句以;做结尾

注释：/**/

id和Class

html用id属性来设置id选择器，CSS中id选择器以#来定义,id的设置不能以数字为开头

<head>
<style>
#a1{
text-align:center;
color:red;
}
<style>
</head>
<h1 id="a1">你好</h1>

html用class来描述一组元素的样式，CSS使用class选择器来定义，以“.”为开头，

.center
{
    xxx;
    xxx;
}
<p class="center">一二三</p>

也可指定具体属性

p.center
{
    xxx;
    xxx;
}
<p class="center">一二三</p>/*此行受影响*/
<h1 class="center">三四五</h1>

样式表

外部样式表，可以用<link>

<head>
<link rel="stylesheet" type="text/css" href="www.xx.com">
</head>

rel是用于指定连接关系的属性

内联样式
``

段落

javascript必须通过HTML/XHTML文档才能执行，有两种方式可以做到

1. 将Javascript代码放到文档<head>标签中的<script>标签之间
2. 将代码存在.js的独立文件中，并在原文档放一个<script>标签，并把它的src属性指向该文件，如

注释方式：//或者/**/或者<!--,但是注意第三个不同于HTML，JS没有结尾那一半，如果想要用这个，则需要在每一行都使用这个头

变量的声明：var a=123,b;，不必说明数据类型，js可以任意改变变量的数据类型，在包住变量的时候可以使用双引号，也可以使用单引号

数组var a=Array(4);，当不知道数组应该有多少个元素的时候，数字可以不填或者可以var b = Array("c","d");，或者你也可以使用关联数组var abc = Array();abd["year"]="john"

对象

var exa= Object();
exa.name="alias";
exa.year="1999";

或者可以这样创建var exa = {name="alias",year="1999"};

系统当中还包含了许多内建对象，同时浏览器也提供了宿主对象

条件语句

if语句:

if(condition){
    statement;
}
else
{

}

循环语句

while语句

while(confition)
{

}

do...while:最少执行一次

do
{

}while();

for循环

for(初始条件;测试条件;变化条件)
{

}

函数

function exa()
{

}

DOM

D:文档；O:对象；M:模型

DOM把一份文档表示为一棵家谱树，如上图所示，<html>标签既无父亲，业务兄弟，是一个树根，也就是根元素，其下包含着一些元素节点如<body>等，又包含着一些文本节点，同时，还存在属性节点对元素做出更具体的描述，比如或title="xx"

获取元素

DOM一共有三种方法可以获取元素节点

getElementById(id)

返回一个与那个有着给定id属性值的元素节点对应的对象，这是document对象特有的函数，用法如document.getElementById("haha")

getElementsByTagName

返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素，例如document.getElementsByTagName("li")，该方法可以使用一个通配符来作为参数，如计算文档内所有元素节点alter(document.getElementsByTagName("*").length)

getElementsByClassName

可以通过class属性中的类名来访问元素，如document.getElementsClassName("xx")

获取和设置属性

getAttribute：只能通过元素节点对象调用，获取每个元素的属性

var par = document.getElementsByTagName("p");
for( var i = 0;i<par.length;i++)
{
    alter(par[i].getAttribute("title"));
}

setAttribute:可以对属性节点的值做出修改，同样只能用于元素节点

var shopping = document.getElementById("xx");
shoupping.setAttribute("title","s list of goods")

事件处理函数：在特定事件发生时调用特定的js代码，如onmouseover\onmouseout\onclick

childNodes属性
在一刻节点树上，childNodes属性可以获取任何一个元素的所有子元素，他是一个包含这个元素全部子元素的数组element.childNodes

假如想获取body的全体子元素：

var body_element = document.getElementByTagName("body")[0];//一份文档只有一个body元素
body_element.childNodes;
body_element.childNodes.length;查看包含的子元素个数

nodeType属性：返回节点的nodeType属性node.nodeType

元素节点的nodeType值为1；
属性节点为2；
文本节点为3

nodevalue：获取一个节点的值，但是需要注意，当我们想获取文本节点的值，不能使用node.nodevalue,

元素本身的nodevalue属性是一个空值，我们应该使用node.childNodes[0].nodevalue，也即

包含的第一个子节点，文本节点的属性值

firstChild\lastChild:第一个子元素额最后一个子元素

示例：图片

弹窗式
<h1>三叶葵</h1>
<ul>
    <li>
    <a href="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2238087188,3406942186&fm=26&gp=0.jpg">将军葵</a>
    </li>
    <li>
    <a href="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=131479460,3043707019&fm=26&gp=0.jpg">水户葵</a>
    </li>

</ul>

三叶葵

• 将军葵
• 水户葵

通过增加占位符图片，在主页上位图片预留一个浏览区域，在点击链接的时候，把占位符图片替换为与那个连接对应的图片，并阻止弹窗这一默认行为
show.js的内容：
<img id="replace" src=""/>

function showpic(pic) //用于替换连接
{
var source = pic.getAttribute("href"); //用于获取href属性
var place = document.getElementById("replace");代替一整个对象，使写法简洁
place.setAttribute("src".source)
}

index.php里的内容
<script type="text/javascript" src="script/show.js"></script>

<body>
<h1>三叶葵</h1>
<ul>
    <li>
    <a href="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2238087188,3406942186&fm=26&gp=0.jpg" onclick="showpic(this);return false;">将军葵</a>  //onclick事件处理函数调用替换函数，并且返回一个f值给对象，让这个函数以为连接没有被点击，所以不会出现弹窗
    </li>
    <li>
    <a href="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=131479460,3043707019&fm=26&gp=0.jpg",onclick="showpic(this);return false">水户葵</a>
    </li>

</ul>
</body>

在点击的同时修改图片的描述需要添加的函数行
var text = pic.getAttribute("title"); //当被点击时，提取图片的title属性
var description = document.getElementById("description"); //得到id是"description"的<p>元素，并把他保存到变量description里
description.firstChild.nodeValue = text; // j将上面那个节点的第一个紫点点的nodeValue属性值设置为变量text的值

平稳退化

创建新窗口：js使用浏览器对象里的window对象的open方法来创建新的浏览器窗口window.open(url,name,features)，三个参数分别是目标url，新窗口名字，新窗口的属性

javascript:伪协议

伪协议是一种非标准化的协议，javascript:伪协议让我们通过一个链接来调用js函数

function.pop(winURL)
{
    window.open(winURL,"pop","width=320,height=480");
}
<a href="javascript:pop('www.shangxizhuan.site')">;haha</a>

<a href="#",onclick="pop('www.shangxizhuan');return false;">hahaha</a>

对象检测：检测浏览器是否支持某js的方法的时候，可以把这个方法打包在一个if语句里面

if(doucument.getElementById){}方法的括号必须被删除