【HTML】常用标签语义及用法、VSCode开发常用插件

已于 2023-06-07 09:37:52 修改
阅读量3.6k 收藏 54
点赞数 10
分类专栏： 前端 文章标签： 学习 前端 html5 Powered by 金山文档
于 2023-03-07 10:29:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45895411/article/details/129372623
版权

该系列文章记录博主学习前端入门课程的笔记，同时也为了方便查阅，有任何问题都可以在评论区提问。本文主要介绍HTML基础知识

1.思维导图

2.VSCode 插件

2.1插件

为了操作方便，在使用VSCode编写HTML文档之前需要下载几个插件

插件

作用

Chinese (Simplified) (简体中文) Language Pack

将VSCode汉化，方便查看功能

open In Browser

Alt+B即可在浏览器预览网页效果(修改代码后需要刷新网页才能看到效果)

Auto Rename Tag

自动重命名配对的标签

live server

Alt+L+O即可在浏览器预览网页效果(实时刷新)

3.HTML标签

3.1基本结构(骨架)标签

<html> 根目录
    <head> 头部标签
        <title></title> 网页标题
    </head>
    <body> 主体
    </body>
</html>

注：HTML注释不能直接写，需要使用注释符，这里是为了方便展示

  1. 骨架标签是每个HTML文档中必然存在的

  1. 所有标签都在<>中，通常是成双出现的，第一个是开始标签，第二个是结束标签。如<html></html>

  1. 有些特殊的单标签。如<br/>

3.2特殊标签

在VSCode输入! + tab键即可自动生成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>

这里比骨架标签多出了一些部分，从上往下对这些标签的作用进行解释

3.2.1文档类型声明标签

作用：告诉浏览器使用哪种HTML版本显示网页

<!DOCTYPE html>

这句代码的意思：让浏览器用最新版本的HTML5显示网页。

注：

  • <!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前

  • <!DOCTYPE> 不是HTML标签，不属于HTML的一部分

3.2.2lang语言种类

作用：定义当前文档显示的语言，如en：英语，zh-CN：中文

<html lang="en">

定义为en就是英文网页，定义为zh-CN就是中文网页。其实，对于文档显示来说，定义为en的文档也可以显示中文，定义为zh-CN的也可以显示英文。但是这个属性对浏览器和搜索引擎还是有作用的(例如翻译等)，所以还是尽量定义为zh-CN

3.2.3字符集(character set)

作用：多个字符的集合。方便计算机识别和存储各种文字

常用值：GB2312(简体)，BIG5(繁体)，GBK(简体+繁体)，UTF-8(被称为万国码，基本包含了所有国家文字显示所用的字符)

<meta charset="UTF-8">

3.2.4 移动端开发用的标签*

以下标签为移动端开发内容，暂时不做讲解

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

3.3常用标签(一)

3.3.1标签语义

含义：解释标签的含义、作用

作用：根据语义确定需要的标签，让页面结构更清晰

3.3.2标题标签<h1>-<h6>

语义：作为标题使用，并且依据重要性递减

特点：

  • 一个标题独占一行

  • 标题的文字会加粗，字号也变大

为阅读方便，如无需要，以后的代码都不包括骨架标签

<h1>标题共有六级选，</h1>
<h2>文字加粗一行选。</h2>
<h3>由大到小依次减，</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>
                --pink老师

效果图

3.3.3段落标签和换行标签

标签

段落<p>

换行<br/>

语义

把HTML文档划分为不同段落

强制换行

特点

  • 会根据浏览器大小进行换行

  • 段落之间有空隙

  • 单标签

  • 只是简单的开始新的一行，与段落不同

<h1>水花61分伊戈达拉制胜抢断 西决勇土再胜开拓者总分2-0</h1>
<h4>数据统计:水花兄弟合砍61分</h4>
<p>库里22投11中，三分14投4中，罚球11罚全中得到37分8篮板8助攻，职业生涯季后赛得分30+次数来到35次，超过哈登排名现役第3位，仅次于詹姆斯和社兰特。汤普森22投8中,三分8投4中得到24分3篮板2助攻，德拉蒙德-格林得到16分10篮板7助攻5盖帽，凯文-鲁尼得到14分7篮板2助攻，今天勇士有7名皆补出场。</p>
<h4>兄弟对决升级:小库里给哥哥造成压力</h4>
<p>库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中，小库里没有给哥哥造成压力。他出场19分钟，7投1中只得到3分3篮板2助攻,在场期间输掉10分。但在西决第2场中，小库里攻防两端都打出杰出的表现，全场送出4次抢断，包括直接抢断自己的哥哥库里，在防守端给库里造成了极大的困扰。</p>
<p>作者: pink老师<br/>
    2019-8-8</p>

效果图

3.3.4文本格式化标签

语义：突出重要性，比普通文字更重要

语义

标签

说明

加粗

<strong> / <b>

更推荐使用<strong>，语义更强烈

倾斜

<em> / <i>

更推荐使用<em>，语义更强烈

删除线

<del> / <s>

更推荐使用<del>，语义更强烈

下划线

<ins> / <u>

更推荐使用<ins>，语义更强烈

3.3.5<div>和<span>标签

语义：没有语义，相当于一个盒子，用来装内容，布局网页。

特点：

  • <div>用于布局，一行只能放一个<div>。大盒子

  • <span>用于布局，一行可以放多个<span>。小盒子

<div>我是一个div标签我一个独占一行</div>
<div>我是一个div标签我一个独占一行</div>
<div>我是一个div标签我一个独占一行</div>
<span>百度</span>
<span>新浪</span>
<span>搜狐</span>

效果图

3.3.6图像标签

作用：显示图片

<img src="img.jpg" alt="这是pink老师" title="这是pink老师的图片"/>

属性

值

说明

src

图片路径

必须属性

alt

文本

替换文本(当图片不能显示时显示的文字)

title

提示文本(鼠标放在图片上显示的文本)

width

像素

宽度

height

高度

border

边框粗细

总结：

  • 属性必须在标签名后面

  • 属性的先后顺序不影响功能，但是属性之间、标签名与属性之前要用空格分开

  • 属性采取键值对的形式，即key="value"的格式

3.3.7路径(补充知识)

  1. 目录文件夹：普通的文件夹，只不过存放了做网页所需的素材，如HTML、图片等等。示例：如图“案例”文件夹就是一个目录文件夹

  1. 根目录：目录文件夹的第一层

  1. 路径

  • 相对路径：指由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系。有以下三种分类

分类

符号

说明

同一级

文件位于HTML文档同一级，如<img src=baidu.gif>

下一级

/

文件位于HTML文档下一级，如<img src=/baidu.gif>

上一级

../

文件位于HTML文档上一级，如<img src=../baidu.gif>

  • 绝对路径：根目录下的绝对位置，通常是以盘符开始的如："D:\web\img\logo.gif"(注：绝对路径和相对路径使用的斜杠不同)，或者完整的网页地址"http://www.baidu.com"

3.3.8超链接标签<a>

语义：用于定义超链接

作用：从一个页面链接到另一个页面

属性

值

作用

href

链接

必须属性

target

_self：在当前窗口打开链接(默认)

_blank：在新窗口打开链接

设置链接打开方式

链接分类有六种，如下：

<h4>外部链接</h4> 指向外部的链接
<a href="http://qq.com" target="_blank">腾讯</a>

<h4>内部链接</h4> 指向网站内部的链接
<a href="10.demo.html">demo</a>

<h4>空链接</h4> 不指向任何网页，在网站未完善时暂时使用
<a href="#">空链接</a>

<h4>下载链接</h4> 当链接是一个文件时，点击后会自动下载
<a href="images.zip">图片压缩包</a>

<h4>网页元素链接</h4> 网页元素如文本、图像、表格、音/视频等都可以添加超链接
<a href="https://baike.baidu.com/link?url=IouDYMAUSr2HiIgn7HrNAyCeyP4nLE1TFrOSc5xhKA8sa2Pdk1c7BgLIC6sry4CVl0EVpNi5N55fVwqHdmdF1vnOnZVFmTivJum2SiPhr4u"><img src="img.jpg"></a>

第六种超链接标签是锚点标签，它的使用方法比较特殊。

作用：快速定位到网页的某个位置，例如左栏目录起到的效果

写法如下：

<a href="#slogan">slogan</a> herf值设置为"#+名称"的格式，点击后
<h3 id="slogan">从善如登，虽难可达昆仑</h3> 即可跳转到页面内id为相同名称的位置，通常用于目录

<a href="#">任意字符</a> 跳转到顶部

3.3.9注释

写法：以"<!--"开始，"-->"结束

作用：便于程序员阅读和理解代码，且程序不执行注释内容

<!-- 这是一个注释标签 -->

效果图：

发现网页不显示任何内容

3.3.10特殊字符

作用：在HTML中，一些特殊的符号很难或者不方便直接使用，此时就可以使用特殊字符来代替

重点记住：空格、大于号、小于号这三个，其他的很少使用，如需使用查阅即可

空&nbsp;格
&lt;p&gt;是段落标签

效果图

3.3.11练习

素材可以在视频评论区置顶下载，注意不用下载视频

3.4常用标签(二)

3.4.1表格标签

作用：用于展示数据，可以将繁杂的数据表现规整，可读性好。

  • 基础语法
<table> 定义表格
    <thead> 和<tbody>都为表格标签结构，可以帮助程序员更好地分清表格结构
        <tr> 定义行
            <th></th> 定义表头部分
            <th></th>
            <th></th>
        </tr>
    </thead>

    <tbody> 表格标签结构
        <tr> 
            <td></td> 定义单元格
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

  • <table>：用于定义表格

  • <tr>：定义表格中的行，必须嵌套在<table>中

  • <td>：定义表格中的单元格，必须嵌套在<tr>中

  • <th>：定义表格中的表头部分，会加粗居中显示，常用于表格第一行，以突出重要性

  • <thead>和<tbody>：表格结构标签，帮助程序员更好地分清表格结构

  • 表格属性

作用：设置表格的格式。实际开发中并不常用，基本是通过CSS来实现

属性名

属性值

描述

align

left、center、right

规定表格相对周围元素的对齐方式

border

"1"或""

规定表格单元是否拥有边框。默认为"0"，即没有边框

cellpadding

像素值

规定单元格边沿与其内容之间的空白，默认为1

cellspacing

像素值

规定单元格之间的空白，默认为2

width

像素值或百分比

规定表格的宽度

height

像素值或百分比

规定表格的高度

  • 合并单元格

  1. 跨行合并：rowspan="合并单元格的个数"

目标单元格为最上侧单元格，写合并代码

  1. 跨列合并：colspan="合并单元格的个数"

目标单元格为最左侧单元格，写合并代码

示例

    <table border="1" cellspacing="0" width="500" height="249">
        <tr>
            <td></td>
            <td colspan="2"></td>
            
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            
            <td></td>
            <td></td>
        </tr>
    </table>

效果图

  1. 总结：

  • 先确定合并单元格方式

  • 找到目标单元格写合并代码

  • 删除多余单元格

3.4.2列表标签

作用：布局网页

根据使用场景，可以分为无序列表、有序列表、自定义列表

  • 无序列表

语法格式

<ul>
    <li></li>
    <li></li>
</ul>

tips：

  1. 无序列表中的列表项没有顺序级别之分，是并列的

  1. <ul>中只能嵌套<li>，直接在<ul>中输入其他标签或文字的做法是不被允许的

  1. <li>可以容纳所有元素

  1. 无序列表会带有默认的样式属性，在实际开发中，可以通过CSS更改

  • 有序列表

语法格式

<ol>
    <li></li>
    <li></li>
</ol>

tips：

  1. 有序列表的列表项会按照一定的顺序排列定义

  1. <ol>中只能嵌套<li>，直接在<ul>中输入其他标签或文字的做法是不被允许的

  1. <li>可以容纳所有元素

  1. 无序列表会带有默认的样式属性，在实际开发中，可以通过CSS更改

  • 自定义列表

通常用于对术语/名词进行解释或者描述

语法格式：

<dl>    
    <dt>名词</dt>
    <dd>名词解释1</dd>
    <dd>名词解释2</dd>
</dl>

tips:

  1. <dl>里只能包含<dd>和<dt>

  1. <dl>里可以包含多个<dd>和<dt>

3.4.3表单标签

由表单域、表单控件(也称表单元素)、提示信息组成，作用是收集用户信息。

  • 表单域

作用：将范围内的表单元素信息提交给服务器

    <form action="demo.php" method="POST" name="name1">
    </form>

属性名

属性值

作用

action

url地址

指定接收并处理表单数据的服务器程序的url地址

method

get/post

设置表单数据的提交方式

name

名称

指定表单的名称，以区分同一个页面中的多个表单域

  • <input>表单元素

作用：

语法格式

<form action="demo.php" method="GET" name="demo">
    <!-- text 文本框 用户可以在里面输入任何文字 -->
    用户名：<input type="text"  name="username" value="请输入用户名" maxlength="8"> <br>
    <!-- password 密码框 用户看不见输入的密码 -->
    密码：<input type="password" name="pwd"> <br>
    <!-- radio 单选按钮 可以实现单选 -->
    <!-- name 是表单元素名字 这里的单选按钮必须有相同的name 才可以实现多选一 -->
    <!-- 单选按钮和复选框可以设置checked属性，当页面打开时就会默认选择这个选项 -->
    性别：男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女" checked> <br>
    <!-- checkbox 复选框 可以实现多选 -->
    爱好：吃饭<input type="checkbox" name="hobby" value="吃饭"> 睡觉<input type="checkbox" name="hobby" value="睡觉"> 打豆豆<input type="checkbox" name="hobby" value="打豆豆"> <br>
    <!-- 点击了提交按钮，就可以把表单域<form>中的表单元素提交到服务器 -->
    <input type="submit" value="免费注册">
    <!-- 重置按钮可以还原表单元素的初始状态 -->
    <input type="reset" value="重新填写">
    <!-- 普通按钮 button 后期结合js使用-->
    <input type="button" value="点击发送短信"><br>
    <!-- 文件域 用于上传文件 -->
    上传头像：<input type="file">
</form>

效果图

属性名

属性值

作用

type

text

定义单行的输入字段。用户可在其中输入文本，默认宽度为20个字符

password

定义密码字段。该字段中的字符被掩码

radio

定义单选按钮

checkbox

定义复选框

submit

定义提交按钮。提交按钮会把表单数据发给服务器

reset

定义重置按钮。重置按钮会清除表单中的所有数据

button

定义可点击按钮(多数情况下，配合JavaScript使用)

file

定义输入字段和“浏览”按钮，供文件上传

image

定义图像形式的提交按钮

hidden

定义隐藏的输入字段

name

自定义

规定input元素的名词

value

自定义

规定input元素的值

checked

checked

规定input元素首次加载时应当被选中

maxlength

正整数

规定输入字段中字符的最大长度

tips：

  1. value和name是每个表单元素都有的属性，

  1. name是表单元素的名字，同组复选框要求有相同的name值

  1. checked主要用于单选按钮

  • <label>标签

作用：绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将光标转到对应的表单元素，以增加用户体验

语法格式

<label for="username">用户名：</label><input type="text" id="username">
  • <select>下拉表单标签

如果有多个选项供用户选择，使用<select>标签可以节省空间

<form>
籍贯：
<select>
    <option>山东</option>
    <option selected>广东</option>
    <option>北京</option>
</select>
</form>

效果图

tips：

  1. <select>内至少有两个<option>

  1. 在<option>内定义selected属性，该项会变为默认选项

  • <textarea>文本域表单元素

定义多行文本输入的控件，适用于用户输入内容较多的场景

<textarea>文本内容</textarea>

属性

属性值

作用

cols

字符数

定义文本域每行的字符数

rows

字符数

定义文本域中每列的字符数

注：实际开发中并不使用，选择CSS会是更好的选择

  • 练习

根据所学内容做出以下网页

做出来之后或者没有思路的话可以看看pink老师的讲解

君和-
关注
  • 10
    点赞
  • 踩
  • 54
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
加深对HTML和CSS标签语义化的理解
01-08
首先说明的一点是，人可以通过视觉的划分判断内容的语义,搜索引擎看到的只是代码。搜索引擎只能通过标签来判断内容的语义。 以前我真的没有怎么重视过搜索引擎，现在开始比较在意了，因为页面的很大一部分流量是来自搜索引擎的，要使页面尽可能地对搜索引擎友好，所以就要尽可能地使标签语义化。 以前以我对web开发的粗浅理解，觉得写一个好的符合标准的页面只需要把结构和表现分离，然后不要使用table，font等标签就行了，至于通篇都是div我也不会觉得有什么问题，因为CSS很强大。但是，所有的标签都是有自己的语义的，下面给出一部分标签的语义： div 语义：Division(分隔) span 语义：Span(范
HTML标签语义化的介绍
12-11
前几年在网站开发上DIV+CSS很是流行，当时掀起一片狂狼啊。可是在后来对于前端开发来说纯DIV+CSS已经被程序员们所丢弃，随着“标签语义化”这个词就出来了。 那么这个词是什么意思呢？下面摘自百度百科： html标签语义：即html标签的含义。 首先是关于语义（Semantics）和默认样式的区别，默认样式是浏览器设定的一些常用tag的表现形式，个人认为他的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用，很明显Hx系列看起来很像标题，因为拥有粗体和较大的字号。,用来区别于其他文字，起到了强调的作用。至于列表和表格很明显的告诉你他们是做什么的。 那么我
10.推荐vscode 前端常用插件
最新发布
qq_43544841的博客
02-27 1408
这是一个代码格式化工具，它可以帮助开发者以统一的方式格式化，从而极大地提高了代码的可读性和可维护性,同时可以在vscode settings.json 下面配置格式化规范从而实现保存按照eslint以及代码规范自动格式化，以下是目前配置好的一个自动保存eslint格式化的settings.json。比较方便的是，它可以直观的看到某行代码的最后修改人，以及日期和提交记录等。用于代码规范的检查，这个插件使得开发者可以在编写代码的过程中即时发现和修正错误，极大地提高了编程效率和代码质量。标签的开始和结束标签。
详解HTML5常用的语义化标签
01-21
快速查询 article | aside | nav | section | header | footer 架构预览 nav 定义导航链接的部分 在页脚显示一个站点的导航链接,如首页、服务信息页面、版权信息页面等 <nav> <ul> <li><a>Home</a></li> <li><a>CSS</a></li> <li><a>Html5</a></li> </ul> </nav> article 定义文章 装载显示一个独立的文章内容，论坛帖子、新闻、博客文章、用户评论等，
html5语义化标签以及使用标准
01-20
html5语义化标签 一、首先我们提出疑问，什么是语义化标签以及我们为什么要去使用它？ 在语义化标签出来之前，我们可以用div+css实现完全可以实现布局，为什么要多此一举呢？ 1）为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构 2）方便搜索引擎能识别页面结构，有利于SEO 3）比 标签有更加丰富的含义，方便开发与维护 4）遵循W3C标准 二、其次，语义化标签主要用在什么地方呢？是不是有了它，div也可以不用了呢？ 其实不是的，div标签还是有他的好处的，不能因为为了语义化，故意去使用那么新标签，反而会起到适得其反的作用，每个标签都有他独特的作用！那语义化标签主要用在哪些地方
html/vscode.6
pxy6666666的博客
11-25 178
html
VSCode 常用插件推荐
全栈程序员小黑的博客
05-03 3805
VS Code提供了非常丰富的插件功能，根据你的需要，安装对应的插件可以大大提高开发效率。适用于 VS Code 的中文（简体）语言包拼写检查器。比如 banana 单词写错成 banane ，会提示你是否修改成 banana ，也可以将 banane 添加至检查器的字典中。
一、HTML VScode常用插件
Yang
07-22 3289
优点：一边编写代码一边保存，即实时刷新预览，大大提升开发测试效率。Theme 作用：显示 Vscode 文件、文件夹的图标。作用：修改标签，自动帮你完成头部和尾部闭合标签的同步修改。作用：该插件可通过编辑器打开默认浏览器显示代码效果。插件名称：Chinese 中文（简体）语言包。插件名称：Auto Rename Tag。插件名称：open in brower。插件名称：Material Icon。插件名称：carbon-now-sh。插件名称：Live Server。作用：通过插件可以开启本地服务。
Vscode——开发常用插件分享
weixin_45328723的博客
05-26 6742
一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns import warnings warnings.filterwarnings('ignore') import ssl ssl._create_default_
VSCode 插件
weixin_38999134的博客
01-12 690
基础通用插件 Chinese vscode编辑器汉化包，安装后，在 locale.json 中添加 “locale”: “zh-cn”，即可载入中文（简体）语言包。 Auto Rename Tag 自动重命名成对的HTML标记，修改开始标签，结束标签会同步修改 HTML Snippets HTML代码片段，该插件可为你提供html标签的代码提示，不用键入尖括号了 Bracket Pair Colorizer 该插件可以为你把成对的括号做颜色区分，并且提供一根连接线。方便我们审阅代码结构。通过修改配置文件，使
VScode插件——HTMLHint插件使用指南、规则配置说明指南、如何修改HTMLHint规则
ShawBurton的博客
10-13 1666
VScode插件——HTMLHint使用指南、规则配置说明指南、如何修改HTMLHint规则。HTMLHint是一个用于检查HTML代码错误和潜在问题的插件。它提供了一系列的规则，用于检查HTML代码的语法、结构、标签使用等方面的问题。说白了就是以.html后缀结束的文件，进行语法检查，方便我们及时找到代码错误。
常见语义html标签及使用方法.doc
05-23
常见语义html标签及使用方法, 学习html标签含使用方法d
VSCode调试Html中的脚本 vscode前端常用插件推荐，搭建JQuery、Vue等开发环境 vsCode 添加浏览器调试和js调试的方法总结 VS Code - Debugger for...
12-13 3363
一、背景 使用VisualStudioCode写了一个简单的Html页面，想调试下其中script标签里的javascript代码，网上查了一通，基本都是复制粘贴或者大同小异的文章，就是要安装Debugger for Chrome插件，修改launch.json配置信息，F5启动，这些都照做了，但是仍有两个问题，一个是Html文件里不能打断点，只能在js文件里面打，二...
一、HTML 速览—— VSCode 插件配置教程 HTML 的初步认识
Herk 的博客
02-10 3936
本WEB前端快速通关系列，分为三大板块：HTML CSS JavaScripts，持续更新。 目录 VSCode安装配置 常用快捷操作 HTML骨架分析 VSCode安装配置 1.安装VSCode：官方下载地址 推荐使用VSCode，免费，轻量，插件多。 2.安装常用插件： HTML CSS Support：CSS的智能感知。 Live Server：可以跳转至浏览器实时预览网页。open in browser需要手动刷新，不推荐。 HTML Preview：可以直接在VSCode内实时
VSCode前端必备插件，有可能你装了却不知道如何使用？
weixin_45178716的博客
10-28 3521
在前端开发中，有一个非常好用的工具，Visual Studio Code，简称VS code。　都不用我安利VS code，大家就会乖乖的去用，无数个大言不惭的攻...
VSCode插件之实时字数统计与选中词英汉互译
更上一层楼！
04-17 9465
VSCode插件之字数统计、翻译 hello world 初体验 环境条件： npm git 最新版的VS Code（我的是1.32.3，结果测试的时候说我版本太低，就升级到了1.33.0） 根据官网给的链接your-first-extension, 我们需要安装一个代码生成工具，减少重复代码的编写。 npm install -g yo generator-code 万事俱备只欠东风，接...
如何使用vscode编写html表格
2301_76886025的博客
03-07 4414
第一：编写表格框架 第一行为整体框架，border和cellspacing为边框距离 第二行为框架内容，要在<tr>…</tr>中编写，<th>…</th>为次行的内容以及字体加粗。 可以多次在<tr>…</tr>中编写其他行内容 <td> …</td>编写每行内容。 第二：添加照片 在<td> …</td>加入<img src="照片链接（可以直接复制照片插入
在 VS Code 中运行 html 用到的插件
Evelyn_178的博客
07-11 2058
启动一个具有静态和动态页面实时重新加载功能的开发本地服务器，用于实时预览运行效果。使用 open in browser 运行代码时，只要代码有变动，就需要手动刷新重新预览页面运行结果，而 Live Server 可以自动刷新运行结果。运行代码片段或代码文件的多种语言：C、C++、Java、JavaScript, PHP、Python、Perl、Perl 6、Ruby、Go等40多种语言和自定义命令。在默认浏览器或应用程序中打开当前文件，用于运行代码。选择在其他浏览器中运行。选择在默认浏览器中运行。
VS code中各种图案的 HTML代码运行
歆歆~黯了
09-17 576
安装Visual Studio Code、安装HTML等插件、在Visual Studio Code 开发环境中编写HTML代码，然后运行浏览器以查看效果。还有各种图案的 HTML文件！
能打印出两千常用汉字及语义和笔画吗
06-10
可以，以下是一个简单的示例代码，可以打印出两千常用汉字及其语义和笔画： ```java import java.io.BufferedReader; import java.io.FileReader; import java.io.IOException; import java.util.HashMap; import java.util.Map; public class ChineseCharacter { public static void main(String[] args) throws IOException { String fileName = "chinese_characters.txt"; // 存放两千常用汉字的文件路径 Map<String, String[]> characterMap = new HashMap<>(); // 存放汉字及其语义和笔画的Map BufferedReader br = new BufferedReader(new FileReader(fileName)); String line; while ((line = br.readLine()) != null) { String[] arr = line.split("\t"); if (arr.length == 3) { String[] value = new String[2]; value[0] = arr[1]; // 语义 value[1] = arr[2]; // 笔画 characterMap.put(arr[0], value); } } br.close(); System.out.println("汉字\t语义\t笔画"); for (Map.Entry<String, String[]> entry : characterMap.entrySet()) { StringBuilder sb = new StringBuilder(); sb.append(entry.getKey()).append("\t"); String[] value = entry.getValue(); sb.append(value[0]).append("\t"); sb.append(value[1]); System.out.println(sb.toString()); } } } ``` 以上代码中，需要先准备一个文件，文件中每行存放一个汉字及其语义和笔画，用制表符`\t`分隔。示例文件内容如下： ``` 一 one 1 乙 second; 2nd heavenly stem 1 二 two 2 十 ten 2 丁 nail; small cube-shaped object; pellet, grain; cubic meter; fourth of 10 Heavenly Stems; surname Ding 2 厂 cliff; factory, workshop; depot; yard, courtyard; surname Chang 2 七 seven 2 卜 divine; prophesy; observe 2 ``` 执行以上代码后，将会打印出两千常用汉字及其语义和笔画，示例输出如下： ``` 汉字 语义 笔画 佚 lose; forget; miss; enjoy; at ease 7 充 fulfill; fill; supply; satisfy; plug; be full; be used up; be sufficient 6 亘 extend; cover; range over 8 仆 fall forward; lie prostrate; servant; pawn; fall forward; lie prostrate; servant; pawn 5 炎 flame; blaze; inflammation; surname Yan 8 井 well; neat; orderly 4 ``` 需要注意的是，以上代码只是一个简单的示例，实际中需要更加完善的数据集来包含所有的汉字及其语义和笔画。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

君和-

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

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

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

打赏作者

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

抵扣说明：

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

余额充值