前端学习笔记1

最新推荐文章于 2024-05-18 06:08:21 发布
最新推荐文章于 2024-05-18 06:08:21 发布
阅读量271 收藏 1
点赞数 1
分类专栏： 前端 文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53525138/article/details/120121822
版权

前端学习笔记1

一、认识前端

前端历史

UI：作图、做成简单HTML页面

前端：html+css+js, vue/react/Ag

后端：java/PHP/Python/C#/javascript js NodeJs（服务器程序）

网页：信息展示

前端发展 及其就业
  1. 网页网站开发
  2. 后台管理系统
  3. 网页游戏开发
  4. 移动端页面开发
  5. 微信小程序、公众号、订阅号
  6. 微信小游戏
  7. APP 混合式开发

二、认识网页

网页组成

网页是由: 文字,图片,输入框,按钮,视频,音频....元素组成的
总结:
	 网页就是由HTML组成的

网页规范(万维网联盟W3C)

  ☞ 结构标准:  制作网页必须按照HTMl的标准结构去写网页
  ☞ 表现标准:  用来美化网页CSS
  ☞ 行为标准:  用来实现网页中的用户的一些动作处理 JavaScript

三、浏览器介绍

主流浏览器（有自己的内核）

在这里插入图片描述

查看网站：http://tongji.baidu.com/data/browser

内核（渲染引擎）

Trident(IE内核)： 
	IE、傲游、世界之窗浏览器、Avant、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等

Gecko(firefox)：
     Gecko(Firefox 内核)： Mozilla FireFox(火狐浏览器) 采用该内核，Gecko 的特点是代码完全公开，因此，其可开发程度很高

webkit(Safari):
	Safari 是苹果公司开发的浏览器，所用浏览器内核的名称是大名鼎鼎的 WebKit。傲游浏览器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器。

Blink：
	大部分国产浏览器最新版都采用Blink内核。二次开发。谷歌浏览器。Blink 其实是 WebKit 的分支。 

Presto(Opera) ：
	  Presto（已经废弃） 是挪威产浏览器 opera 的 "前任" 内核，为何说是 "前任"，因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了。

四、为什么要遵循WEB标准呢？

通过以上浏览器的内核不同，我们知道他们渲染或者排版的模式就有些许差异，显示就会有差别。导致用户在不同的浏览器看到同一个页面是不同的效果。

请添加图片描述

五、Web 标准构成

构成： 主要包括结构（Structure）HTML、表现（Presentation）CSS和行为（Behavior）js三个方面。

在这里插入图片描述

  • 结构标准：结构用于对网页元素进行整理和分类，咱们主要学的是HTML。 对于网页来说最重要的一部分

  • 表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS

  • 行为标准：行为是指网页模型的定义及交互的编写，咱们主要学的是 Javascript js

  • 重要的原则：页面三层分离(HTML,css，js书写的时候分开来写)

理想状态我们的源码： .HTML .css .js

六、HTML(重点)

6.1、概念

☞ HTML：  Hyper Text  Markup  Language.[  超文本标记语言 ]

   超文本: 本质就是一个文本[在网页中,用来实现页面跳转的文本  ---超链接标签]

   标记: 记号. [各种HTML标签]    标签

HTML的学习其实就是学些大量的标签


标签学习：
1. 标签长什么样子
2.作用
标签的语法
标签： <标签名></标签名>

标签语法2： <标签名>

6.2、结构

注意:
1. 我们在以后写代码(html,css,js…)遇到特殊符号,必须都是英文输入下的符号.
2. 制作一个网页必须按照html的结构去写.

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

6.3、编辑器

常见的前端使用的编辑器

在这里插入图片描述

vscode下载地址：https://code.visualstudio.com/Download

编辑器的几个插件

在这里插入图片描述
在这里插入图片描述

编辑器的使用
  1. 快速生成HTML基本结构
    1. !+tab(按下键盘的tab键)
    2. html:5 + tab
  2. 快速补充完整标签：
    1. 标签名+tab

6.4、文档类型与字符集

<!DOCTYPE html>
<!DOCTYPE html>的作用

这句话就是告诉我们使用哪个html版本？ 我们使用的是 html 5 的版本。 html有很多版本，那我们应该告诉用户和浏览器我们使用的版本号。

标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析。

注意： 一些老网站可能用的还是老版本的文档类型比如 XHTML之类的，但是我们学的是HTML5,而且HTML5的文档类型兼容很好(向下兼容的原则)，所以大家放心的使用HTML5的文档类型就好了。
html5以前的文档类型(了解即可，看看就好)：

1.XHTML1.1
	语法：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
	
2.XHTML 1.0 Frameset
	语法：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
	
3.XHTML 1.0 Transitional
	语法：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4.XHTML 1.0 Strict
	语法：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	
5.HTML 4.01 Frameset
	语法：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	
6.HTML 4.01 Strict
	语法：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	
7.HTML 5
	语法：<!DOCTYPE html>
DOCTYPE的作用

声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。

document.compatMode：

  • BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。

  • CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat。

字符集(了解)
<meta charset="UTF-8" />

utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。

gb2312 简单中文 包括6763个汉字—汉语

BIG5 繁体中文 港澳台等用

GBK包含全部中文字符 是GB2312的扩展，加入对繁体字的支持，兼容GB2312

UTF-8则包含全世界所有国家需要用到的字符—相当于英文

记住一点，以后我们统统使用UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了。

6.6、结构详解

<!doctype  html>     -----> 用来告诉浏览器文档类型, 该标签最好不要去掉.如果将该标签去掉之后,浏览器会出现一只怪异模式[浏览器不确定到底按照哪种渲染方式去渲染显示网页]

<html></html>   -----> 根标签

<head></head>   ----- 设置网页中基本的配置内容(网页的标题,网页中的样式,网页中的js代码效果....)

<title></title> ----> 设置网页标题

<body></body>  ---> 代表的是网页主体[在网页中除去地址栏看到的任何信息都要放到body标签中]

6.7、标签之间的关系

☞ 嵌套关系:  一个标签包含其他标签 [父元素和子元素]

☞ 并列关系:  标签之间不存在嵌套包含

  例如:  <head></head>  和 <body></body>

嵌套关系：

在这里插入图片描述

并列关系：

在这里插入图片描述

6.8、标签写法分类

☞ 双标签: 有开始和结束的标签.

  总结:
	  1. 如果页面中出现嵌套关系,父元素一定是双标签,子元素可以是双标签或者单标签

☞ 单标签: 只有开始没有结束
  总结:
	  1. 单独标签一定不能作为父元素.
单标签
☞ 换行标签:  <br>

☞ 横线:  <hr>

☞ 文档类型:  <!doctype  html>  

☞ 注释标签: <!-- 内容 -->     ctrl + /
双标签
☞ 双标签：  <head></head>   <body></body>

七、常用的标签

7.1、标题标签

用来设置页面中的内容标题：<h1></h1>  -  <h6></h6>
	注意：
		1.数字越大，标题标签中的默认字体越小
		2.一个页面一般只有一个h1标签，给logo使用

7.1、段落标签

用来表示文章段落或者一段文本： <p></p>
	注意：独占一行

7.2、换行标签(认识)

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签

<br />

这时如果还像在word中直接敲回车键换行就不起作用了。

7.3、水平线标签(认识)

在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，<hr />就是创建横跨网页水平线的标签。其基本语法格式如下：


<hr />是单标签

在网页中显示默认样式的水平线。

7.4、格式化（修饰）标签[双标签]

☞ 设置文字颜色或者设置文字大小:  <font></font>

	1. 改变文字颜色需要添加color属性   <font color="red">我是红颜色的文字</font>
    2.  改变文字大小需要添加size属性    <font color="orange" size="7">我是红颜色的文字</font>


☞ 设置文字是否加粗:  <strong> </strong> 或者 <b> </b>

☞ 设置文字斜体显示: <em></em> 或者  <i> </i>

☞ 设置文字删除线效果: <del></del>  或者  <s></s>

☞ 设置文字下划线效果: <ins></ins>   或者  <u></u>

7.5、div span标签(重点)

div span 是没有语义的 是我们网页布局主要的2个盒子

div 就是 division 的缩写 分割， 分区的意思 其实有很多div 来组合网页。

span, 跨度，跨距；范围

语法格式：

<div> 这是头部 </div>    <span>今日价格</span>

7.6、图片标签【多媒体标签】

☞ 图片标签: <img>
☞ 属性:  
		src:设置要显示的图片路径     <img src="1.jpg">.
		width: 设置标签宽度.
		height: 设置标签高度.
	    title:  鼠标悬停到图片上的文字提示.
		alt:   当图片无法正常显示时候的文字提示.

7.7、路径（重点）

 ☞ 绝对路径:
	 1. 如果路径中包含具体的磁盘目录:   d:/img/1.jpg
	 2. 如果路径中具有具体的网址:    www.baidu.com/img/1.jpg

 ☞ 相对路径: 必须在同一个根目录下.
	1. 如果当前页面和被访问的资源在同一个文件夹中,路径=直接设置文件名称
    2. 如果当前页面在被访问资源的上一级目录中, 路径=文件所在的文件夹名称/文件名
    3. 如果当前页面在被访问资源的下一级目录中,路径=../文件名称

7.8、超链接(重点)

本质: 就是用来实现页面跳转.
<a  href="目标页面路径"></a>

属性:
	target:设置目标页面打开方式(默认在当前页面中打开_self | _blank 新窗口中打开)
总结:
	如果希望当前页面中所有超链接跳转页面的时候,都在新窗口中打开,那么只需要在head标签中设置 base标签,给base标签设置target属性即可.
锚链接
本质: 在当前页面中跳转. 网页中的返回顶部效果
<a href="#"></a>
"#": 返回当前页面开始位置

八、特殊字符（了解）

在这里插入图片描述

注：本文在B站up叩丁狼教学视频笔记基础上二次创作。

Ibabysit
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端学习笔记（不断更新中）
01-08
1.img标签中alt：图片加载失败时的提示文字 2.a标签中的target： _blank：在新窗口中打开被链接文档 _top：在窗口主体中打开被链接文档 _self：在被点击时的同一框架中打开被链接文档（默认） _parent：在父框架中...
web前端学习笔记（一）
热门推荐
齐在的专栏
07-29 3万+
web前端的定义：是面向用户（浏览者）的互联网技术统称。主要包括Web界面的结构、Web界面的外观视觉表现以及Web界面的交互实现。 Web前端的分类：前端设计和前端架构。 HTML结构语言：超文本标记语言。 通过各种标记符号（标签）来代表网页中的内容元素、将网页中的内容结构化。 特点：通过浏览器来解析、文件名为html或htm。      2.  CSS样式语言（样式表）：实现表...
前端学习笔记(1)-HTML
weixin_34383618的博客
05-18 89
2019独角兽企业重金招聘Python工程师标准>>> ...
好纠结，写什么好了！前端工作笔记
小薇
11-12 491
一般网站的div+css修改，字与字的间距都会用word-spacing:**px;不过现在还有letter-spacing：**px;
HTML表格线
10-06 693
测试1测试2测试3测试4测试5测试6 测试1 测试2 测试3 测试4 测试5 测试6border=1 cellpadding=1 cellspacing=1 bordercolor="black" style="border:1px solid black; border-collapse:collapse; color:black; f
一片文章教你如何做前端笔记。适合前端人员的笔记软件
qq_46325260的博客
12-04 2730
1、下载软件 下载这三个一个是文件 另外两个是插件 安装上就是适合前端人员使用的插件 2、插件的安装 1.下载安装好软件打开 2.打开 文件>偏好设置>打开主体文件夹>直接把那两个css文件复制到主体文件夹 3.重启软件 关闭重新打开 4.选用Orangeheart 主题即可使用 3、如何使用好软件 3.1快捷键 标题 Ctrl + 1 2 3分别是一、二、三级标题 或许使用 # +空格键+Enter 几个#表示几级标题 前端人员最喜欢的功能之一，直接...
Web前端学习笔记
jusw123456的博客
10-19 2284
html css分别是指：1、超文本标记语言，html是一种标记语言，它包括一系列标签；2、层叠样式表，css是一种用来表现HTML或XML等文件样式的计算机语言，CSS能够对网页中元素位置的排版进行像素级精确控制。即为浏览器把代码解析后的样子就是我们看到的网站。HTML：结构CSS：样式一个网站是由N多个网页组成的。
Web前端学习笔记（1）
maxiaoxiaohaohao的博客
10-19 3514
Web前端学习笔记（1）
黑马前端学习笔记
qq_40437045的博客
03-10 1428
​​​​​​HTML第一天 一、网页 二、什么是HTML 三、HTML标签 CSS第一天 一、CSS 简介 二、 CSS 基础选择器 三、CSS 字体属性 四、CSS 文本属性 五、CSS 的引入方式 HTML第一天 网页 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页， 常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 网页生成制作: 有前端人员书写 HTML 文件, 然后浏览器打开,就能看到了网页..
h5前端学习笔记
03-21
我的h5前端学习笔记
javaweb 前端 html学习笔记
04-26
javaweb 前端 html学习笔记
前端工程师学习笔记 超级详细
10-31
正则表达式学习笔记 微信小程序学习笔记 前端部署相关笔记 前端UI库使用记录笔记 前端JS工具库使用笔记 Webpack学习笔记 Vue笔记整合 UmiJS笔记 TypeScrip笔记 Scss笔记 React笔记 ReactHooks笔记 Promise学习笔记 ...
css sprites如何使用
最新发布
codedadi的博客
05-18 390
注意：确保在定位图标时考虑到大图像的尺寸和每个图标的尺寸。例如，如果每个图标都是32x32像素的，并且它们在大图像中水平排列，那么第一个图标的background-position是0 0，第二个图标的background-position是-32px 0，依此类推。在CSS中，定义.icon类以设置所有图标的通用样式（如大小、背景图像等），并为每个图标定义特定的background-position。/* 图标2在大图像中的位置（假设每个图标宽度为32px） *//* 图标1在大图像中的位置 */
TailwindCSS在vite项目中的安装与使用
前端菜菜DayDayUp的博客
05-14 319
TailwindCSS在vite项目中的安装与使用
CSS碎碎念
◝(⑅•ᴗ•⑅)◜..°♡的博客
05-17 272
碎碎念
css去除复选框默认样式
xiaohua0708day的博客
05-17 121
类的样式，包括边框、宽度、高度等。在选中和未选中状态下，我们分别定义了不同的背景颜色，以便在复选框被选中或取消选中时改变其外观。的支持可能有所不同。你可能需要根据实际情况进行调整，以确保在各种浏览器下都能正确显示自定义的复选框样式。属性来覆盖默认的复选框外观。这些属性允许你重置浏览器的默认外观，以便你可以自定义样式。需要注意的是，不同浏览器对。在这个例子中，我们使用了。
CSS从入门到精通（CSS学习第一天）
m0_49067926的博客
05-17 762
CSS基础选择器（标签选择器、类选择器、id选择器、通配符选择器）、CSS字体属性、CSS文本属性
CSS【常用CSS样式、盒子模型、定位、浮动 、扩展样式】--学习JavaEE的day46
gangain的博客
05-17 995
CSS 概述 • CSS 指层叠样式表 (Cascading Style Sheets) • 样式定义如何显示 HTML 元素 • 是为了解决内容与表现分离的问题 • 多个样式定义可层叠为一 • 样式通常存储在样式表中
前端学习笔记 javascript
08-31
对于前端学习笔记，我可以给你一些常见的主题和要点，帮助你开始学习前端开发。 1. HTML基础： - 了解HTML的基本结构和标签 - 学习如何创建和组织网页内容 - 掌握常用的HTML标签，如标题、段落、链接、图像等 2. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Ibabysit

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值