Knowledge of HTML, CSS and JS...

本文最后更新于:3 天前

为简单了解、学习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-colorbackground-image

    background-originbackground-positionbackground-repeatbackground-size

    位置

    clearclipcursordisplayfloattoprightbottomleft

    overflowpositionvisibilityz-index

    外边距

    margin-topmargin-rightmargin-bottommargin-left

    内边距

    padding-toppadding-rightpadding-bottompadding-left

    尺寸

    heightwidthmax-heightmax-widthmin-heightmin-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>


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