最好了解一下的进阶知识

HTML语言基础知识

打开任何一个网站，右键 - 查看网页源代码，所看到的便是HTML代码，如果想更多了解这些代码的详细信息，建议查看这里。

本页内容简单的描述一下HTML语言的基础知识。

1. 使用文本编辑器，创建一个新文件，将以下代码输入，并保存为test.html或test.htm。

用浏览器打开test.html，浏览器上将会显示hello world!

<html>
<body>
hello world!
</body>
</html>

2. HTML标签是以尖括号标识的，如

<html>

；同时它必须有结束部分，如

</html>

。但也有例外，换行<br />、图片<img src=“imgage address” />、横线<hr>等不需要结束标签。

3. 早期几乎所有网站都使用表格来排版，现在几乎都使用

<div> ... </div>

元素的 HTML 布局排版，所以在学习HTML语言时，尽可能多的去理解 div 标签。

4. SEO话题中，最重要的两项HTML元素是<h1> 一级标题 </h1>和<strong> 加粗 </strong>，这在使用WordPress建站时，需要检查的部分，因为搜索引擎会认为这两项元素包含的内容是页面的重要部分。

当然，不能把所有内容都用这两个元素包含起来。通常每个页面只能使用一个h1元素，strong元素也不能滥用。

5. 可以给元素添加 id 和 class，方便给元素附加 css 样式，css 样式如何定义是下一节讨论的内容。

<div id="id_name" class="class_name"> contents... </div>

6. 如何添加链接和邮箱链接？

links.html

<html>
<body>
<a href="https://www.wpwiki.cn">链接到WPWIKI</a>
<a href="mailto:yunbotao@gmail.com">写邮件给我们</a>
</body>
</html>

CSS基础知识

上一节讲到 HTML 语言，可以将 HTML 理解为一个赤裸的身体，那么 CSS 就是其外的衣服、鞋子及饰品等。如果世界上所有人都是赤裸的，就毫无美好之言。同样的道理，如果所有网站都是赤裸的，就不需要网页设计师和自己建网站了，好的网站必然是有丰富的内容和可欣赏的外观。

CSS 的更多详细内容，请查看这里。

1. 给上一节的两个链接改变一下颜色，链接颜色为cornflowerblue，当鼠标放上后，颜色变为brown；

links1.html

<html>
<style>
	a {color: cornflowerblue;font-size: 12px;}	
	a:hover {color: brown;}
</style>
<body>
<a href="https://www.wpwiki.cn">链接到WPWIKI</a>
<a href="mailto:yunbotao@gmail.com">写邮件给我们</a>
</body>
</html>

2. 给两个链接添加不一样的CSS，给第一个链接添加class=“link_one”，第二个链接添加class=“link_two”。

links2.html

<html>
<style>
	a.link_one {color: cornflowerblue;font-size: 12px;}	
	a.link_one:hover {color: brown;}
 
	a.link_two {color: #000;font-size: 12px;}	
	a.link_two:hover {color: #ccc;}
 
</style>
<body>
<a class="link_one" href="https://www.wpwiki.cn">链接到WPWIKI</a>
<a class="link_two" href="mailto:yunbotao@gmail.com">写邮件给我们</a>
</body>
</html>

3. 稍加修改以上HTML代码，CSS 的样式写法又会不一样；

links3.html

<html>
<style>
	.link_one a {color: cornflowerblue;font-size: 12px;}	
	.link_one a:hover {color: brown;}
 
	.link_two a {color: #000;font-size: 12px;}	
	.link_two a:hover {color: #ccc;}
 
</style>
<body>
<div class="link_one"><a href="https://www.wpwiki.cn">链接到WPWIKI</a></div>
<div class="link_two"><a href="mailto:yunbotao@gmail.com">写邮件给我们</a></div>
</body>
</html>

以上仅仅是 CSS 的冰山一角，在使用WordPress建站时，并不会需要自己去写 CSS，以下讲到如何去修改主题的CSS，这才是我们重点要了解的地方。

4. 使用Chrome浏览器，右键 - 查看，就可以看到鼠标所在位置的 HTML 代码，右侧是 CSS 样式，在Chrome里，便可以实时查看修改的效果。修改后，需要把修改的代码复制到后台自定义 CSS 文件内，或子主题的CSS文件内。

5. 给网站所有内容替换字体为微软雅黑，添加以下代码到自定义CSS里：

* {font-family: '微软雅黑', Arial;}

JavaScript语言基础知识

JavaScript 是属于网络的脚本语言！被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。是因特网上最流行的脚本语言。更多详细内容，请查看这里。

网站有很多很的JS代码，通常不需要自己去写JS代码，但是需要了解如何引用JS代码。

1. 这是引用外部的JS文件进来：

<script type="text/javascript" charset="utf-8" src="JS文件的地址"></script>

2. 这是将JS代码置入HTML代码内:

test.js

<html>
<head>
</head>
<body>
 
<script type="text/javascript">
...
</script>
 
</body>
</html>

初识PHP语言

PHP 语言是服务器端运行的脚本语言，所以在浏览器右键查看源代码只能看到执行后的 HTML 代码，而不会看到 PHP 代码。由于使用的 WordPress 程序是由 PHP 开发的，所以有必要了解一下 PHP 语言的基本知识。

1. PHP 代码是以 <?php 开始，以 ?> 结束的。如下：

test1.php

<?php
  echo "hello world!";
?>

其中 echo 是在网页上输出文本。

2. PHP 代码可以任意插入 HTML 代码内：

test2.php

<html>
<body>
 
<p>我是第1段内容！</p>
<?php echo "我是第2段内容！"; ?>
<p>我是第3段内容！</p>
<?php echo "我是第4段内容！"; ?>
<p>我是第5段内容！</p>
<p>我是第6段内容！</p>
 
</body>
</html>

注意：下载test2.php后，用浏览器打开后，是不会看到 PHP 代码输出的内容，因为 PHP 是服务器端执行的代码，本地服务器可以将此 test2.php 文件放置在 G:\xampp\htdocs 目前内，通过 http://localhost/test2.php 访问。

3. PHP 的变量是以美元符号$命名的，如下：

test3.php

<?php
 
  $my = 5;
  echo $my; 
 
?>

将输出 5 ，这里要特别注意的是，如果将 JS 代码嵌套在 PHP 代码内，需要注意 JS 的命名不要出现 $ 符号，如果出现冲突，应该在 JS 代码的 $ 前添加 \ ，以便其输出正确。

PhotoShop设计基础

网站在建设过程中，用的图片的地方非常多，譬如Logo、Banner和产品图片等。在制作图片之前需要了解以下基础：

图片的大小：一般是指这个图片的占用磁盘空间，比如说200K和1M，后者就比前者大多了，通常在不影响图片清晰度的情况下，图片的大小是越小越好；
图片的尺寸：是指图片的宽和高，单位以像素来描述，500×300的图片，其宽度是500像素，高度是300像素；
图片的格式：常见三种格式，jpg、png和gif，png格式越来越受欢迎，而且其支持透明度，动画图片一定要保存为gif格式才可以；

PS能干的事儿很多，你想学什么？

其实，我们学习PS，仅仅是为了建站的需要，譬如：修改一下图片尺寸，在图片上加个文字什么的，把两张图片拼在一起等非常简单的操作。所以并不推荐去找PS视频教程去学习，那些视频是给想从事设计行业的人去学习的。

最好的办法是：找一个会PS的亲戚朋友或同学，花1-2小时学会就可以了。

如果学不会，那就不要学了，在建站时，遇到图片处理的事，还是交给他人来完成吧，把时间节省出来干别的事！

WordPress建站小百科

侧边栏

目录

最好了解一下的进阶知识

HTML语言基础知识

CSS基础知识

JavaScript语言基础知识

初识PHP语言

PhotoShop设计基础

WordPress建站小百科

用户工具

站点工具

侧边栏

目录

最好了解一下的进阶知识

HTML语言基础知识

CSS基础知识

JavaScript语言基础知识

初识PHP语言

PhotoShop设计基础

页面工具