web前端入门
2020-04-14 本文已影响0人
listems
Web入门
Web概述
安装基本软件
- text editor(文本编辑器)
- Visual Studio Code
- Sublime
- modern web browsers
- chrome
- firefox
what will your website look like
First things planning
* What is your website about
* what information are you presenting on the subject
* What does your website look like
Choosing your assets(选择你的内容
)
- Text
- paragraphs and title
- Theme color
- To choose a color ,go to the Color Picker and find a color you like,hex code(#660066) CV大法
- Images
- Goole Images, choose inages
- choose Save Image As
- Font
-
Google Fonts,choose a font.
image.png
-
Google Fonts,choose a font.
处理文件(Dealing with files)
基础了解
- A website consists of many files: text content, code, stylesheets, media content, and so on.
- 需要注意的两点
- case-sensitive(大小写吗敏感)
- 文件名用中划线 for example: my-file.html
-
目录结构
image.png
File paths
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My test images</title>
</head>
<body>
<img src="images\QQ图片20200414123637.jpg" alt=" My test image">
</body>
</html>
- To link to a target file in the same directory as the invoking HTML file, just use the filename, e.g. my-image.jpg.(同级目录直接引用)
- To reference a file in a subdirectory, write the directory name in front of the path, plus a forward slash, e.g. subdirectory/my-image.jpg.(引用子目录用目录名+斜杠的路径)
- To link to a target file in the directory above the invoking HTML file, write two dots. So for example, if index.html was inside a subfolder of test-site and my-image.jpg was inside test-site, you could reference my-image.jpg from index.html using ../my-image.jpg.（../文件名）
HTML基础(basics)
So what is HTML
- HTML consists of a series of elements（tags标签 和 Attribute 属性）
- Opening tag(开始标签：angle brackets <>)
- Closing tag(结束标签 </>)
- Content(内容文本)
- Element(元素是tags和Attribute:标签和属性)
- Nesting elements(元素嵌套)
<p>我的猫咪脾气<strong>爆</strong></p>
- Empty elements(空元素)
<img src="images\QQ图片20200414123637.jpg" alt=" My test image"
HTML文档详解
* 声明文档
* html根元素
* head 包含keywords 和编码声明之类的
* meta utf-8字符编码
* title 页面标题
* body 用户可以看到的内容，**text, images,videos, games, playable audio tracks or whatever else.**
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>测试页面</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="测试图片">
</body></html>
Images
- src(source)是地址属性 path alt(alternative)是描述内容
<img src="images/firefox-icon.png" alt="测试图片">
Marking up text
- Heading(标题)
- Paragraph(段落)
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<p>这是一个段落</p>
- List(列表)
- Unordered List(无序列表)：<ul>
- Orderd List(有序列表)：<ol>
<p>人生无聊才写代码</p>
<ul>
<li>未经审视的人生是不值得过的</li>
<li>未知生，焉知死</li></li>
<li>上帝死了</li>
<li>吾魂兮无求乎永生</li>
<li>竭尽兮人事之所能</li>
</ul>
<p>叔本华的钟</p>
- Links(链接)
<a>标签的href属性写链接地址即可
<a href="链接地址"></a>
CSS基础
javaScript基础
Hello world 小例子
let myHeading = document.querySelector('h1');
myHeading.textContent = 'Hello world!';
image.png
数据类型
- String
- Number
- Boolean
- Array 数组 let myVariable = [1,"李雷"，“韩梅梅”,10];
- object let myVariable = document.querySelector("h1"); 选择器 javascript也是万物皆对象
注释
- /* * / 或者 //
运算符
Conditionals(条件语句)
let iceCream = "华籍美人"
if (iceCream === "华籍美人"){
alert("我最喜欢巧克力冰淇淋了。")
}else{
alert("但是巧克力才是我的最爱呀")
}
image.png
Function(函数)
- 函数用来封装可复用的功能
- 定义一个函数并在Console(控制台)调用
function multiply(num1,num2){
let result = num1 * num2;
return result;
}
console
事件
- 点击事件(鼠标的点击会触发该事件)
- 将事件和元素绑定，此处把一个匿名函数赋值给了html的onclick属性
document.querySelector("html").onclick = function(){
alert("别戳我，我怕疼");
}
// 等价于
let myHTML = document.querySelector('html');
myHTML.onclick = function() {};
}
别戳，怕疼
完善示例网页
添加要给图像切换器
// 将<img>元素得到引用存放在myimage变量里面
let myImage = document.querySelector("img");
// 将这个变量的onclick事件和匿名函数进行绑定
myImage.onclick = function(){
// 获取这张这张图片的src值 getAttribute 获取属性
let mySrc = myImage.getAttribute("src");
if (mySrc === "images/firefox-icon.png"){
myImage.setAttribute("src","images/firefox2.png");
}else {
myImage.setAttribute("src","images/firefox-icon.png");
}
// 气死我了，这里刷新不出来图片的原因是/这个写成了\醉了
}
image.png
添加个性化显示信息
- 在html里面添加
<button>切换用户</button>
// 设置个性化欢迎信息
// 获取新按钮和标题的引用
let myButton = document.querySelector('button');
let myHeading = document.querySelector('h1');
// 个性化欢迎信息设置函数
function setUserName() {
let myName = prompt('请输入你的名字。');
if(!myName || myName === null) {
setUserName();
} else {
localStorage.setItem('name', myName);
myHeading.innerHTML = 'Mozilla 酷毙了，' + myName;
}
}
// 初始化代码：在页面初次读取时进行构造工作：
if(!localStorage.getItem('name')) {
setUserName();
} else {
let storedName = localStorage.getItem('name');
myHeading.textContent = 'Mozilla 酷毙了，' + storedName;
}
// 为按钮设置 onclick 事件处理器：
myButton.onclick = function() {
setUserName();
};
image.png
