【HTML】前端网页开发工具Vscode中DOCTYPE和lang以及字符集的作用

article/2025/10/2 20:34:46

 😊博主页面:鱿年年的学习之路

👉博主推荐专栏:《前端基础学习》👈

​💓博主格言:追风赶月莫停留,平芜尽处是春山❤️

 

目录

前言

Vscode工具生成骨架标签新增代码

一、<!DOCTYPE>标签

1.文档类型声明标签

二、lang语言种类

三、Charset字符集

四、总结


前言

下载安装并解析好前端网页开发工具Vscode,新建一个【HTML文件】输入【!】,自动生成您人生中的第一个页面代码。列如:

【HTML文件】

 【!】注意:英文状态下输入

 【回车自动生成】

Vscode工具生成骨架标签新增代码

一、<!DOCTYPE>标签

1.文档类型声明标签

<!DOCTYPE>文档类型声明,作用就是告诉浏览器使用哪种HTML版本来显示网页。

<!DOCTYPE html>

这句代码的意思是:当前页面采取的是HTML5版来显示页面。

注意

(1).<!DOCTYPE>声明位于文档中的最前面的位置,处于<html>标签之前。

(2).<!DOCTYPE>不是一个HTML标签,它就是文档类型声明标签。

二、lang语言种类

用来定义当前文档显示的语言。

1.en定义语言为英文

2.zh-CN定义语言为中文

简单来说,定义为en就是英文网页,定义为zh-CN就是中文网页。

其实对于文档显示来说,定义成en的文档也可以显示中文,定义为zh-CN的文档特可以显示英文。这个属性对于浏览器和搜索引擎(百度.谷歌等)还是有作用的。

三、Charset字符集

字符集(Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。

在<head>标签内,可以通过<meat>标签的charset属性来规定HTML文档应该使用哪种字符编码。

<meat charset="UTF-8"/>

charset常用的值有:GB2312(简体中文)、BIG5(繁体中文)、GBK(包含简体和繁体中文)和UTF-8,其中UTF-8也称为万国码,基本包含了全世界所有国家需要用到的字符。

注意:上面语法是必须要写的代码,否则可能引起乱码的情况。一般情况下,统一使用"UTF-8"编码,尽量统一写成标准的"UTF-8",不要写成"utf8"和"UTF8"。

四、总结

1.以上三个代码Vscode自动生成,基本不需要我们重写。

2.<!DOCTYPE html> 文档类型声明标签,告诉浏览器这个页面采取html5版本来显示页面。

3.<html lang="en">告诉浏览器或者搜索引擎这是一个英文网站,本页面采取英文来显示。

4.<meat charset="UTF-8"/>必须写,采取UTF-8来保存文字,如果不写就会出现乱码的情况。


http://chatgpt.dhexx.cn/article/EBfdWYgX.shtml

相关文章

HTML(一):开发工具

1.1、开发工具 目前前端开发工具繁多&#xff0c;例如Dreamweaver、Sublime、Hbuilder、Vscide等等。对于新手开发来说&#xff0c;我比较推荐使用HBuilder。 1.2、使用HBuilder 我们在开发的时候&#xff0c;都需要新建一个HTML页面&#xff0c;我都在页面中编写代码。 HBu…

Html5开发工具介绍

14款主流HTML5开发工具 http://sanwen8.cn/p/273vS6p.html HTML5被看做是web开发者创建流行web应用的利器&#xff0c;增加了对视频和Canvas 2D的支持。HTML5的诞生还让人们重新审视浏览器专用多媒体插件的未来&#xff0c;如Adobe的Flash和微软的Silverlight&#xff0c;HTML…

HTML(四)——HTML标签(三)——开发工具插件安装

目录 开发工具 VScode的使用 VScode工具生成骨架标签新增代码 4.3.1 文档类型声明标签 4.3.2 lang语言种类 4.3.3 字符集 总结 VSCode插件安装 安装方法 推荐插件 代码实现 实现结果 开发工具 VScode的使用 双击打开软件新建文件&#xff08;ctrlN&#xff09;保…

HTML简介与开发工具推荐[初学HTML](一)

HTML简介 HTML&#xff08; Hyper Text Markup Language&#xff09;&#xff0c;即超文本标记语言。 1. 基础结构 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible"…

HTML的怎么使用,开发工具以及常用标签。

HTML的怎么使用&#xff0c;开发工具以及常用标签。 欢迎大家去博客冰山一树Sankey&#xff0c;浏览效果更好。直接右上角搜索该文字标题即可 CSDN主页&#xff1a;CSDN主页-冰山一树Sankey 博客园主页&#xff1a;博客园主页-冰山一树Sankey 前端学习&#xff1a;学习地址&…

html - 1.开发工具

HTML简介 HTML(Hyper Text Markup Language)超文本标记语言&#xff0c;是一种标记语言。它包括一系列标签&#xff0e;通过这些标签可以将网络上的文档格式统一&#xff0c;使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本&#xff0c;HTML命令…

HTML的开发工具

主要是Visual Studio Codehttps://download.zol.com.cn/tuiguang/detail/48/470292.shtml?qw &#xff08;这个是下载地址&#xff09; https://www.jb51.net/softjc/733119.html&#xff08;这个是设置为中文&#xff09;

HTML学习(四):开发工具(编辑器)

一、Dreamweaver Adobe Dreamweaver&#xff0c;简称“DW”&#xff0c;中文名称 "梦想编织者"。最初为美国Macromedia公司开发 &#xff0c;2005年被Adobe公司收购。DW是集网页制作和管理网站于一身的所见即所得网页代码编辑器。 官方地址&#xff1a; Dreammwea…

常用HTML5开发工具有哪些?

常用HTML5开发工具有哪些&#xff1f; 在开发前端页面时&#xff0c;为了快速、高效地完成任务&#xff0c;通常会使用一些具有代码高亮显示、语法提示等便捷功能的HTML5开发工具。常见的HTML5开发工具有Sublime、Visual Studio Code、webstorm、Dreamweaver、Hbuilder等&…

linux刷新fstab,linux之fstab的一次记录

上次遇到一个问题 &#xff1a; 一台服务器用的是iSCSI存储 但是在重启的时候 fstab的挂载在网卡启动之前 启动的时候挂载不上 服务器就卡在那边了 启动不了 所以有了这次的深入fstab的学习 位置 : /etc/fstab 实例&#xff1a;fs_spec fs_file fs_type fs_options fs_dump…

AOSP ~ fstab 文件详细说明

fstab这个文件描述系统中各种文件系统的信息&#xff0c;应用程序读取这个文件&#xff0c;然后根据其内容进行自动挂载的工作。因此&#xff0c;我们需要理解其中的内容&#xff0c;了解它如何与 mount命令配合工作&#xff0c;并能够针对自己的情况进行修改。 作为系统配置文…

fstab开机挂载

1、fstab开机挂载 &#xff08;1&#xff09;/etc/fstab 文件包含了如下字段&#xff0c;通过空格或 Tab 分隔&#xff1a; <file system> <mount point> <type> <options> <dump> <pass> 说明如下&#xff1a; <file systems…

linux fstab 参数,Linux fstab参数详解

Linux fstab中存放了和分区有关的重要信息&#xff0c;其中每一行为一个分区记录&#xff0c;每一行又可分为六个 部份&#xff0c;下面以/dev/hda7 / ext2 defaults 1 1为例逐个说明&#xff1a; fstab中存放了和分区有关的重要信息&#xff0c;其中每一行为一个分区记录&…

Linux 中的 文件系统表Fstab 是什么?

文章目录 什么是 fstab&#xff1f;/etc/fstab 文件的结构1.文件系统2. 挂载点3.文件系统类型4. 安装选项5. 转储6.通过 修复与 Fstab 文件相关的启动问题什么是 Mtab 文件&#xff1f; 在本指南中&#xff0c;我们将了解 Linux 中的fstab是什么&#xff0c;文件的用途是什么&a…

[Linux 基础] -- Linux 之 fstab 文件详解

前言 /etc/fstab 是用来存放文件系统的静态信息的文件。位于 /etc/ 目录下&#xff0c;可以用命令 less /etc/fstab 来查看&#xff0c;如果要修改的话&#xff0c;则用命令 vim /etc/fstab 来修改。 当系统启动的时候&#xff0c;系统会自动地从这个文件读取信息&#xff0c;并…

为什么要搭建独立的图片服务器

导读&#xff1a;最近&#xff0c;很少写博客了哈&#xff0c;呃&#xff0c;其实&#xff0c;我是个懒人。说说我写这个图片服务器的前因后果吧&#xff0c;我本来是不想写的&#xff0c;因为自己的水平在那儿了&#xff0c;写也写不明白&#xff0c;何必献丑呢&#xff1f;&a…

使用Nginx搭建图片服务器

第一步&#xff1a;下载Nginx并解压 第二步&#xff1a;创建用来存放图片的文件夹 第三步&#xff1a;修改conf/nginx.conf 具体代码&#xff1a; location ~ .*\.(gif|jpg|jpeg|png)$ { expires 24h; root D:/WebServer/imgs/;#指定图片存放路径 access_log D:/WebServer/…

【图片服务器】【七牛云】搭建图片云+服务器配置Https

文章目录 &#x1f402;搭建七牛云图片服务器&#x1f402;一、❀要求❀&#xff08;1&#xff09;、注册七牛云账号&#xff08;2&#xff09;、拥有已备案的域名 二、❀创建七牛云对象存储空间❀三、❀给空间绑定自定义域名❀四、❀配置HTTPS证书❀五、❀配置https &#x1f…

个人项目-图片服务器

一、项目背景 图床, 解决 github / 博客中插入图片的问题。 二、整体架构 核心就是一个 HTTP 服务器, 提供对图片的增删改查能力. 同时搭配简单的页面辅助完成图片上传/展示。需要实现的功能/接口&#xff1a; 显示图片列表&#xff1b;显示图片内容&#xff1b;上传图片&a…

Linux搭建图片服务器

目录 1 安装目的 2 下载地址 3 FastDFS安装环境 3.1 安装libevent 3.2 安装libfastcommon 3.3 tracker编译安装 4 配置 5 启动 5.1 设置开机自动启动。 5.2 FastDFS--storage安装 5.3 安装libevent 5.4 安装libfastcommon 5.5 storage编译安装 5.6 配置 5.7 启动…