WebsiteBasis

最新推荐文章于 2023-06-17 16:44:24 发布

Plorias

最新推荐文章于 2023-06-17 16:44:24 发布

阅读量392

点赞数

本文链接：https://blog.csdn.net/Plorias/article/details/104977185

版权

文章目录

html
- 标签
- 连接CSS文件
CSS
- Flex布局
- bootstrap
Javascript
node.js

html

h1-h6	属性	标题
hr		灰色水平线
a href		超链接
p		文段
img	src,alt(图片无法显示时用文字代替)	嵌套在a href里将图片转为超链接
ol		有序列表，每一项嵌套在li标签里
ul		无序
title		网站标题
span		用于para中一段文字
div		区隔标记
link	rel,type,src	引入css模板

连接CSS文件

嵌套在head标签里

CSS

Flex布局

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

三种字体风格(font-family):
Sans serif
serif
monospace：用于显示代码
border:1px solid black;四周加边界线
background:背景颜色
color：字体颜色
未点击链接时

a{
	color:green;
}

点击链接时

a:hover{
	background:white;
	color:grey;
	text-decoration:none;//点击时下划线不显示
}

自定义类

.classname:hover{//hover:使该类用于链接点击
	color:blue;
}

bootstrap

主题：https://bootswatch.com
引入：

<link rel = "stylesheet"
			  type = "text/css"
			  href = "bootstrap.css"/>

标准bootstrap网格共12列，类col-md-说明该控件占n格
例：图片在一行居中（若让四张图片成一行则每张图片嵌套在一个div块，class为col-md-3)

<div class="row">
			<div class="col-md-12">
				<img class ="large-img" src="gyzz1.jpg" 
				id="large-Img" alt="gy&&zz"/>
			</div>
</div>

where am I？注意breadcrumb类

<ol class="breadcrumb">
                <li><a href="index.html">Home</a></li>
                <li><a href="albums.html">Albums</a></li>
                <li><a href="photos.html">Photos</a></li>
</ol>

网页缩小时,点击按钮显示导航。active类指明当前所在导航页

        <nav class = "navbar navbar-default">
            <div class ="container-fluid">
                <!--collapsed navbar-->
                <div class = "navbar-header">
                    <button
                    type="button"
                    class ="navbar-toggle collapsed"
                    data-toggle="collapse"
                    data-target="#main_navbar"
                    aria-expanded="false">open!
                    </button>
                </div>
                <!--un-collapsed navbar-->
                <div class="collapse navbar-collapse" id="main_navbar">
                    <ul class ="nav navbar-nav">
                        <li class="active"><a href="index.html">Home</a></li>
                        <li><a href="albums.html">Albums</a></li>
                        <li><a href="photos.html">Photos</a></li>
                    </ul>
                </div>
            </div>
        </nav>

include多个css文件时，若不同文件中有同名类，后面的覆盖前面的
@media 可以针对不同的屏幕尺寸设置不同的样式

Javascript

$ is shorthand for the jQuery function passing in a CSS selector which
gets this element by its id.
The html function sets the html content of an element

<font id="and" οnclick="changeTxt();">&&</font>

<script type="text/javascript">
		function changeTxt(){
			$("#and").html("with");
			$("#and").click(function(){
				$("#and").html("&&");
				$("#and").off("click");
			});
		}
	</script>

attr方法

$(".crop-img").click(function(){
			$("#large-Img").attr('src',$(this).attr('src'));//将Large-img的src改成this的src
		});
var id = $(this).attr("id");
counter = parseInt(id.slice(-1));//提取id中的数字部分，-1表示最后一个字符

$(".css类名").length 返回使用该类的标签数量
$(".css类名").each(index,item)对该类的标签逐一操作
event.offsetX is the horizontal position of the mouse inside the element we have clicked on, and the width of the element

$("#mainViewer").click(function (event){
			if(event.offsetX < $(this).width()*0.3){// if event.offsetX is less than 30% of the width, it means it is on the left hand side
				counter = counter - 1;
			}

-setInterval函数用于幻灯片自动放映

// set interval makes it move forward every 3 second
		setInterval(function(){
			if(!pause)
				$("#forward").click();
		},3000)

off函数用于实现反复点击响应

function changeTxt(){
			$("#and").html("with");
			$("#and").click(function(){
				$("#and").html("&&");
				$("#and").off("click");
			});
		}

node.js

内置模板

文件操作
fs.writeFile(file, data[, options], callback)创建、覆盖式写
fs.readFile(path[, options], callback)读
fs.appendFile(path, data[, options], callback)非覆盖式写
fs.unlink(path, callback)删除
fs.readdir(path[, options], callback)读取文件夹的文件名称
fs.mkdir(path[, options], callback)创建文件夹
fs.rename(oldPath, newPath, callback)重命名
fs.rmdir(path[, options], callback)只能删除空文件夹
fs.stat(path[, options], callback)返回文件对象
stats.isDirectory()
stats.isFile()
-URL
url.parse(urlString[, parseQueryString[, slashesDenoteHost]])url字符串转对象
url.format(urlObject)对象转url字符串
-querystring
querystring.parse(str[, sep[, eq[, options]]])字符串转对象
querystring.stringify(obj[, sep[, eq[, options]]])对象转字符串
querystring.escape(str)编码
querystring.unescape(str)解码

第三方模板npm

https://www.npmjs.com/package/npm

npm使用

首先cmd进入工作目录
npm init -y 初始化
npm i 下载json文件中已有依赖
npm i jquery 默认下载最新版本，生产环境下依赖
npm i jquery@3.6.3 指定版本号
npm uninstall jquery 卸载
npm update jquery 更新
npm i jquey --save-dev 开发测试环境下的依赖
npm run test 运行package.json文件中scripts字段中的test

常用模板

邮件插件nodemailer

const nodemailer = require("nodemailer");
  let transporter = nodemailer.createTransport({
    host: "smtp.qq.com",//发送方邮箱类型
    port: 465,//端口号 nodemailer模块的Lib/well-known文件中查询邮箱端口号
    secure: true, // true for 465, false for other ports
    auth: {
      user: "发送方qq邮箱地址", 
      pass: testAccount.pass //在邮箱设置中开启相关服务后的密码串
    }
  });
  let mailObj={
    from: "10469587180@qq.com", // sender address
    to: "收件方邮箱地址", 
    subject: "主题", 
    text: "Hello world?", // text和html中共存时优先发html
    html: "<b>Hello world！</b>" 
  };
//发送
transporter.sendMail(mailObj,(err,data)->{
console.log(err)
console.log(data)
})
//短信轰炸1s发一次，可能被封号
setInterval(()->{
transporter.sendMail(mailObj)
},1000)