网站搭建之html

之前完全没学过html，边做项目边学习，顺便总结一些本次项目用到的基础和常用知识点，知识点来源于“W3school在线课程+随时百度”。

一.W3school的一些知识点笔记：这部分可以参考W3school的HTML速查手册。
二.本次项目中使用到的PHP知识点总结。

-------------------------------------------------------------------------------------------------


一.<head>之间的部分</head>：这部分要知道以下五个标签的意义。

<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>MOOC--课程</title>       1
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css"/> 
<script src="js/chk.js" language="javascript"></script> 
<style>.col-sm-3{float:left;
margin-left:2%;
margin-top: 10px;
margin-right:2%;
margin-bottom:10px;
width:20%;
}</style> 2

另外，（style有三种设置方式：link到css文件，即上面标红的1；head部分的style设置，即上面标红的2；另外一种就是在标签的属性style里设置）

 

二.关于网页的布局排版，我自己觉得常用的有三种：

1.div布局。

div之间彼此独立，你可以按照自己的意愿，将一块区域分成上中下左右…

这部分涉及到的一些知识点有：

属性style的辅助使用：

（1）善用padding-left，padding-right，padding-top，padding-bottom；

（2）善用width，height；（注意如果用50%这样的相对数值而不是300px这样的绝对值，效果不一样：在浏览器窗口大小变化时，相对值的排版会相应调整有可能导致错乱）

（3）善用float:left，float:right（使用该属性会影响后面的元素，如果后面的div不想再被影响，可以使用clear:both；可以理解为清除float:left和float:right的影响，返回到默认状态。）

（4）善用div中嵌套<span style=”XXX”></span>或者<b style=”XXX”></b>

（5）善用<div class="clearfix"></div>

以上这些知识点的配合使用，基本可以构造出任何你想要的布局了。举个例子，

<div style="padding-top:10px;padding-left:10px;padding-right:15px;">
<div style="background:#c9e0ed;height:30px;padding-top:15px">
<b style="padding-left:20px;float:left;">文章主题：<?php echo $row['title'];?></b>
</div>
<div>
<div style="padding-top:15px">
<!--显示主题-->
</div>
</div>
</div>

2.table布局。

这种应该也能达到跟div一样的效果，但是W3School不建议用来布局，而应该用来显示表格数据，本人用的不多。

3.frame布局。

W3School都说的比较清楚，可以用来作为导航布局。但是有点必须知道是，假如在某一列中用<a href></a>的方式转到另一个网页，另外一列不会受影响，仍然不会跳转。这有时不是我们想要的效果，是个问题。另外，frame框架的简单使用可以参考

（1）第一种：frame

我没用这个，参考W3School了解就行。

（2）第二种：iframe

这个是内嵌的，如果说frame是将一个网页分成两个互不干扰的列，那么iframe就是将一个网页分成互不干扰的两个区域，这两个区域可以是两列，也可以是两行，也可以是环状，反正更加灵活。只要将iframe起个名字nameXXX，然后<a href=”XXX” target=nameXXX></a>就可以跳转到该iframe区域显示。举个例子

<div style="width:100%;height:auto">
<div style="width:10%;height:auto;float:left;padding-left:15px;padding-top:20px;">
<a href="school_forum.php" target="showframe">谈天说地</a>
</div>
<div style="width:88%;height:auto;float:right;">
<iframe src="school_iframe.php"style="width:100%;height:1000px;" name="showframe">
</iframe>
</div>
</div>
但是上面的这种iframe的大小是固定的，如果要让iframe大小与内容自适应，用下面的：
<iframe name="course_showframe" src=""  scrolling="no"frameborder="0" style="width: 100%;"οnlοad="this.height=this.contentWindow.document.documentElement.scrollHeight">
</iframe>
如果想从iframe中跳出来：
从iframe里面跳出来到别的整个页面：<a href="others_info.php? " target="all_html">其中将本页面的html加上属性name=”all_html”即可，如下<html xmlns="http://www.w3.org/1999/xhtml"name="all_html">
任何一处都可以用target=XXX（iframe）进行跳转，比如：
<form action='course_all_topic.php?new_topic=1&course_id=".$course_id."' target=course_topics_showframe

 

三.网页之间的联系

1.GET方式

发送网页：<a href="school_forum.php?id=1&name=lily">谈天说地</a>

接受网页：<?php $tid=$_GET[‘id’]; $name=$_GET[‘name’];?>

2.POST方式

发送网页：用表单。举个例子

<form action='school_forum.php?new_post=1&classify_id=1' method='post'enctype='multipart/form-data'>
         <p>主题：</p>
         <input type='hidden'>
name='title'style='height:80px;width:100%;'></textarea>
         <p>内容：</p>
         <input type='hidden'>
name='content'style='height:200px;width:100%;'></textarea>
         <br />
         <label for='file'>上传图片(小于4M):</label>
name='file'
         <button class='pull-right btnbtn-default' type='submit' name='submit'>提交</button>
</form>
接受网页：
<?php 
$new_post=$_GET['new_post'];
$title=$_POST[‘title’];
$content=$_POST['content'];
$file=$_POST['file'];
?>

3.直接跳转

发送网页：需要用到了js的东西。

<script language=javascript>location.href='login.php';</script>这样就直接跳转到login.php这个网页了。

如果需要在跳转之前出现网页提示，可以这样：

<script language=javascript>alert('请先登录！');location.href='login.php';</script>

 

接受网页：啥都不用做。

四．一些零散的常用知识点。

1.流动字幕效果

比如：

<marquee direction="left|right|up|down" behavior="scroll|alternate" loop="i|-1|infinite" hspace="m"  vspace="n"scrollamount="i" scrolldelay="j" align="middle|top|bottom" bgcolor="#66FF00" width="100%" height="30px">欢迎留下您的宝贵意见，帮助我们改进 谢谢</marquee>

Ps: 一开始在IE浏览器下发现没效果。最后发现 ，在marquee中设置width的值就可以了，例如width="300" 。

具体各个字段含义，可以参考：


2.设置字体格式

<font face="字体名称" size="字体大小"  color="字体颜色">被设置的字体格式的内容</font>

比如：
<font face="楷体" size="8px"  color="grey">你好吗</font>
3.+号展开的效果
<head>
<script type="text/javascript">
       function show2() {
           var content2 = document.getElementById("content2");
           if (content2.style.display == "none") {
                content2.style.display ="block";
           } else {
                content2.style.display ="none";
           }
       }
</script>
</head>
<body>
<div style="color:green">
<span οnclick="show2()"style="cursor:pointer;">+</span><b><a style="color:green" href="school_forum.php"target="showframe">谈天说地</a></b>
</div>
                   
<div id="content2" style="display:block;">
<ul>
<li><a href="school_forum.php?classify_id=1"target="showframe">学术研究</a></li>
<li><a href="school_forum.php?classify_id=2"target="showframe">技术探讨</a></li>
<li><a href="school_forum.php?classify_id=3"target="showframe">学习寻伴</a></li>
<li><a href="school_forum.php?classify_id=4"target="showframe">胡扯瞎聊</a></li>
</ul>
</div>
</body>

4.同一页面内跳到某个指定的位置：

跳转处：<a href="#C4">查看 Chapter 4。</a>

被跳转的目标处：<h2><a name="C4">Chapter 4</a></h2> 或者<h2 id="C4">Chapter4</h2>也可以

 

如果想要加上参数传递，可以这样：

跳转处：<a href='course_forum_info_replys.php?tid=1#myform'target='course_showframe'>回复</a>

其中，#myform可以用来指定跳转到某个页面的某处，挺好用。

 

5.在网站复制文件之后，经常出现中文乱码，解决方法：

用记事本打开之后保存为utf-8格式