前端学习笔记

.Katherine௰

已于 2022-04-04 19:47:39 修改

阅读量1.2k

点赞数

文章标签： html5 javascript css3

于 2022-03-27 18:41:29 首次发布

本文链接：https://blog.csdn.net/qq_45426640/article/details/123777255

版权

文章目录

3.CSS
4.JavaScript

1.web的工作原理

1.客户机向某地址网页上的index.html发送请求
2.服务器收到请求后将该文件返回给浏览器
3.浏览器解析文件html代码
4.根据< img/>标签中的src属性，与浏览器获取该html相同的的地址下的images目录找到图像，
5.浏览器请求该图像
6.服务器解释该请求，将该文件的内容发送给请求他的web浏览器
7.web浏览器显示该图像
反思：
为什么说不对？
提炼：服务器查找文件的过程不清楚

1.1联想：一个URL的请求响应过程？

找到一个超清解析
在这里插入图片描述
涉及计算机网络的知识：
从输入URL到页面加载的主干流程如下：
　　1、浏览器构建HTTP Request请求
　　2、网络传输
　　3、服务器构建HTTP Response 响应
　　4、网络传输
　　5、浏览器渲染页面
　　
　　卡在这了：找了B站视频
浏览器渲染页面的流程

2.html语义元素

2.1 常见语义元素

<header></header>
<nav></nav>
<section></section>
<article></article>
<aside></aside>
<footer></footer>

<header>
对页面总体上的介绍，包含<h1>更有意义
可以包含流式内容（文本、图像等）

<article>与<section>

<article>更侧重网站的整个部分（如一片博客）而<section>侧重一个子主题。通常<article>中包含<section>

<nav> 用于导航
<footer> 中存放<address>
<aside> 存放有意义的醒目文字

2.测验

1.html需要的5个标签？
！！<html><head><title><body>
第一行的<!DOCTYPE html>

<!DOCTYPE html>
<html>
	<head>
		<title>xxx</title>
	</head>
	<body>
		<header><h1>welcom to Foo Bar<h1></header>
		<section>
			<p>Come on down!</p>
		</section>
	</body>
</html>

3.CSS

3.1 布局属性和格式化属性

display：


block	元素另起一行
list-item	元素另起一行，且前有标记
inline	跟随同行文字
none	隐藏元素

css隐藏元素有哪些方法？

boder

border-width
border-size
border-color

font

font-color
font-size
font-family
font-weight

3.2样式表

用类选择器和用ID选择器
ID选择器比类选择器更适用于出现在页面一次的页面元素比如<footer>、<header>等

3.3 内部样式和内联样式

内部样式
封闭在<style></style>中间，并且用一个html文档包含他
内联样式
用style属性在<p>、<div>、<span>标签内创建并应用样式规则，因为是在html代码中指定的。

其他标签
<span></span> 是伪标签，用来给内容添加样式，不自动换行
<div></div> 块级元素，自动换行

<style></style>
//用于<head></head>中 
属性：type="text/css"

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

外部样式表 在<head>区域中使用
<span style="">

在单个页面中引入多张外部样式

@import url(style1.css)
@import url(style2.css)

必须放在web页面的头部

4.JavaScript

1.<script type = "text/javascript"> 
	JavaScript代码
</script>
可以写在<body></body>之间
也可以写在<head></head>之间
2.JavaScript对大小写敏感
3.注释方法：
<!--注释内容-->
与java相同
//单行注释
/**/多行注释
4.可以在html页面中插入多个JavaScript代码块
<script src="code.js" type="text/javascript"></script>

JavaScript语法
var 变量名
Number（字符串）强转数组
String（数值）强转字符串

函数的定义

function 函数名（参数列表）{
	return 值；
}

var arg1 = function（参数列表）{
		return 值；
}

JavaScript内置对象

window 浏览器窗口，负责窗口的状态、开/闭等

window.alert()
//提示窗口
window.confirm()
//确认窗口
window.prompt()
//出现输入框
window.open()
//open()函数有三个参数，新窗口的地址、新窗口的名称、新窗口的状态，新窗口的状态可以有

open（）状态参数	意义
toolbar	是否有工具栏可选值为0和1
status	是否有状态栏可选值为0和1
location	是否有地址栏可选值为0和1
menubar	是否有菜单栏可选值为0和1
scroller	是否有滚动条可选值为0和1
resizeable	是否能改变大小可选值为0和1
width height	高度和宽度用像素表示
left top	窗口左上角相对于桌面左上角的x和y

history：代替后退、前进按钮

history对象常用的函数


history.back()	返回上一页，相当于单击浏览器上的后退按钮
history.forward()	返回上一页，相当于单击浏览器上的前进按钮
window.history.go(n)	返回n页，当为正数时，前进n页，当为负数时，后退n页
onlick()事件

document：载入html文档
location：访问浏览器地址栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css"> </style>
</head>
<body>
    <script type="text/javascript">
        timer = window.setTimeout("fun1()","1000")
        var i = 0;
        function fun1(){
            i++;
            window.status = i;
            if(i == 100){
                window.clearTimeout(timer);
                return;
            }
            timer = window.setTimeout("fun1()","1000")
        }
    </script>
</body>
</html>