复习time

发表于 分类于 本文字数： 2k 阅读时长 ≈ 4 分钟

高三了进行一个前端（html+css+javascript）的复习

html

“超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。”

基础构造

<!doctype html>
<html>
    <head>
    </head>
    	<body>
    	</body>
</html>

元素名用尖括号包裹
以<元素名>元素内容</元素名>或<元素名 />作为一部分组成的代码
注释形式为<!--这是一个注释，注释在浏览器中不会显示-->

css

“CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。
通过使用 CSS 我们可以大大提升网页开发的工作效率！”

基础构造

body {
    background-color:#d0e4fe;
}
h1 {
    color:orange;
    text-align:center;
}
p {
    font-family:"Times New Roman";
    font-size:20px;
}
👆在html中直接编译可以使用<style>标签
又或者使用 <link rel="stylesheet" href="style.css">
这样便可以多个网页复用一个css文件

首先声明需要更改的元素 （例如body）
然后用大括号 里面加上属性 随后加冒号 声明属性的值 随后以分号收尾
除了直接更改元素 还可以使用选择器

#para1
{
	text-align:center;
	color:red;
} 
👆CSS 中id 选择器以 "#" 来定义
<p id="para1">Hello World!</p>
👆这个段落就会受到居中和红色字体的影响
.center
{
	text-align:center;
}
👆在 CSS 中类选择器以一个点.号显示
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p> 
👆这些元素就会受到居中影响
p.center
{
	text-align:center;
}
👆在.号前加上元素名 就能限制选择器的范围
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p>

注释方式是/*这里是注释的内容*/

javascript

还在自学 打点草稿上来 1.javascript对大小写敏感
2.输出方式很多
(1)浏览器的f12 - 控制台中测试
(2)html文件<script>元素之间

总之先把现在懂的代码列出来吧
(1)var 变量名=’变量内容’ //定义变量
(2)字符需要加“”或者’‘ 不然被看做变量
(3)console.log(“这些文字”) //让该网页的控制台中输出这些文字
(4)单行注释 //
(5)/*多行注释*/
(6)申明函数（类似于python）
function 函数名称（可选的变量项1，变量项2）{
代码内容
}
(7) return x; 输出变量x的值 多用于函数结尾
(8) 加在元素的标签内 例如下文中的onclick 点击后通过替换demo中的内容来实现报时
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>
https://www.runoob.com/jsref/dom-obj-event.html
至于事件可以看这里👆

(9)至于元素和.后边的相互关系目前未知
(10)输出方式很多
使用document.write()将内容写入到html中
使用console.log()在f12里的console生成信息
使用window.alert()弹出警告框
用id属性标识某个元素 然后使用document.getElementById(“demo”).innerHTML=”想要加入的内容”
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/innerHTML
很酷
vue.js
(11)变量在赋值之前都是undefined