浅尝web前端

试错小小○

已于 2022-08-28 15:39:02 修改

阅读量354

点赞数 1

文章标签： javascript 前端 css html

于 2022-07-05 14:56:09 首次发布

本文链接：https://blog.csdn.net/weixin_62068104/article/details/125551405

版权

文章目录

前言
一、web前端入门扫盲课程
二、课程共四章13小结

前言

开启web前端课程学习

一、web前端入门扫盲课程

浅尝HTML+CSS+Javascript

二、课程共四章13小结

【1】web概述

org 表示非营利性组织

网页显示404
表示当前网页发生错误，原因是网页已被开发者移除、更改或是网址输入错误而不存在

web 指的是万维网，全球广域网
HTML 指的是超文本标记语言
CSS 用于网页装饰
Javascript 可添加网站交互效果

win+R 输入 dxdiag
可弹出DirectX 诊断工具，查看系统信息

tips
1.尽量用小写英文命名文件
2.运用短横线 “-” 来分离
3.先画草图进行网页布局
4.web文件路径要明确

实战
< h > 表示标题，分为< h1 >到< h6 >
< p > 表示段落，段落为文本，可以包括词、句、段
< img > 表示图片，格式包括PNG、JPG、SVG

// 基础代码块
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
</head>
<body>
  <h1>一级标题</h1>
  <p>段落一句话</p>
  <h2>二级标题</h2>
  <img src="images/2.jpg"><br>
  <p></p>
</body>
</html>

【2】HTML入门

HTML是一种标记语言，由一系列要素组成。

	<meta charset="utf-8">  是编码格式，告诉浏览器以什么方式打开代码

标签和属性 需要熟记（部分）

标签	描述
< !–…-- >	注释
< !DOCTYPE >	文档类型(用于文档声明）
< a >	超文本链接
< article >	一个文章区域
< aside >	页面的侧边栏内容
< audio>	音频内容
< b >	文本粗体
< blockquote>	长的引用
< canvas >	图形如图标和其他图像，标签只是图形容器，必须使用脚本绘制图形
< caption >	表格标题
< cite >	引用
< command >	命令按钮如单选按钮、复选框或按钮
< del >	被删除文本
< dialog >	对话框如提示框
< div >	文档中的节
< i >	斜体字
< img >	图像
< p >	段落
< span >	文档中的节
< style >	文档的样式信息
< sub >	下标文本
< th >	表格中的表头单元格
< time >	时间或日期
< title >	文档的标题
< ul >	无序列表
< video >	视频如电影片段或其他视频流

全局属性
属性的引号（可单引号或双引号），需在英文状态下，且单引号需包含在双引号内

属性	描述
class	规定元素的类名
dir	设置元素中内容的文本方向
hidden	规定对元素进行隐藏
id	规定元素的唯一id
style	规定元素的行内样式
tabindex	设置元素的Tab 键控制次序

一个完整元素=开始标签+内容+结束标签

href=“xxx”
其中 href 为属性，xxx 为属性的值

元素的嵌套使用
< strong > 必须在 < p >内部，可以发现“萨摩耶” 这个词被加粗了

<p> 我叫<strong>萨摩耶</strong>.</p>

块级元素和内联元素

块级元素常用于展示（页面上层结构化内容
比如：进行、列表、导航菜单、页脚
xxxx
xxxx
xxx

内联元素：常出现在一堆文字之间，常行状显示
比如：
超链接元素< a > （包含href属性）,
专有元素< em > （效果是斜体）
< strong >元素（效果是加粗）
xxx,xxxx,xxx

空元素
如 < img src=“” > ，其中src是必要属性
< br > ,作用是折行，能使本行和下面的段落文本分离。

alt =" " 是< img > 的属性，它的值是文本，它规定了当图像无法显示时替代显示。

列表
< ol > 有序列表
< ul > 无序列表
共同点：列表中每个项目都要用一个< li >元素包围

【3】CSS入门

CSS是层叠样式列表
使网页美观，控制代码量，重点一是选择器，二是样式

CSS规则集包括：
-选择器,如p为标签选择器
-声明=属性+属性的值，声明表示一个单独的规则，属性改变HTML元素样式的途径，属性的值指从指定属性的众多外观中选择一个值。

p{color:red;}

注意

需要被包含在一对大括号里，除选择器
冒号分隔属性与属性的值
分号分隔多个声明


```css
p{
	color:red;
	width:500px;
}

p,li,h1{
	color:red;
}

CSS的布局主要基于盒模型，每个占据页面空间的块都有这样的属性：

padding：内边距 ，围绕着内容的空间
border：边框 ，紧接着内边距的线
margin：外边距 ，围绕着元素外部的空间

更改背景颜色
如 #00539 是颜色的十六进制编码

部分属性含义

width:700px     --使元素宽度保持700像素
margin或padding属性   --设置两个值
	    一个代表元素上下方向，如0
	    一个代表元素左右两边，如auto（特殊值，含义是水平方向左右对称）
background-color   --指定元素的背景颜色
padding：0 20px 30px 20px;      --内边距设置四个值。按照（上右下左）顺序排列
border：5px solid black;       --黑色实线边框
text-shadow   --为文本提供阴影，有四个值
	一个为水平偏移值，阴影右移
	一个为垂直偏移值。阴影下移
	一个为阴影的模糊半径，值越大阴影越模糊
	一个为阴影颜色

< img > 是内联元素，必须使用 display：block 赋予其块级元素行为

把CSS文件和HTML文件绑定
将下面代码复制到< head >< /head>之间

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

浏览器默认界面白色，字体黑色，利用 html{ } 设置css

【3】JavaScript入门

JavaScript是一门动态编程语言，可增加网页动态交互特性，比如：验证输入表单的正确性，改变网页上文字，设置实时时钟。它是客户端脚本语言，可通过API访问，操作HTML元素节点。

JS难精通

-关联到HTML 的Dom结构，浏览器对JS的差异化处理（微软的浏览器是edge，厂商AIphabet是Google

<script>
alert:('Hello We')
</script>

JS的变量是存储值的容器
要响应一个动态，先声明一个变量。
首先输入关键字let,然后输入合适的名称

let variable
//赋值
let variable ='wo';

tips：
1.在单行内需要分割多条语句时，行末的分号表示当前语句结束
2.在支持ES6语法（一种编写代码的新规定）的JS环境中，可以使用 let或者var 声明变量
3.JS 对大小写敏感

JS 的变量有不同的数据类型

数据类型	说明	注意	示例
string	字符串	必须用引号包围	let xx=“wo”
number	数字	--------	let xx=88
boolean	布尔值：真（true)&假(false)	--------	let xx=true
array	数组	--------	let xx=[88,wo,10]
object	对象	在JS中一切皆对象	以上示例都是对象
undefined	没有值的变量	typeof 也返回 undefined	let xx;
null	不存在，常用于清空变量的值	在JS中null的数据类型是对象	let xx=null

运算符是一类数学符号
引号能将数字转变为字符串

运算符	符号
加	+
减、乘、除	- * /
等于	===
不等于	!==
赋值运算符	=
取非	!

（1）条件语句是一种代码结构

let bestchoice = 'wo';
if (bestchoice === 'wo')
{alert('是好人');}
else {alert('不是好人')

其中 alert（），作用是在浏览器中弹出一个警告框，引号内为显示的内容。

（2）函数用来封装可复用的功能，简单说就是可以多次调用的代码

let variable=
document.querySelector('h1')
alert('前方高能！')

其中 document.querySelector和 alert是浏览器内置的函数

（3）事件为网页添加交互能力，可以捕捉浏览器操作并运行代码作为响应

-最简单的事件是点击事件
可将以下代码输入控制台，然后点击页面任意位置

document.quertSelector('html').onclick=
function() 
{alert('别烦我！');}

将事件与元素绑定有很多方法
本例将匿名函数（即未命名的函数，包含单击鼠标时运行的代码）赋值给了html的onclick属性

用JS修改标题

script(脚本）文件

window.onload =function(){
ler heading=
document.querySelector('h1');
heading.textContent ='hello!';
};

将以上代码存到脚本文件里，然后在index.html文件的< head >和< /head>之间加上

<script src="scripts/script1.js"></script>

添加图片切换器

（使用户在点击图片时自动切换到另一张图片）
更换上面脚本文件 scripts/script1.js 中内容为以下

window.onload=function(){
let image=document.querySelector('img');
image.onlick=function(){
	let my=image.getAttribute('src');
	if(my==='images/pic1.png'){
	image.setAttribute('src','images/pic3.JPG');}
	else{
	image.setAttribute('src'.'images/pic1.png');}
	}
};

添加个性化欢迎界面

1.在< body>< /body>之间添加

<button>切换用户</button>

2 .添加名字输入使得界面显示“欢迎+你的输入名字”

function setHeading(lisa){
	let heading =document.querySelector('h1');
	heading.textContent='欢迎'+lisa;}
function setUserName(){
	let myname=prompt('请输入你的名字');
	localStorage.setItem('name',myname);
	setHeading(myname)'}
let storedName=localStorage.getItem('name');
if (!storedName){
	setUserName();}
else {setHeading(storedName);}
let mybutton = document.querySelector('button');
mybutton.onlick=serUserName;
};