网站搭建之html
2015-06-22 17:45
671 查看
网站搭建之html
之前完全没学过html，边做项目边学习，顺便总结一些本次项目用到的基础和常用知识点，知识点来源于“W3school在线课程+随时百度”。
一.W3school的一些知识点笔记：这部分可以参考[b]W3school的[/b]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框架的简单使用可以参考http://blog.csdn.net/chengzi120/article/details/5635961
（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%;"onload="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" 。
具体各个字段含义，可以参考：
http://www.cnblogs.com/hailexuexi/archive/2013/01/06/2847462.html
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 onclick="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格式
之前完全没学过html，边做项目边学习，顺便总结一些本次项目用到的基础和常用知识点，知识点来源于“W3school在线课程+随时百度”。
一.W3school的一些知识点笔记：这部分可以参考[b]W3school的[/b]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框架的简单使用可以参考http://blog.csdn.net/chengzi120/article/details/5635961
（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%;"onload="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" 。
具体各个字段含义，可以参考：
http://www.cnblogs.com/hailexuexi/archive/2013/01/06/2847462.html
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 onclick="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格式
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 换主页轮播的主题图片（2、添加）---轻开电子商务系统(企业入门级B2C网站)
- 换主页轮播的主题图片（1）---轻开电子商务系统(企业入门级B2C网站)
- Linux SPI总线和设备驱动架构之四：SPI数据传输的队列化
- Linux SPI总线和设备驱动架构之三：SPI控制器驱动
- Linux SPI总线和设备驱动架构之二：SPI通用接口层
- Yahoo!团队：网站性能优化的35条黄金守则
- Android动态加载框架DL的架构与基本原理解析
- Grails扒其它网站数据
- JVM原理、架构—垃圾回收机制
- 标准Web系统的架构分层
- MyBatis学习门户网站（一）
- SharePoint Server 2016更新之（二，三）受云端影响的架构，合规和报告
- EntityFramework5.0 DataBase-First 在三层架构中的使用，分离实体类到Model层。
- 高并发量网站解决方案
- windows7系统 Internet 信息服务(IIS)管理器 默认网站 右键 没有属性这一项怎么办？
- 换主页轮播的主题图片（3、保存添加）---轻开电子商务系统(企业入门级B2C网站)
- 架构师学习思考
- 实战部署weblogic集群及发布应用(7)
- 实战部署weblogic集群及发布应用(6)
- 实战部署weblogic集群及发布应用(5)