我的web开发学习笔记（一）：HTML
一、html整体结构代码：
<!DOCTYPE html>
<html lang="zh-CN"> <!--指定网站语言-->
<head>
<meta charset="UTF-8"> <!--指定网站编码-->
<title>Myhome</title> <!--指定网站标题-->
<link rel="icon" href="favicon.ico" type="image/x-icon"> <!--指定网站首页左上角显示图标-->
<link rel="stylesheet" href="css/me.css"><!-- 引入外部CSS文件 -->
<script src="js/lunar.js"></script><!-- 引用外部JavaScript文件 -->
<script src="js/jquery371.js"></script><!-- 引用外部JavaScript文件 -->
</head>
<body>
<script src="js/lunar.js"></script><!-- 引用外部JavaScript文件 -->
<script src="js/jquery371.js"></script><!-- 引用外部JavaScript文件 -->
<script src="js/me.js"></script><!--引用外部JavaScript文件 -->
</body>
</html>
1、 实践心得：除了别人的库，自己写的js文件要放到最底部，尤其是要选取操作页面相关元素时，否则会找不到元素而无法显示或正确操作。
2、将BING每日图片作为网站的背景图片显示代码（php语言实现）：
<?php
//将BING每日图片作为网站背景
$bingurl = "https://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=en-US";
$bingjson = file_get_contents($bingurl);
$bingdata = json_decode($bingjson, true);
$bingbaseurl="https://www.bing.com";
$imagetitle=$bingdata['images'][0]['title'];
$imagecopyright=$bingdata['images'][0]['copyright'];
$imageurl = $bingbaseurl . $bingdata['images'][0]['urlbase'].'_1920x1080.jpg'; // 1080p图片URL
?>
3、在网页上实时显示时间（时:分:秒）代码（用ajax和js代码实现）：
//javascript代码
// 配置和发送实时时间显示数据START
realtime();
function realtime(){
var realtime2=new XMLHttpRequest();
realtime2.open('GET', '../realtime.php', true);//注意文件目录路径
realtime2.onreadystatechange = function () {
if (realtime2.readyState === 4 && realtime2.status === 200) {
document.getElementById('realtime').innerHTML = realtime2.responseText;
}
};
realtime2.send();
}
setInterval(realtime, 1000);
// 配置和发送实时时间显示数据END
//realtime.php文件代码
<?php
date_default_timezone_set('Asia/Shanghai');//设定正确时区
echo date('H:i:s');
?>
4、实践心得：javascript中函数名称和变量名称最好不要重复，否则容易报错。
5、将BING每日图片作为网站的背景图片另类方法代码（用ajax，js和php语言实现）：
//js,ajax代码
// 配置和发送BING每日壁纸START
bingday();
function bingday(){
var bingday2=new XMLHttpRequest();
bingday2.open('GET', '../bingday.php', true);
bingday2.onreadystatechange = function () {
if (bingday2.readyState === 4 && bingday2.status === 200) {
var bingday3=JSON.parse(bingday2.responseText);//将json格式转换成javascript格式的数据
document.getElementById('homewrap').style.backgroundImage =`url('${bingday3.url}')`;
}
};
bingday2.send();
}
// 配置和发送BING每日壁纸END
//php文件代码
<?php
$bingurl = "https://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=en-US";
$bingjson = file_get_contents($bingurl);
$bingdata = json_decode($bingjson, true);
$bingbaseurl="https://www.bing.com";
$imagetitle=$bingdata['images'][0]['title'];
$imagecopyright=$bingdata['images'][0]['copyright'];
$image1080purl = $bingbaseurl . $bingdata['images'][0]['urlbase'].'_1920x1080.jpg'; // 1080p图片URL
$bingreturn=["title"=>$imagetitle,'copy'=>$imagecopyright,'url'=>$image1080purl];
$bingdata = json_encode($bingreturn);//把php数组格式包装成json数据返回
echo $bingdata;
?>
6、网页上显示当天日历、转换农历、星期显示代码：（需要加载lunar.js库）
//配置当日公历、农历日期显示
var mysolar=new Date();
var mylunar = Lunar.fromDate(new Date());//获取当前日期并转换成农历
var solarday=mysolar.getFullYear()+"年"+(mysolar.getMonth()+1)+"月"+mysolar.getDate()+"日";//公历显示当天日期
var lunarday=mylunar.getYearInGanZhi()+"年"+mylunar.getMonthInChinese()+"月"+mylunar.getDayInChinese()+"日";//农历当天日期
var weekdays=["星期日","星期一","星期二","星期三","星期四","星期五","星期六",]//利用数组把数字周转换成中文星期显示
var weekday=weekdays[mysolar.getDay()];
document.getElementById('realdate').innerHTML =solarday+weekday+lunarday;
7、php中截取指定字符前的所有字符串函数：
strstr(整体字符串,'指定字符串',true);
8、javascript动态在页面中插入新元素或节点：
// 创建一个新的span元素
var newspan = document.createElement("span");
// 为新span设置id,其他一些属性或内容
newspan.id = "newstitle";
// 获取父元素，例如stockbox
var parentElement = document.getElementById("stockbox");
// 将新创建的span添加到父元素中
parentElement.appendChild(newspan);
9、php中给关联数组赋值：
<?php
$stockname = [];
$stockname[]=['name'=> '泸州老窖','code'=>'000568','price'=>'188','rise'=>'8','dividend'=>'8','eps'=>'9'];
$stockname[]=['name'=> '伊利股份','code'=>'000568','price'=>'188','rise'=>'8','dividend'=>'8','eps'=>'9'];
echo $stockname[0]['name'];
echo $stockname[1]['name'];
?>