网站搭建之html
网站搭建之html
之前完全没学过html，边做项目边学习，顺便总结一些本次项目用到的基础和常用知识点，知识点来源于“W3school在线课程+随时百度”。
一.W3school的一些知识点笔记：这部分可以参考W3school的。
二.本次项目中使用到的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 method='post' enctype='multipart/form-data'>
三.网页之间的联系
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'>
<textarea name='title'style='height:80px;width:100%;'></textarea>
<p>内容：</p>
<input type='hidden'>
<textarea name='content'style='height:200px;width:100%;'></textarea>
<br />
<label for='file'>上传图片(小于4M):</label>
<input type='file' name='file' id='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" 。
具体各个字段含义，可以