要通过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){}方法的括号必须被删除

书签

杂项

基础

属性

元素/标签

链接

<head头>

HTML-CSS

图像

表格

表单

框架

脚本

字符实体

杂项

对中文网页需要使用<meta charset="utf-8">声明编码，否则会出现乱码

标签要使用小写

基础

<!DOCTYPE html>  //声明为HTML5文档
<html>        //元素是HTML页面的根元素

<head>      //包含文档的元数据
<meta charset="utf-8">
<title>你好世界</title> //描述文档的标题
</head>

<body>      //包含可见的页面内容

<h1>这是标题</h1>   //大标题
<p>这是段落</p>     //段落

</body>
</html>

HTML常是成对出现，第一个为开始标签，第二个为结束标签

标题

<h1>标题1</h1>
<h2>标题2</h2>

段落

<p>段落</p>
<p>这还是一个段落</p>

链接<a>

<a href="https://www.shangxizhuan.site">

图像<img>

<img loading="lazy" src="/images/logo.png"width="100"height="100"/>
loading="lazy"延迟加载属性
loading="eager"立即加载，为默认属性

空元素

没有内容的元素被称为空元素，空元素在开始标签中关闭

换行<br/>

如果希望在不产生新段落的情况下换行，可以使用<br>标签

<p>这个<br>段落<br>演示了分行的效果</p>

属性

1. 属性可以在元素中添加附加信息
2. 一般描述于开始标签
3. 以名称/值对的形式出现
4. 如果属性值本身含有双引号，则需要使用单引号

常用属性

1. class 为html元素定义一个或多个类名
2. id 定义元素唯一的id
3. style 规定元素的行内样式
4. title 描述元素的额外信息
5. cite描述引用源
6. href规定外部资源的位置,建立当前元素和文档间的链接，浏览器会识别href引用的文档并行下载该文档，并且不会停止对当前文档的处理
7. src所指向的内容会被潜入到文档当前所在的位置，当浏览器额解析到src引用时，会暂停浏览器的渲染，知道该资源加载完毕
8. rel属性规定当前文档与被连接文档之间的关系，具体见其属性值

元素/标签

区块和内联

区块：块级元素在浏览器显示的时候，通常会以新行来开始和解释，如<h1>, <p>, <ul>, <table>

内联：内联元素在显示时通常不会以新行开始 <b>, <td>, <a>, <img>

<div>块级，可用于组合其他HTML元素的容器

<span>内联，可作为文本容器

水平线

<p>段落</p>
<hr>
<p>段落</p>

注释

<!-- 这是注释 -->

格式化标签

<b></b>加粗
<strong></strong>加粗
<big></big>放大
<em></em>斜体
<i></i>斜体
<small></small>缩小
<sub></sub>下标
<sup></sup>上标
<del></del>删除字
<ins></ins>插入字

删除字效果演示

这是不是插入字的演示！

这是^上标和_下标的演示

计算机输出标签

<code></code>代码
<kbd></kbd>键盘码
<samp></samp>代码样本
<var></var>定义变量
<pre></pre>定义预格式文本

echo<<"这是samp的效果";


echo<<"这是code的效果";


引文，引用，及标签定义

<abbr>定义缩写
<address>定义地址
<bdo>定义文字方向 dir=rtl/ltr
<blockquote>定义长的引用
<q>定义短的引用语
<cite>定义引用、引证
<dfn>定义一个定义项目

<abbr>演示

上喜撰

<address>演示

<bdo>演示

本文本从右到左显示

<blockquote>演示

此文章来自上喜撰

<cite>演示

The Scream by Edward Munch. Painted in 1893.

<dfn>演示

项目

链接

<a href="shangxizhuan.site">此文本</a>是一个指向本网站的连接

此文本是一个指向本网站的连接

target属性
定义被链接的文档在何处显示

<a href="shangxizhuan.site" target="_blank" rel="noopener noreferrer">      //rel属性规定了被连接文档和本文档之间的关系，当target="_blank"时，rel应该等于noopener noreferrer，用于堵住钓鱼安全漏洞

noreferrer 标记在单击链接时隐藏引用者信息。如果有人从使用此标记的链接到达您的网站，您的分析将不会显示谁提到该链接。相反，它会错误地显示为您的统计流量报告中的直接流量

rel =“noopener”在新标签中打开链接时基本上不会打开它的开启者。这意味着，它的 window.opener 属性将是在新标签中打开一个链接时，而不是从那里的链接打开同一个页面为空。一般都是搭配 target="_blank"同时使用，因为 target="_blank" 也是一个安全漏洞：新的页面可以通过 window.opener 访问您的窗口对象，并且它可以使用 window.opener.location = newURL 将您的页面导航至不同的网址。新页面将与您的页面在同一个进程上运行，如果新页面正在执行开销极大的 JavaScript，您的页面性能可能会受影响。

创建图片链接

<a href="//www.shangxizhuan.site/xxx/xxx.html>
<img border="100" src="smoley.gif alt="shangxiazhuan" width="30" higth="30"> 
</a></p>
//如果是无边框的图片，则border=0

书签

<a href="#C4">查看第四章节</a>
<h1><a id="C4">第四章</a><h1>
<p>内容</p>

跳出框架

<a href="//www.shangxizhauun.site" target="_top">点这！</a>

其他属性，加粗为HTML5不支持

1. charset 规定目标 URL 的字符编码。 char_encoding
2. coords 规定链接的坐标 coordinates

邮件

<a href="mailto:[email protected]?Subject=Hello%20happy"target="_top">
发邮件给我</a>  //%20为空格之意

<head>头

在<head>中你可以插入脚本、CSS、各种meta信息
可添加在头部区域的元素标签为
<title>,<style>,<mata>,<link>,<script>,<noscript>,<base>

<base>描述了文档中所有标签的默认链接
<head>
<base href="http://www.shangxizhuan.site/xxx/" target"_blank">
</head>

<link>定义了文档与外部资源之间的关系
<link rel="stylesheet" type="text/css" href="xxx.css">

<meta>描述一些元数据
<meta name="keywords" content="HTML,安全"> //为搜索引擎定义关键字
<meta name="description" content="HTML"> //为网页定义描述内容
<meta name="作者" contenr="shangxizhuan"> //定义网页作者
<meta http-equiv="refresh" content="30"> //每30s刷新页面

<script>标签用于加载脚本文件

HTML-CSS

CSS可以通过一下方式添加到HTML中

1. 内联样式：在HTML元素中使用style属性
2. 内联样式表：在头<head>区域使用<style>元素来包含CSS
3. 外部引用：使用外部CSS文件（最优）

内联

<body style="background-color:yellow;">
<h3>背景颜色演示</h3>
<p>内容</p>
</body>

<h1 style="font-family:verdana;">标题</h1>

<p style="font-family:arial;color:red;font-size:20px;">段落</p>

//font-family字体，color颜色，font-size字体大小

<h1 style="text-align:center;">居中</h1>

内部样式表

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

外部样式表

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

图像

<p>这里插入一个图片<img src="hello.gif" alt="say hello" width="50" height="50"></p>

src="/images/chrome.gif" //来自文件夹

src="//www.runoob.com/images/logo.png" //来自网页


src为图像的url地址
akt用来为图像定义一串预备的可替换文本

创建可点不同区域的地图

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

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

coords 属性规定区域的 x 和 y 坐标。

coords 属性与 shape 属性配合使用，来规定区域的尺寸、形状和位置。

图像左上角的坐标是 "0,0"。

圆形：shape="circle"，coords="x,y,z"
多边形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."
矩形：shape="rectangle"，coords="x1,y1,x2,y2"

如果某个 area 标签中的坐标和其他区域发生了重叠，会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标。

表格

表格<table>
表格行<tr>
表格数据<td>
表头<th>

两行三列表
<table border="1">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>

单元格跨两列
<th colspan="2">Telephone</th>

跨两行
<th rowspan="2">Telephone:</th>

单元格间距10
<table border="1" cellspacing="10">

带标题的表格
<table border="1">
  <caption>Monthly savings</caption>
  <tr>
  .......

列表

无序列表
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

有序列表，从50开始
<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

表单

文本域

<form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

密码

密码字段<input type="password">

单选

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</from>

复选框

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

提交按钮

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
当按下确认时，表单内的内容会被传送到动作属性所设置的另外一个文件

下拉框

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

按钮

<form action="">
<input type="button" value="Hello world!">
</form>

文本框

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

带复选框的提交表单

<form action="demo-form.php" method="get">
  <input type="checkbox" name="vehicle[]" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle[]" value="Car" checked="checked"> I have a car<br>
  <input type="submit" value="提交">
</form>

框架

通过框架，可以在一个浏览器窗口中显示不止一个页面

<iframe src="url"></iframe>

width,height定义标签的高度和宽度
frameboder定义边框，等于0则移除边框

显示目标连接页面

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="//www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>

脚本

<script>
document.wirte("Hello")
</script>
<noscript>抱歉，您的浏览器不支持JavaScript!</noscript>
///如果浏览器不支持JS，则会显示<noscript>里面的内容
只能在HTML输出流中使用document.write，如果在文档已经加载后使用，则会覆盖整个文档
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>

按钮

<h1>我的第一个 JavaScript </h1>

<p id="demo">
JavaScript 可以触发事件，就像按钮点击。</p>

<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="Hello JavaScript!";
}
</script>
<button type="button" onclick="myFunction()">点我</button>

字符实体

一些预留字符/键盘上找不到的字符必须被替换为字符实体，如<>不然浏览器会误认他们为标签

符号      实体名称    实体编号
空格      &nbsp       &#160
<         lt          60
>         gt          62
&         amp         38
"         quot        34
'         apos        39

字符实体对大小写敏感