小白WEB前端学习(一)

一.必要基本理论点

1.英特网和万维网的区别

Internet:在英特网上你可以找到很多联网的计算机,www(world wide web):万维网上可以找到很多,图片声音和视频

1.web是什么?web开发是什么?

Web是全球广域网,提供互联网上的信息浏览服务。Web开发包括前端和后端,前端开发主要使用HTML、CSS、JS等技术制作客户端应用(如网页),在浏览器中展示;后端开发则是编写服务器上的代码,处理数据库和业务逻辑等。

2.web前端和网页的关系

Web前端是制作网页的技术,用HTML、CSS和JavaScript来设计、美化和实现交互。网页是前端技术的成果,能在浏览器里看,还能网上共享。

3.平台,网站,网页的关系?

  • 平台:是一个广泛的概念,它提供了基础设施和框架,用于支持各种网络活动、服务或交易。平台可以包含多个网站、网页以及其他数字资源和服务。

  • 网站:是平台中的一个具体实现,由多个网页组成,通过超链接相互连接,形成一个完整的网络应用。网站用于展示内容、提供服务或进行在线交易。

  • 网页:是构成网站的基本单元,使用HTML、CSS和JavaScript等技术编写,用于在浏览器中展示特定的内容。网页是网站与用户进行交互的媒介。

因此,平台可以包含网站和网页,但网站和网页并不等同于平台。平台是一个更广泛的概念,它提供了基础设施和框架来支持各种活动和服务的进行,而网站和网页则是平台中用于展示内容、提供服务和与用户进行交互的具体实现方式。

4.Html,css,Javascript的基本了解

HTML(Hypertext Markup Language):超文本标记语言,它由一系列标签组成,用于定义页面的结构、内容和布局。HTML可以描述文本、图像、链接和其他媒体对象的显示方式,并提供了各种标记元素来控制页面的样式和交互。是网页基本框架

CSS(Cascading Style Sheets):是一种样式表语言,用于为HTML文档添加样式和外观。通过CSS,可以选择性地控制HTML元素的颜色、字体、大小、布局、边距等属性,使得网页具有更好的可读性、可访问性和用户体验。

JavaScript:是一种高级的、动态的编程语言,用于为网页添加交互和动态功能。它可以在客户端浏览器中运行,通过修改HTML和CSS,实现事件处理、数据验证、动画效果、用户输入响应等。JavaScript还可以与服务器通信,实现动态加载内容、数据交换等操作。JavaScript与HTML和CSS紧密结合,使得网页能够实现更加丰富的交互和动态效果

总理小结

1.HTML定义了网页的结构和内容,提供了基本的文档标记和元素,是网页的基础框架。2.CSS提供了网页的样式和外观控制,使得网页具有更好的视觉效果和用户友好性,增强了用户体验。3.JavaScript赋予了网页动态性和交互性,可以实现复杂的功能和用户与页面的实时交互,提升了用户体验和网站的功能性。

二.软件安装

在编辑器里写代码(常用:Visual Studio code,简称vs code),在浏览器里看效果(常用:谷歌) //安装vs code和谷歌这两个为开发者常用软件和浏览器

Vs code官网:Download Visual Studio Code - Mac, Linux, Windows

Chrome 官网:Google Chrome 网络浏览器

如果不会的话👇后面有详细教程链接可以跟着来!!!

1.安装软件

VSCode(全称:Visual Studio Code)是一款由微软开发且跨平台的免费源代码编辑器。该软件支持语法高亮、代码自动补全(又称 IntelliSense)、代码重构、查看定义功能,并且内置了命令行工具和 Git 版本控制系统。用户可以更改主题和键盘快捷方式实现个性化设置,也可以通过内置的扩展程序商店安装扩展以拓展软件功能。

详细教程CSDN:VSCode安装配置使用教程(最新版超详细保姆级含插件)一文就够了_vscode使用教程-CSDN博客

详细教程CSDN: 【Chrome】Google Chrome浏览器下载安装教程_谷歌浏览器安装csdn-CSDN博客

2.如何统一管理文件?

  • 文件资源管理器:利用VS Code左侧边栏的文件资源管理器来浏览你的文件和文件夹。你可以在这里进行新建、重命名、删除等操作。

  • 搜索功能:如果你不记得文件放在哪里,可以使用VS Code的搜索功能(快捷键通常是Ctrl+Shift+F或Cmd+Shift+F)来快速查找。

  • 拖拽操作:你可以直接在VS Code中拖拽文件来移动它们,或者将外部文件拖拽到VS Code中来打开它们。

3.高效率使用vs code?

1.安装其他插件:

1.Chinese(中文汉化包)

2.Live Service(在浏览器中实时预览页面变化)

3.HTML CSS support(写CSS时类名自动和html补全)

4.Auto Rename Tag(修改时标签同步修改匹配的另一个)

5.Bracket Pair Colorizer(给匹配的括号上色)

6.Materical lcon Theme(图标美化)

7.Image preview(鼠标悬停预览图片)

开发习惯:

1.下载插件后可以使用:鼠标右击页面--open with live setcer--可以直接在浏览器里看代码效果

2.可以在电脑--设置--按协议分配--程序里.htm和html(设置为谷歌)

3.类名见名之意,多个单词可以用-连接,例如:news-hd

4.CSS书写顺序:1.写默认属性2.盒子模型属性3.文字样式.设计样式

5.ctrl+/可以进行快速注释/两个//也可以快速注释 //在上一行进行注释,浏览器会忽略注释

6.ctrl+加号 ctrl+减号可以变化代码字号

7.文件内容要是在浏览器里实时显示要ctrl+s(保存)!!!

8.Shift+Alt+F代码格式化

9.alt+shift+👇箭头复制=上一行 // 单机那一行ctrl+c ctrl+v

10.ctrl+回车键 //不管当前字符位置,直接新开下一行

三.HTTP使用规则★

☆基本了解

HTML(Hypertext Markup Language):超文本标记语言,它由一系列标签组成,用于定义页面的结构、内容和布局。HTML可以描述文本、图像、链接和其他媒体对象的显示方式,并提供了各种标记元素来控制页面的样式和交互。是网页基本框架

  • HTML不是一种编程语言,而是一种标记语言。它没有逻辑处理能力和计算能力,因此不能动态地生成内容。相反,它主要用于静态地展示网页信息。

一般情况下,一个 HTML 标签由开始标签、元素、属性、内容和结束标签组成,元素包含标签,而标签定义了元素。

  • 元素 包含 开始标签内容结束标签

  • 开始标签 可以包含 属性

  • 属性 包含 属性名称属性值

☆HTML基础框架

1.框架案例:

PS:HTML基本框架由根元素<html>开始,包含头部<head>和主体<body>两部分

html:整个网页

head:网页头部,存放给浏览器看的代码,例如css

body:网页主体,存放给用户看的代码,例如:图片,文字

title:网页标题 //位于head标签里面

  • <!DOCTYPE html>

    • 声明为HTML5文档。

    • 告诉浏览器按照HTML5的规则来解析和渲染页面。

  • <html>

    • HTML页面的根元素。

    • 所有HTML元素都包含在<html>标签内。

  • <head>

    • 包含了文档的元数据(meta-data)。

    • 元数据不会直接显示在页面上,但会被浏览器解析和使用。

    • 常见的元数据包括:

      • <meta charset="utf-8">:定义网页的编码格式为UTF-8,确保浏览器能够正确解析和显示各种字符。

      • <meta name="viewport" content="width=device-width, initial-scale=1.0">:设置视口,使页面在移动设备上能够自适应屏幕宽度。

    字符编码历史

    • ASCII编码:用于表示英文字符,编号从0到127。

    • 扩展字符集:用于表示其他语言的字符,编号从128到255。

    • GB2312、GBK、GB18030:中国制定的字符编码标准,用于表示中文字符。

    • UNICODE:一种统一的字符编码标准,能够容纳世界上任何一个文字和标志。

    • UTF-8和UTF-16:UNICODE在网络传输中的两种编码方式,UTF-8更节省空间且兼容性好,因此被广泛应用于网页编码。

  • <title>

    • <title> 标签是 <head> 标签中唯一必须要求包含的东西,就是说写head一定要写title

    • <title>的增加有利于SEO优化

      SEO是搜索引擎优化的英文缩写。通过对网站内容调整,满足搜索引擎的排名需求

  • <body>

    • 包含了可见的页面内容。

    • 网页的主体内容都放在<body>标签内。

  • <h1>

    • 定义一个大标题。

    • 通常用于表示页面的主标题或章节标题。

  • <p>

    • 定义一个段落。

    • 用于组织文本内容,使其更加清晰易读。

2.标准框架

1.初始化HTML文档:

快捷键:

1.html:5选中摁Tab键

2.!+Tab键 (注意:一定要是英文!!!)

会默认出现👇以下的内容

2.文档内容:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

1.基本标签:

HTML,通过一系列的`标签(也称为元素)·来定义文本、图像、链接等等。HTML,标签是由尖括号包围的关键字。分为双标签和单标签:

双标签:
标签通常成对出现,包括开始标签和结束标签(也称为双标签)内容位于这两个标签之间。例如:<h1></h1>
单标签!!!:
也叫闭合标签,自闭合标签不用包围内容,所以不需要单独的结束标签。
//浏览器不识别回车键为换行
例如:
- <hr /><!-- 分割线 -->
- <br /><!-- 文本换行 -->

标签的关系(了解)

一个标签里包含盒子叫做父子关系,里面两个上下排列叫做兄弟关系

    <div class="a">
        <h1></h1>
        <h2></h2>
    </div>                      
//在嵌套关系中:.a为父,h1和h2为子  PS因为class为.
//在并列关系中:h1和h2为兄弟  

2.HTML 标题:

HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的。

例如:<h1>内容</h1> //h1-h6之间1标题越大6标题越小

PS: 浏览器会自动地在标题的前后添加空行。

//h1一个页面只用一次

1. color:设置水平线的颜色
2. width:设置水平线的长度
3. size:设置水平线的高度
4. align:设置水平线的对齐方式(默认居中),可取值left|right
​
每个元素都可以设置属性,就是属性的多少会不一样,接下来除非有需要的,其他进入css再进行具体描写,就不一一例举了QAQ

3.HTML 段落

HTML 段落是通过标签 <p> 来定义的。

例如:<p>段落</p>

<p>
 <b>加粗<b/> 
</p>
下面属性应用例:<p color="blue">我喜欢你</p>

4.HTML链接:

☆URL讲解:
统一资源定位器(URL)用于定位万维网上的文档(或其他数据)。
URL 是一个网页地址,scheme(计划) - -定义因特网服务的类型。
以下是一些常见的 URL Scheme:
​
  Scheme    访问               用于...                 
  http      超文本传输协议      以 http:// 开头的普通网页。不加密。
  https     安全超文本传输协议   安全网页,加密所有信息交换。        
  ftp       文件传输协议        用于将文件下载或上传至网站。        
  file                        计算机上的文件。              

HTML 链接是通过标签 <a> 来定义的。

1.路径:
相对路径:

两者相对关系,两者在同⼀路径下可以直接访问

  1. ⼦级关系: /

  2. ⽗级关系: ../

  3. 同级关系: ./

.当前文件所在的文件夹
..当前文件上一级文件夹
/进入某个文件夹里面

./进入当前文件夹,../进入上一级文件夹

绝对路径:

绝对路径是电脑的盘符存储与访问的具体地址

E:\aa\1.jpg
<img src="E:\itbaizhanCode\1.jpg">
案例:<img src="https://pic3.zhimg.com/v25fb13110e1de13d4c11e6e7f5b8026da_r.jpg">   //浏览器里的图片位置,后期HTML图像里会讲

跳转到软件里的页面(复制到自己写的网页,相对路径):

2.超链接

跳转到下一个网页:点我进行跳转

跳转链接到新标签页

点我增加一标签页

跳转网上的地址(复制地址栏的地址,绝对路径,http:..):

导航链接:例如:这是一个链接

下载链接:希望链接用于下载文件而不是导航到另一个网页,可以使用 download 属性。例如:

下载这个文档

不进行跳转的链接:不跳转标签

默认情况下,链接将以,以下形式出现在浏览器中:

  1. 一个未访问过的链接显示为蓝色字体并带有下划线。

  2. 访问过的链接显示为紫色并带有下划线。

  3. 点击链接时,链接显示为红色并带有下划线。

a标签链接是默认并排的,如果想让他们两个放不同行,可以使用换行标签:<br>

链接的属性值,在浏览器里的地址栏里面复制地址,填写在href里

3.锚点:

超链接可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

跳转到当前文档的某个部分的形式就是“锚点”

跳转到当前页

<p id="hello">文本信息</p>

这样在浏览器里点击就会自动跳转到id为hello哪里,然后显示:文本信息

跳转到当前页<p id="hello">文本信息</p>

5.HTML文本

一般用左边的,左边的用于强调含义

当然还有别的例如:<sub> 定义下标字 <sup> 定义上标字

span就是基础文本元素没有特定的含义,方便后期用于CSS添加样式

5.HTML 图像:


src 指 "source"。源属性的值是图像的 URL 地址

在 HTML 中,图像由 <img> 标签定,用于在网页中嵌入图像。

<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。

<img> 标签有两个必需属性:

  • src - 指定图像的路径 //必填

  • alt - 用于图片无法显示时候的文字 //替换文本

  • title-鼠标悬停在图片上显示的文字 //提示文本

  • width-值为数字,没有单位 // 图片的宽度

  • height-值为数字,没有单位 //图片的高度

    浏览器缩放图片,默认是等比例缩放

img标签内如何使用src?

首先保证是打开的为文件夹,然后把图片拖进同一目录下

分为绝对路径和相对路径,绝对的话就是直接从根目录开始写路径,相对的话就是根据自身位置写

// 缩放图片完全覆盖,不会拉伸或者挤扁

object-fit: cover;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值