html的简单例子和其分析

最新推荐文章于 2023-10-12 11:11:21 发布

努力搬砖中

最新推荐文章于 2023-10-12 11:11:21 发布

阅读量875

点赞数

本文链接：https://blog.csdn.net/Jm990407/article/details/80465978

版权

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>826创新实验室</title>
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css">
<meta charset="utf-8">

</head>
<body>

<div id="home-page" data-role="page">
<div data-role="header">
<h1>826创新实验室</h1>
<a href="index.php" class="ui-btn ui-btn-left ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主页</a>
</div>

<?
session_start();
if(isset($_SESSION['studentid']))
{

?>

<?php
include "conn/conn.php";
//$date=date('Y-m-d H:i:s');
//echo $date;
$q = "SELECT actnotice.ActId,actnotice.ActName,actnotice.StartTime,actnotice.Endtime,actnotice.Address,actnotice.TeacherName,student.LogTime FROM actnotice,student WHERE student.StudentId='{$_SESSION['studentid']}' AND actnotice.StartTime>student.LogTime order by actnotice.StartTime desc";//WHERE StartTime<$date order by StartTime desc"; SQL查询语句
$rs = mysql_query($q);
//$q2 = "SELECT LogTime FROM Student WHERE StudentId='{$Studentid}'";//WHERE StartTime<$date order by StartTime desc"; SQL查询语句
//$rs2 = mysql_query($q2);

$rs1 = mysql_query($q);

?>

<div data-role="main" class="ui-content">
<ul data-role="listview">
<li><a href=actlist.php>近期活动预约名单</a></li>
<?
while($row = mysql_fetch_row($rs))
{
?>
<li><?php echo '活动：'.$row[1].' 时间：'.$row[2].' 地点：'.$row[4].' 主讲人：'.$row[5];?></li>
<?
}?>
</ul>
</div>
<div data-role="main" class="ui-content">
<form form id="form" name="form" method="post" action="act2.php">
<fieldset data-role="fieldcontain">
<label for="act">请点击下拉列表选择你要预约的活动</label><br><br><br>
<select name="actnotice" id="act" >

<? //<option >点击打开活动列表</option>data-native-menu="true"
while($row1 = mysql_fetch_row($rs1))
{
?>
<option ><?php echo $row1[1];?></option>
<?
}?>
</select>

<fieldset data-role="controlgroup" data-type="horizontal" data-iconpos="right" data-mini="true">
<legend>请选择你的需求:</legend><br><br><br>
<input type="radio" data-theme="e" name="radio-choice-h-3" id="radio-choice-h-2a" value="1" checked="checked">
<label for="radio-choice-h-2a">预约</label>
<input type="radio" data-theme="e" name="radio-choice-h-3" id="radio-choice-h-2b" value="2">
<label for="radio-choice-h-2b">请假</label>
</fieldset>
</fieldset>
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button type="reset" data-theme="c">取消</button></div>
<div class="ui-block-b"><button type="submit" data-theme="b">提交</button></div>
</fieldset>
</form>

</div>
<?
}
else
{
echo "<script>alert('您还未登录，不能预约活动');window.location='login.php';</script>";
}
?>
</body>

</html>

这是一个简单的主页例子接下来就对其进行简单分析

一、先明白几个概念

phys.width:

device-width:

一般我们所指的宽度width即为phys.width，而device-width又称为css-width。

其中我们可以获取phys.width即width通过document.documentElement.clientWidth;而获取css-width通过 window.screen.width获取。如iphone6的phys.width为750px，而css-width为375px。

二、

明白一个浏览器默认行为。

试想，浏览器如果把电脑端的980px的网页展现在宽度为750px的iphone6手机屏上，势必会放不下，手机端横向会出现滚动条，怎么阻止这种情况呢，很简单，浏览器默认一个虚拟窗口，不同浏览器有不同的虚拟窗口宽度的默认值如：safari iphone：980px;

opera:850px; Andriod webkit:800px;IE:974px;然后会把这个980px虚拟窗口装进宽度为750px的iphone6中，当然这样的话必须缩放，这就是为什么在手机中展现电脑端页面没有出现横向滚动条，而且字迹明显变小的原因。

三、讲解meta name= viewport content= width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1

meta标签中，width有两个含义，第一、width为phys.width，第二，width也为虚拟窗口的width。这样就会有两个结果：

第一、此时的iPhone6的phys.width也变成了css-width即375px，我们可以通过document.documentElement.clientWidth获取得到此时phys.width确实为375px。

第二、如你设计的是375px的手机端页面，此时的虚拟窗口的宽度也为375px，再装进phys.width为375px的手机，当然如设计稿一样的效果，不会缩放，也不会出现横向滚动条。

四、对响应式布局，媒体查询的影响

@media only screen and (min-width: 350px) and (max-width: 480px){.....................}

如没有meta标签，此时的width当然即为phys.width，iPhone6就不会执行上边的括号里边的代码，但是有了meta标签以后呢，width变成了css-width，即为375px,，所以是会执行代码的。

五、论meta标签的影响

从上边可以看出，有了meta标签以后，原本的iPhone6，即像素比为2的手机，可以按照css-width相同的像素比为1的手机一样正常显示，像素比更高的手机也能正常显示。当然现在andriod的2K屏在meta标签的帮助下也能正常显示。即对于开发者来说，已经可以不管手机的像素比，只需按照css像素编写代码即可。

CSS是Cascading Style Sheet 的缩写。译作层叠样式表单，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

css文件链接html的三种方式：1.内联定义。2.链入内部css.3.链入外部css。

SQL语句查询语句完整语法

完整语法是：

Select [select选项] 字段列表[字段别名]/* from 数据源 [where 字句] [group by子句 ][having 子句][order by 子句][limit 子句];

①[select选项]：

Select 选项包含：ALL（所有，默认）、distinct（去重）。其中distinct针对的是查询结果的整条记录而言的。

②[where 字句]：where是唯一一个从磁盘开始拿数据的时候就开始进行判断的条件，从磁盘取出一条记录，开始进行where判断，判断结果如果成立，那么取出结果保存到内存，否则放弃.

③[group by 子句 ]：分组子句，group by子句主要的作用是分组，从而进行统计操作，而不是为了展示（展示的时候，只会展示分组记录的第一条记录），分组时，一般会结合使用count（）、max（）、min（）、avg（）、sum（）函数。

④[having 子句]：having的作用类同where，而且having能做几乎所有where能做的事情，而where却不能做having能做的很多事情，主要是因为

where只能在磁盘提取数据的时候对数据进行操作；而在内存中对数据进行group by分组之后的结果进行处理，只能通过having。

⑤[order by 子句]：对数据进行排序操作，根据某个字段进行升序或者降序排序。（进行多字段排序的时候，先根据某一字段进行潘旭，然后在排序好的内部再按照某字段进行排序）