HTML笔记——①HTML简介和基本结构、vscode常用设置

本系列笔记为nmy专属定制修改

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

  • 一、 HTML背景
    • 1.1 什么是网页
    • 1.2 HTML、CSS、JS简介
    • 1.3 网站开发的分工
    • 1.4 Web标准
  • 二 HTML的基础
    • 2.1 标签
    • 2.2 基础代码快捷键
    • 2.3 特殊字符
    • 2.4 HTML注释
  • 三 基本结构标签
  • 四 VS Code编辑器
    • 4.1 VS Code简介
    • 4.2 VS Code常用快捷键
    • 4.3 VS Code常用扩展
    • 4.4 VS Code设置
      • 4.4.1 自动换行
      • 4.4.2 拆分编辑器(对照使用)
      • 4.4.3 鼠标滑轮改变字体大小

一、 HTML背景

1.1 什么是网页

  1. 网站是指在因特网上根据一定的规则,使用 HTML 等制作的用于展示特定内容相关的网页集合。

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

  3. 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. 标签:由尖括号包围的关键词,例如
  2. HTML 标签通常是成对出现的,例如称为双标签。
  3. 有些特殊的标签必须是单个标签,例如
    ,我们称为单标签。
  4. 标签可以组合嵌套

2.2 基础代码快捷键

  1. 单词 + Tab可以快捷创建标签
  2. *+ 数字可以快速创建多行
  3. {}填充标签内容
    如:div{1111}*5

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

HTML笔记——①HTML简介和基本结构、vscode常用设置_第1张图片
标签属性
修饰标签,设置当前标签功能(可设置多个属性)

2.3 特殊字符

  1. 格式: & + 字符 + ;
  2. 目的是解决冲突,实现添加左右尖括号、多个空格等
  3. < >   &#数字

特殊字符查询
HTML笔记——①HTML简介和基本结构、vscode常用设置_第2张图片

2.4 HTML注释

  1. 注释是在浏览器中看不到,只能在代码中看到的部分
  2. 写法:
  3. 意义:
  • 把暂时不用的代码注释起来,方便以后使用。

  • 对开发人员进行提示。

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

三 基本结构标签

每个网页都会有一个基本的结构标签(也称为骨架标签),页面内容也是在这些基本标签上书写
HTML笔记——①HTML简介和基本结构、vscode常用设置_第3张图片

DOCTYPE html>
<html lang="en">
<head>
    <title>这里是titletitle>
head>
<body>
    
body>
html>

在这里插入图片描述

四 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 快速生成许多字符

4.3 VS Code常用扩展

左侧扩展可安装相应的扩展程序

扩展名 具体功能
Chinese (Simplified) (简体中文) 中文语言包(重启生效)
View In Browser Ctrl+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 snippets ES6语法智能提示,以及快速输入,不仅仅支持.js,还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间
Path Intellisensev 自动提示文件路径,支持各种快速引入文
jQuery Code Snippets jQuery代码智能提示
Icon Fonts 这是一个能够在项目中添加图标字体的插件。该插件支持超过 20 个热门的图标集,包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。
htmltagwrap ALT+自动添加标签(默认为p)

4.4 VS Code设置

4.4.1 自动换行

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

4.4.2 拆分编辑器(对照使用)

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

4.4.3 鼠标滑轮改变字体大小

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

HTML笔记——①HTML简介和基本结构、vscode常用设置_第4张图片

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

HTML笔记——①HTML简介和基本结构、vscode常用设置_第5张图片

你可能感兴趣的:(web学习,前端,css,javascript)