vscode前端环境配置与html基础标签(一)

简介: vscode前端环境配置与html基础标签

前言

💫你好,我是辰chen,一个正在考研途中的sophomore dog😖

💫本篇内容来源于对 AcWing-Web应用课的总结与复习,其内容来源于讲义与习题打卡,Web前端专栏地址:Web前端

💫欢迎大家的关注,我的博客主要关注于考研408以及AIoT的内容

以下的几个专栏是本人比较满意的专栏(大部分专栏仍在持续更新),欢迎大家的关注:

💥ACM-ICPC算法汇总【基础篇】

💥ACM-ICPC算法汇总【提高篇】

💥AIoT(人工智能+物联网)

💥考研

💥CSP认证考试历年题解

本篇相关配套习题见博客:html的简单应用 搭配食用效果更佳!

一、vscode安装与配置

1.1 下载地址

https://code.visualstudio.com/

1.2 安装插件

Live Server

image.png

Auto Rename Tag

image.png


1.3 自动格式化

点击settings,然后输入format,然后勾选上Format On Save

10.png

二、html基础标签

2.1 html文件结构

文档结构

html的所有标签为树形结构,例如:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web应用课</title>
</head>
<body>
    <h1>第一讲</h1>
</body>
</html>


<html>标签

HTML <html> 元素 表示一个 HTML 文档的根(顶级元素),所以它也被称为根元素。所有其他元素必须是此元素的后代。


<head>标签

HTML head 元素 规定文档相关的配置信息(元数据),包括文档的标题,引用的文档样式和脚本等。


<body>标签

HTML body 元素表示文档的内容。document.body 属性提供了可以轻松访问文档的 body 元素的脚本。


<title>标签

HTML <title> 元素 定义文档的标题,显示在浏览器的标题栏或标签页上。它只应该包含文本,若是包含有标签,则它包含的任何标签都将被忽略。


<meta>

HTML <meta> 元素表示那些不能由其它 HTML 元相关(meta-related)元素((<base><link>, <script><style><title>)之一表示的任何元数据信息。

常见属性:

  • charset:这个属性声明了文档的字符编码。如果使用了这个属性,其值必须是与 ASCII 大小写无关(ASCII case-insensitive)的”utf-8”。
  • name:name 和 content 属性可以一起使用,以名 - 值对的方式给文档提供元数据,其中 name 作为元数据的名称,content 作为元数据的值。

icon

<link rel="icon" href="images/icon.png">

资源地址:


<!-- 多行注释 -->

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--   
        这里的内容均为注释
        <h1>第一讲</h1>
        <p>
            段落。
        </p>
    -->
</body>
</html>

2.2 文本标签

文本标签虽然很多,但大部分可看成是预定好样式的<div><span>

<div>标签

<div>元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器,在不使用CSS的情况下,其对内容或布局没有任何影响。

其他块级标签例如:<h1>, <p>, <pre>, <ul>, <ol>, <table>


<span>标签

<span> 元素是短语内容的通用行内容器,并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图(通过使用类或者 Id 属性),或者这些元素有着共同的属性,比如lang。应该在没有其他合适的语义元素时才使用它。<span><div> 元素很相似,但 <div> 是一个 块元素 而 <span> 则是 行内元素

其他内联标签例如:<i>, <b>, <del>, <ins>, <td>, <a>


<h1> - <h6>标签

HTML <h1>–<h6> 标题 (Heading) 元素呈现了六个不同的级别的标题,<h1> 级别最高,而 <h6> 级别最低。


<p>标签

HTML <p>元素(或者说 HTML 段落元素)表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本,或以垂直的空白隔离或以首行缩进。另外,<p> 是块级元素。


<pre>标签

HTML <pre> 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排,以等宽字体的形式展现出来,文本中的空白符(比如空格和换行符)都会显示出来。(紧跟在 <pre> 开始标签后的换行符也会被省略)


<br>标签

HTML <br> 元素在文本中生成一个换行(回车)符号。此元素在写诗和地址时很有用,这些地方的换行都非常重要。


<hr>标签

HTML <hr> 元素表示段落级元素之间的主题转换(例如,一个故事中的场景的改变,或一个章节的主题的改变)。

在 HTML 的早期版本中,它是一个水平线。现在它仍能在可视化浏览器中表现为水平线,但目前被定义为语义上的,而不是表现层面上。所以如果想画一条横线,请使用适当的 css 样式来修饰。


<i>标签

HTML 元素 <i> 用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等,它的内容通常以斜体显示。


<b>标签

HTML 提醒注意(Bring Attention To)元素(<b>)用于吸引读者的注意到该元素的内容上(如果没有另加特别强调)。这个元素过去被认为是粗体(Boldface)元素,并且大多数浏览器仍然将文字显示为粗体。尽管如此,你不应将 <b> 元素用于显示粗体文字;替代方案是使用 CSS font-weight 属性来创建粗体文字。


<del>标签

HTML 的<del>标签表示一些被从文档中删除的文字内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签。<ins>标签的作用恰恰于此相反:表示文档中添加的内容。


<ins>标签

HTML <ins> 元素定义已经被插入文档中的文本。

目录
相关文章
|
5天前
|
前端开发 安全 数据安全/隐私保护
杨校老师课堂之WEB前端HTML2
杨校老师课堂之WEB前端HTML
18 0
|
5天前
|
XML 移动开发 前端开发
杨校老师课堂之WEB前端HTML1
杨校老师课堂之WEB前端HTML
22 0
|
8天前
|
XML 存储 前端开发
【前端】XML和HTML的区别详解
【前端】XML和HTML的区别详解
14 5
|
7天前
|
传感器 前端开发 JavaScript
前端开发者必备的VS Code插件推荐
前端开发者必备的VS Code插件推荐
|
11天前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
22 2
|
10天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
19天前
|
数据采集 移动开发 前端开发
前端基本标签,快捷键
前端基本标签,快捷键
|
21天前
|
前端开发
前端基础学习(一)HTML入门
前端基础学习(一)HTML入门
12 0
前端基础学习(一)HTML入门
|
22小时前
|
JavaScript
VScode格式化vue文件--避免html属性换行
VScode格式化vue文件--避免html属性换行
5 0
|
21天前
|
前端开发 安全 Java
家政系统(用户端)介绍Java18+前端html+后端springboot
家政系统(用户端)介绍Java18+前端html+后端springboot
19 0