Knowledge of HTML, CSS and JS...

本文最后更新于：1 年前

为简单了解、学习html、css、JavaScript三剑客，写了一个“极简主义”，绝对够简易，来吧，先展示！

DXASuF.md.png

源码如下：

  • Html：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>QQ邮箱登录</title>
    <style>
    	img {
    		position: absolute;
    		margin-left: 35%;
    	}
    	form{
    		margin-left: 10%;
    		margin-top: 10%;
    	}
    	button {
    		margin-left: 4%;
    	}
    	a{
    		margin-left: 10%;
    	}

    </style>
    <script type="text/javascript" src="js/inter.js"></script>
</head>
<body>
	<img src="imgs/QQ截图20201125150933.png" alt="登录配置图片">
    <form action="demo/welcome.php" method="post">
        账号：<input type="text" id="account" placeholder="支持QQ号/邮箱/手机号登录"><br><br>
        密码：<input type="password" id="passwd" placeholder="QQ密码"><br><br>
        <button type="button" class="btn btn-primary" onclick="fnLogin()">登录</button>
        <button type="cancel">取消</button>
    </form>
    <div id="error_box"><br></div>
    <br>
    <br>
    <br>
    <br>
    <a href="https://mail.qq.com/?ocid=MSNCNLG10-2/">官方入口!!!</a>
</body>
</html>
  • js:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function fnLogin() {
 var oUacnt = document.getElementById("account")
 var oUpswd = document.getElementById("passwd")
 var oError = document.getElementById("error_box")
 var isError = true;
 if (oUacnt.value.length > 20 || oUacnt.value.length < 5) {
  oError.innerHTML = "请输入正确账号";
  isError = false;
  return;
 }
 if (oUpswd.value.length > 18 || oUpswd.value.length < 6) {
  oError.innerHTML = "密码请输入6-18位字符"
  isError = false;
  return;
 }
 window.alert("呵*_*,,,任务完成。。。")
}
document.querySelector('html').onclick= function() {
    alert('啊就这...');
 }

记个笔记

Html

  1. H5时代开头简洁明了

<!DOCTYPE html>

  1. 基本结构
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

</body>
</html>
  • 一个人完整元素=开始标签<p>+内容+结束标签</p>
  • 注意所有符号使用英文
  • 标签属性添加至开始标签末尾>前 <元素 属性=””>内容</元素>
  • 元素与属性间，属性与属性间必须有一个括号
  • Sublime Text中敲出<h选中html即可直接给出结构
  1. meta标签+charset属性，指定 HTML 文档的编码

<meta charset="UTF-8">

  • 网页尺寸实现自适应

<meta name="viewport" content="width=device-width, initial-scale=1.0">

  1. img标签 ：

<img src="imgs/QQ截图20201125150933.png" alt="登录配置图片">

  • 属性src的值为图片路径，alt指文本信息
  • 另外还有width、height属性来设置图片宽度和高度（单位px或%）
  1. br换行
  2. input标签：

用于搜集用户信息，即为输入

  • type属性规定元素类型，例如type="passwd"即可实现密码隐藏的效果
  • placeholder属性表示占据文本，值为text
  1. button标签：

可点击按钮

  • 按钮名称放于两尖括号之间
  • 记得为其指定type属性（button、reset、submit）
  1. a标签：

超链接

  • href属性的值为链接URL，两对尖括号间添加可点击文字
  • target属性指定在何处打开超链接
    • _blank：在新窗口中打开
    • _parent：在当前的父窗口中打开，如果不存在父窗口，此选项的行为方式与 _self 等同
    • _self：当前窗口打开（默认）
    • _top：在整个窗口中打开
    • framename：在指定的框架中打开

CSS

  1. 选择器{属性:属性的值;}

选择器指HTML元素的名称

  1. 常见属性:

    背景

    background-color、background-image

    background-origin、background-position、background-repeat、background-size

    位置

    clear、clip、cursor、display、float、top、right、bottom、left

    overflow、position、visibility、z-index

    外边距

    margin-top、margin-right、margin-bottom、margin-left

    内边距

    padding-top、padding-right、padding-bottom、padding-left

    尺寸

    height、width、max-height、max-width、min-height、min-width

  2. 同一选择器中多个属性用;隔开

    1
    2
    3
    4
    5
    p{
    ​	color: red;

    ​	width: 500px;
    }

    相同选择器使用同一属性用，隔开

    1
    2
    3
    4
    5
    p,h1{
    	color: red;

    	width: 500px;
    }

JS

1.基本结构

1
2
3
<script>
alert:('hello world')
</script>

2.声明变量

1
let a = 1

或者使用var
3.JS对大小写敏感
4.数据类型
DXkvcT.md.png

5.常用运算符

DXkj3V.md.png

6.简单的点击交互

document.querySelector('html').onclick= function() { alert('啊就这...');

  • 使用函数alert( )可在浏览器窗口内弹出警告框
  • 本例使用匿名函数赋值给标签<html>的onclick属性

7.js中条件语句与C类似

简单的就这些，感谢阅读😎

参考教程<【Web前端开发】《零基础入门学习Web开发》（HTML5&CSS3）（小甲鱼）_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili>

​ <鱼C-Web-速查宝典 (ilovefishc.com)>

​ <Web入门微课_编程实战微课_w3cschool>

note
Web

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！