Web前端学习笔记

已于 2022-10-19 17:56:49 修改
阅读量2.1k 收藏
点赞数
文章标签： 前端 学习
于 2022-10-18 13:59:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rrrrrhhh/article/details/127374133
版权

[声明]学习于【千锋教育_Web前端最全教程从入门到精通（HTML+CSS全套） -哔哩哔哩】

1,了解HTML,CSS

1.1什么是HTtML

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 [1]
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便

1.2什么是CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

2学习vs code

2.1下载编辑器

https://code.visualstudio.com/

2.2常用快捷键

保存ctrl+s
全选ctrl+a
剪切ctrl+x
前进ctrl+y
撤销ctrl+z
从头选中一行shift+end
从尾选中一行shift+home
复制一行shift+alt
快速移动一行alt+up/down
向后缩进tab
向前缩进tab+shift

2.3多光标

多光标选择alt+鼠标左键
选择相同元素ctrl+d

3Chrome

https://ww.google.cn/int/zh-cn/chrome
目前市场上主流的浏览器有：
Chrome
Safari
Firefox
IE/Edge
Opera
UC / 360 / 搜狗 / 猎豹 / QQ /

4，了解网站开发

4.1

在这里插入图片描述

5，Web前端三大核心技术

5.1

在这里插入图片描述

5.2 HTML:

超文本：文本+非文本（图片，视频，音频）
标记：<单词>单标签/双标签
语言：编程语言

5.3 标签

可以上下排列，组合嵌套
创建标签：tab+单词
标签属性：修饰标签，设置当前标签的一些功能
<标签 属性1=“值1” 属性2=“值2”>

5.4HTML常见标签

在这里插入图片描述

6，HTML的初始代码

<!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>
</head>
<body>
    
</body>
</html>

快捷键：！+tab

7.HTML注释

7.1注释的写法

在这里插入图片描述
在浏览器中看不到，只能在代码中看到

7.2注释的意义

  • 1.将暂时不用的代码注释掉，方面使用
  • 2.对开发人员提示

7.3注释快捷键

  • 1.shift+alt+a
  • 2.ctr+/
  • ` <!–

    南京邮电大学通达学院

    简介

    南京邮电大学通达学院(Tongda College of Nanjing University of Posts and Telecommunications)位于江苏省扬州市，学院始建于1999年，是经中华人民共和国教育部批准、由南京邮电大学创办的全日制普通本科高等学校（独立学院）。 [1] 截止2022年9月，学院占地893亩，现有在校生10428人

    -->`

8HTML语义化

在这里插入图片描述
将https：//5o.glthub.lo拖拽到书签,添加到书签栏，可以提取网页内容

9标题与段落

9.1标题，双标签

<h1>标题</h1>
<h2>标题</h2>

在一个网页中只能有一个h1

9.2段落，双标签

<p></p>

<!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>
</head>
<body>
    <h1>南京邮电大学通达学院</h1>
    <h2>简介</h2>
    <p>南京邮电大学通达学院(Tongda College of Nanjing University of Posts and Telecommunications)位于江苏省扬州市，学院始建于1999年，是经中华人民共和国教育部批准、由南京邮电大学创办的全日制普通本科高等学校（独立学院）。 [1] 
        截止2022年9月，学院占地893亩，现有在校生10428人</p>
</body>
</html>

在这里插入图片描述

10文本修饰标签

10.1强调标签

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

<p>
     <strong>web前端</strong>
    <em>web前端</em>
    </p>
    <p>sin<sup>2</sup>+cos<sup>2</sup>=1
        H<sub>2</sub>o
    </p>
    促销：原价<del>100</del>，现价<ins>50</ins>

11图片

在这里插入图片描述

 <img src="" alt="" title="" width="" height="">

12引入文件的地址路径

12.1相对路径

在这里插入图片描述

 <img src="./dog.ipg" alt="">
    <img src="../img/animal/dog.igp" alt="">

12，2绝对路径

在这里插入图片描述

 <img src="/img/animal/dog.igp" alt="">

13链接

a 双标签

在这里插入图片描述

在这里插入图片描述

<!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>
</head>
<body>
    <a href="http:ww.baidu.com">访问百度</a>
</body>
</html>

在这里插入图片描述

<!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>
</head>
<body>
    <a href="http:ww.baidu.com"target="_blank">访问百度</a>
</body>
</html>

在这里插入图片描述

 <base target="_blank"
</head>
<body>
    <a href="http:ww.baidu.com"target="_blank">访问百度</a>
    <a href="http:ww.baidu.com"target="_blank">访问百度</a>
    <a href="http:ww.baidu.com"target="_blank">访问百度</a>
    <a href="http:ww.baidu.com"target="_blank">访问百度</a>
</body>
</html>

14 跳转锚点

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <a href="#qq">QQ</a>
    <a href="#wecat">WECAT</a>
    <h1 id="qq">qq简介</h1>
    <p>简介段落</p>
    <p>简介段落</p>
    <p>简介段落</p>
    <p>简介段落</p>
    <p>简介段落</p>
    <p>简介段落</p>
    <p>简介段落</p>
    <h2 id="wecat">wecat简介</h2>
    <p>简介段落</p>
    <p>简介段落</p>
    <p>简介段落</p>
    <p>简介段落</p>
    <p>简介段落</p>
    <p>简介段落</p>
    <p>简介段落</p>
    
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <a href="#qq">QQ</a>
    <a href="#wecat">WECAT</a>
    <a name="qq"></a>
    <h1>qq简介</h1>
    <p>简介段落</p>
    <p>简介段落</p>
    <p>简介段落</p>
    <p>简介段落</p>
    <p>简介段落</p>
    <p>简介段落</p>
    <p>简介段落</p>
    <a name="wecat"></a>
    <h2>wecat简介</h2>
    <p>简介段落</p>
    <p>简介段落</p>
    <p>简介段落</p>
    <p>简介段落</p>
    <p>简介段落</p>
    <p>简介段落</p>
    <p>简介段落</p>
    
</body>
</html>

在这里插入图片描述

15.特殊符号在这里插入图片描述

<!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>
</head>
<body>
    <p> 
        hihi&nbsp&nbsp&nbsphello
        &lt;css&gt;
    </p>
</body>
</html>

在这里插入图片描述

16无序列表

<!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>
</head>
<body>
   <ul>
    <li><a href="https://news.sina.com.cn/gov/xlxw/2022-10-19/doc-imqqsmrp3071958.shtml"><strong>真理之光照亮复兴之路</strong></a></li>
    <li><a href="https://news.sina.com.cn/c/2022-10-19/doc-imqmmthc1415327.shtml">曾被韩国垄断</a></li>
   </ul>

</body>
</html>

在这里插入图片描述

17有序列表

在这里插入图片描述

<!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>
</head>
<body>
   <ol>
    <li><a href="#"><strong>web前端</strong></a></li>
    <li><a href="#"></a>HTML</li>
   </ol>

</body>
</html>

在这里插入图片描述

在这里插入图片描述

<ol type="A">
    <li><a href="https://news.sina.com.cn/gov/xlxw/2022-10-19/doc-imqqsmrp3071958.shtml"><strong>真理之光照亮复兴之路</strong></a></li>
    <li><a href="https://news.sina.com.cn/c/2022-10-19/doc-imqmmthc1415327.shtml">曾被韩国垄断</a></li>
   </ol>

18.定义列表

<!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>
</head>
<body>
<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
    <dt>JAVSCRIPT</dt>
    <dd>网页脚本语言</dd>
</dl>

</body>
</html>

在这里插入图片描述

rrrrrhhh
关注
HTTMl和CCS基础操作
weixin_46054835的博客
01-14 1675
什么是ＨＴＭＬ ＨＴＭＬ指的是的超文本标记语言 HTML 指的是超文本标记语言 (Hyper Text Markup Language) 超文本：就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素； 标 记：一种标记符，可以告诉浏览器如何显示其中的内容； 比如：我很粗 ，就是一种标记符 HTML 不是一种编程语言（因为HTML中没有变量，流程控制等），它是一种标记语言 (...
Web前端学习笔记（1
weixin_47016359的博客
03-16 912
Web前端学习笔记1 一、第一个网页 第一次接触web前端第一个代码可以试着用记事本逐行敲代码，保存的时候要记着文件名的后缀为.html，保存类型为所有文件，编码选中UTF-8 举个栗子： <!Doctype Html> <html lang ="en"> <head> <meta charset = "UTF-8"> <!--title是网页标题--> <!-- 注释标签--> &
HtTML基础
wan123456789789的博客
07-12 279
前面说的，其实Chrome浏览器的内核名为chromium，也就是现在大家习惯称的chrome内核，而且按照大家的误解，一直认为的chrome内核就是由苹果公司最先选择的算是KHTML引擎的分支-Webkit，这大概是苹果公司至今说不清道不明的伤痛吧~~chromium fork 自开源引擎 webkit，却把 WebKit 的代码梳理得可读性提高很多，所以以前可能需要一天进行编译的代码，现在只要两个小时就能搞定。URL是对互联网上得到的资源的位置和访问方法的一种简洁表示，是互联网上标准资源的地址。
Java全栈课程之HTML详解
Annzz123的博客
01-25 936
HTML：Hyper Text Markup Language（超文本标记语言）
HTTML多媒体标记与框架标记
weixin_34343308的博客
09-25 224
2019独角兽企业重金招聘Python工程师标准>>> ...
HTTML+css|+div
04-18
好东西啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
Web前端学习笔记（1）
maxiaoxiaohaohao的博客
10-19 3719
Web前端学习笔记（1）
web前端学习笔记三
别不开心ovo
09-05 412
JavaScript
web前端学习笔记以及代码
02-24
本压缩包“web前端学习笔记以及代码”显然包含了一套完整的前端学习资源，包括理论知识和实践代码，这对于初学者或者希望提升技能的开发者来说非常有价值。 首先，前端开发通常涵盖以下关键知识点： 1. HTML...
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar
04-18
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar ...
web前端学习笔记.docx编程资料
04-06
### Web前端学习笔记知识点概述 #### 一、Web基础知识 ##### 1.1 Web与Internet - **Internet**: 是一个全球性的计算机互联网络，提供多种服务如Telnet、Email、WWW、BBS、FTP等。它基于分组交换原理及TCP/IP协议...
超详细的web前端基础学习笔记
06-28
#### 超详细的web前端基础学习笔记 ##### 前端课程介绍 - **HTML**：HTML (HyperText Markup Language) 是一种标记语言，用于定义网页的结构与内容。它如同网页的骨架，为网页提供基本框架。 - **CSS**：CSS ...
初步了解HTML
weixin_43641202的博客
03-23 610
初步了解HTMLHTML的基本结构网页的基本信息<title>标签：<meta>标签：网页中常见的基本标签标题标签 HTML的基本结构     如下所示 <html> <head> </head> <body> </body> </html> 一个HTML文档主要分为两个部分，头部（head）和主体（body）两个部分。 网页的基本信息 一个完整
[项目][WebServer][日志设计]详细讲解
SnowK博客
09-11 4429
[项目][WebServer][日志设计]详细讲解
easyexcel模板导出并且公式自动计算的方法
weixin_47615289的博客
09-11 388
【代码】easyexcel模板导出并且公式自动计算的方法。
经验笔记：Web 浏览器存储手段
qq_45831414的博客
09-10 875
以上就是使用 IndexedDB 的基本步骤。IndexedDB 提供了强大的数据存储能力，并且可以通过索引来优化数据检索性能。在实际应用中，可能还需要处理更复杂的场景，比如数据迁移、错误处理等。务必确保你的代码能够妥善处理各种异常情况。
JS笔记
最新发布
2201_76100326的博客
09-11 502
Math对象属于Javascript内置对象，无需实例化（不需要添加new ），可以直接使用。只有一个Math.PI的属性。
Java Web前端学习笔记：HTML到AJAX基础
"这篇文档包含了作者在学习Java Web前端时的笔记，主要涵盖了前端开发的基础知识，包括HTML、CSS、JavaScript、DOM编程、jQuery框架以及AJAX基础。" 本文档详细介绍了Java Web前端开发中的核心技术和元素，首先从...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值