HTML笔记——①HTML简介基础和入门、Vscode常用设置

已于 2023-10-12 08:33:45 修改
阅读量1.7k 收藏 2
点赞数 3
分类专栏： 前端学习 文章标签： 前端 css javascript
于 2022-10-20 21:12:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanqiu12138/article/details/127424450
版权
本系列笔记为nmy专属定制修改

HTML笔记——①HTML简介和基本结构

一、 HTML背景

1.1 什么是网页

  1. 网页是构成网站的基本元素，通常是 HTML 格式的文件。它通常由图片、链接、文字、声音、视频等元素组成。

  2. f12呼出控制台，可以查看网页源代码

1.2 HTML、CSS、JS简介

  • 是做网站基础编程语言，一般情况下需要配合使用

HTML(HyperText Markup Language)的全称为超文本标记语言，是一种标记语言。它包括一系列标签．将Internet资源连接为一个整体。

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。

CSS叫做层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

JavaScript是一种用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。

1.3 网站开发的分工

岗位/语言web前端开发工程师（H5开发）
UI设计师负责设计稿
web前端开发工程师（H5开发）将设计稿以代码形式实现，将数据库里的数据显示到页面
web后端开发工程师存储数据、数据的交互（数据库）
HTML结构
CSS样式
JavaScript交互行为

1.4 Web标准

Web 标准是由W3C（World Wide Web Consortium万维网联盟）和其他标准化组织制定的一系列标准的集合。
主要包括 《结构Structure》 、《表现（Presentation）》和《行为（Behavior）》三个方面。

二 HTML的基础

2.1 标签

  1. 标签：由尖括号包围的关键词，例如 <html>。
  2. HTML 标签通常是成对出现的，例如<html>和 </html>称为双标签。
  3. 有些特殊的标签必须是单个标签，例如<br>，我们称为单标签。
  4. 标签可以组合嵌套

2.2 基础代码快捷键

  1. 单词 + Tab可以快捷创建标签
  2. *+ 数字可以快速创建多行
  3. {}填充标签内容
    如：div{1111}*5
  4. 标签属性：修饰标签，设置当前标签功能（可设置多个属性）

不同浏览器对标签的兼容性不一
我们可以在https://caniuse.com/查询各浏览器对标签的兼容情况

各种标签含义

2.3 特殊字符

  1. 格式： & + 字符 + ;
  2. 目的是解决冲突，实现添加左右尖括号、多个空格等
  3. &lt; &gt; &nbsp; &emsp; &ensp; &#数字

特殊字符查询
在这里插入图片描述

2.4 HTML注释

  1. 注释是在浏览器中看不到，只能在代码中看到的部分
  2. 写法：<!-- 注释的内容 -->
  3. 意义：

  • 把暂时不用的代码注释起来，方便以后使用。

  • 注释错误代码寻找错误代码位置

  • 对开发人员进行提示。

    快捷添加注释：
    1. ctrl + / 单行注释
    2. shift + alt + a 选中注释

三 VS Code编辑器

4.1 VS Code简介

visual studio code(简称vs code)是一款轻量级的Web集成开发环境，来自微软，是一个开源的、基于Electron的轻量代码编辑器。 下载链接：https://code.visualstudio.com/

4.2 VS Code常用快捷键

VS Code常用快捷键作用
ctrl+n新建文件
ctrl+s保存
ctrl+a全选
ctrl+z撤销
ctrl+y还原
ctrl+d选择相同项
ctrl+f查找
ctrl+h替换
ctrl+shift+f自动排版所选位置
shift+end从头选中一行
shift+home从尾部选中一行
shift+alt+ ↓快速复制一行
alt+z自动换行
alt+↑/↓快速移动一行
alt+左键多光标
tab向后缩进
tab+shift向前缩进
ctrl+ +/- 调整文字大小
lorem快速生成许多字符
VS Code系统快捷键作用
ctrl+B打开/关闭资源管理器
ctrl+s保存
ctrl+a全选
## 4.3 VS Code常用扩展 左侧**扩展**可安装相应的扩展程序
扩展名具体功能
Chinese (Simplified) (简体中文)中文语言包（重启生效）
View In BrowserCtrl+F1预览html文件
Open in Browser右键在浏览器中查看
HTML Boilerplate你只需在空文件中输入 html，选中html:5即可生成一个新的网页文件，也可以输入一个感叹号
vscode-browser-plus在编辑器内预览HTML(快捷键Ctrl+F1)
CSS Peek使用此插件，你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码
Color Info这个便捷的插件，将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了。
Auto Close Tag这个便捷的插件，将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了。
Auto Close Tag自动闭合HTML/XML标签
Auto Rename Tag自动完成另一侧标签的同步修改
HTML Snippets智能提示HTML标签，以及标签含义
JavaScript(ES6) code snippetsES6语法智能提示，以及快速输入，不仅仅支持.js，还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间
Path Intellisensev自动提示文件路径，支持各种快速引入文
jQuery Code SnippetsjQuery代码智能提示
Icon Fonts这是一个能够在项目中添加图标字体的插件。该插件支持超过 20 个热门的图标集，包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。
htmltagwrapALT+自动添加标签（默认为p）

4.4 VS Code设置

4.4.1 自动换行

文件——>首选项——>设置word wrap
（设置后右键格式化或者ctrl+k）

4.4.2 拆分编辑器（对照使用）

点击右上角按钮
在这里插入图片描述

4.4.3 鼠标滑轮改变字体大小

  1. 首选项——>设置
  2. 找到字体，点击 “在setting.json中编辑”，进入编辑页面；

在这里插入图片描述

  1. 在json文件中新增
,
"editor.mouseWheelZoom": true,

在这里插入图片描述

yanqiu12138
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
HTML笔记——千锋Ghost老师_2019前端入门
http____的博客
11-30 853
B站千锋教育了解 VSCode 编辑器HTML基本结构和属性初始代码HTML注释标题与段落文本修饰标签图片标签与图片属性引入文件的地址路径跳转链接跳转锚点特殊符号列表标签表格表单表格表单组合div 与 span 了解 VSCode 编辑器 Shift + Alt + ↓：快速复制该行内容到下一行 Alt + ↑或↓：将该行内容快速移动一行 Tab键：向后缩进 Tab + Shift：向前缩进 多光标：Alt + 鼠标左键 将光标快速移动到行首/行尾：Home/End，在笔记本上这两个键和方向键为同一个键，
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
【狂神Java学习笔记——前端入门——HTML、CSS、JavaScript学习代码】是针对初学者的一份详实的学习资料，这份笔记记录了跟随B站知名up主“遇见狂神说”的java系列视频中关于前端开发的基础内容。笔记内容不仅与视频...
前端开发学习笔记 1 （基础概念、HTML5基础、前端开发工具VSCode基本介绍）
hanmo22357的博客
03-29 1068
基本介绍：VSCode是前端开发人员常用的一款开发工具，它能够自动生成HTML文件的基本结构，并且提供类型丰富的插件帮助前端开发人员进行编程和代码调试维护，因此推荐使用该工具进行前端开发。
实训内容总结 day01（学习使用vscode，初识HTML和CSS）
weixin_68872774的博客
06-26 800
记录学校实训，第一节课学习的基本内容，有关HTML的一些基础知识以及vscode的使用。
web前端基础知识学习笔记——HTML基础
m0_63507677的博客
07-24 234
web前端基础知识学习笔记——HTML基础
01 Web前端HTML简介——笔记
m0_46664215的博客
12-03 102
注：本笔记根据bilibili-黑马程序员pink老师前端入门教程编写目录1. 网页1.1 什么是网页1.2 什么是HTML1.3 网页的形成2. 常用浏览器及其内核2.1 常用浏览器2.2 浏览器内核3. Web标准3.1 为什么需要Web标准3.2 Web标准的构成3.3 Web标准的优点网站：根据因特网上规则，用HTML等制作的用于展示特定内容的网页集合。网页：①网站中的一页，常为HTML格式文件，通过浏览器阅读。②是构成网站的基本元素。常由图片、链接、文字、声音、视频等元素组成，.htm .html
HTML零基础入门教程完整版
热门推荐
哈哈
09-11 2万+
HTML零基础入门教程完整版
学习笔记——Makefile基础及入门1
ZW_finder的博客
03-16 968
文章为本人的Makefile学习记录，罗列了Makefile中一些必要掌握与常用的知识点，希望和大家一起学习共同进步
Html5学习笔记——详细附图
Concise200的博客
11-30 1129
HTML5和CSS3入门1. HTML51.1 基础知识 1. HTML5 1.1 基础知识 1.前端的代码要通过 **浏览器转化（解析和渲染）**成用户看到的网页。 2.
Java Web——前端HTML入门
Sakurapaid的博客
11-12 479
简单的了解HTML相关知识
HTML学习笔记--基础认知和常用标签
m0_53152337的博客
05-23 192
一、HTML认知 通俗：HTML——>身体，CSS——>衣服，JS——>动作。
Python学习笔记——大数据之Spark简介与环境搭建
02-24
其他Spark的库都是构建在RDD和SparkCore之上的。SparkSQL：提供通过ApacheHive的SQL变体Hive查询语言（HiveQL）与Spark进行交互的API。每个数据库表被当做一个RDD，SparkSQL查询被转换为Spark操作。对熟悉Hive和...
Web前端学习笔记——HTML基础.docx
11-22
Web 前端学习笔记——HTML 基础 本文主要介绍了 Web 前端学习笔记——HTML 基础相关知识点，涵盖了浏览器内核、Web 标准、HTML 语言等方面。 一、浏览器内核 浏览器内核是指浏览器核心引擎，负责解析和渲染网页。...
html基础元素与常用参数-笔记
05-04
记录大部分常用的html元素，适合新手及没有目标人群使用，仅为html元素，并不包含css与JavaScript
前端Web-JavaScript(上)
Yu2uki的博客
07-31 1387
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
高德地图离线版 使用高德地图api的方法
最新发布
m0_62336925的博客
08-02 304
然因为高德地图的瓦片地图太大，所以要让后端部署下 前端直接调用 如果本地 直接找到瓦片图路径就可以。这个代码把你想用的方法名保存到本地。这个时候会报错 因为没有这个方法。然后就可以正常使用这个方法拉。然后使用他的离线方法。找到对应的名字 复制。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 882
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
前端面试：项目细节重难点问题分享（十四）
weixin_49062485的博客
08-02 324
更多详情：爱米的前端小笔记（csdn~xitujuejin~zhiHu~Baidu~小红shu）同步更新，等你来看！都是利用下班时间整理的，整理不易，大家多多👍💛➕🤔哦！你们的支持才是我不断更新的动力！
cda备考学习学习笔记——基础知识篇(二)
09-18
cda备考学习学习笔记——基础知识篇(二)主要涉及了计算机科学与技术领域的基本概念和知识。 首先，它介绍了计算机网络的基础知识。网络是将多台计算机通过通信链路连接起来，使它们能够相互通信和共享资源的系统。笔记中详细介绍了网络的组成、拓扑结构和通信协议等重要内容。 其次，笔记还解释了计算机系统的基本组成。计算机系统由硬件和软件两部分组成，其中硬件包括中央处理器、存储器、输入输出设备等，而软件则分为系统软件和应用软件。笔记详细介绍了各种硬件和软件的功能和作用。 此外，笔记还对数据库管理系统进行了介绍。数据库管理系统是一种用于管理和组织数据的软件系统，它能够实现数据的存储、检索和更新等操作。笔记中详细介绍了数据库的概念、结构和操作等内容。 最后，笔记还包括了算法和数据结构的基础知识。算法是解决问题的一系列步骤和规则，而数据结构则是组织和存储数据的方式。笔记中介绍了常用的算法和数据结构，如排序算法、树和图等。 总之，通过学习CDA备考学习笔记中的基础知识篇(二)，我们能够更好地理解计算机网络、计算机系统、数据库管理系统以及算法和数据结构等相关概念和知识。这些基础知识对于我们深入研究计算机科学与技术领域是非常重要的，也为我们日后的学习和工作奠定了坚实的基础。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值