【前端web入门第一天】01 开发环境、HTML基本语法文本标签

文章目录:

  • 1. 准备开发环境

    • 1.1 vs Code基本使用
  • 2.HTML文本标签

    • 2.1 标签语法
    • 2.2 HTML基本骨架
    • 2.3 标签的关系
    • 2.4 注释
    • 2.5 标题标签
    • 2.6 段落标签
    • 2.7 换行与水平线标签
    • 2.8 文本格式化标签

1. 准备开发环境

VSCode与谷歌浏览器离线版,安装包评论区自提.
VSCode默认安装位置:C:\Users\hp\AppData\Local\Programs\Microsoft VS Code

1.1 vs Code基本使用

  • 打开文件夹
    • 任意文件夹→拖拽至vs Code空白位置即可安装插件
  • 安装插件
    • 左边栏选择扩展→搜索插件→安装→重启Vs Code·
  • 安装两种插件名
    • 汉化菜单插件:Chinese
    • 打开网页插件: open in browser

2.HTML文本标签

HTML超文本标记语言一―HyperText Markup Language。

  • 超文本是什么? 链接
  • 标记是什么? 标记也叫标签,带尖括号的文本

2.1 标签语法

在这里插入图片描述

  • 标签成对出现,中间包裹内容<>
  • 里面放英文字母(标签名)
  • 结束标签比开始标签多/

例子:加粗文字(双标签,要包裹内容所以是双标签)

<strong>加粗的文字</strong>

加粗的文字

例子:水平线(单标签,不需要包裹内容所以是单标签)

<hr>

2.2 HTML基本骨架

HTML基本骨架是网页模板.

<html><head><title>网页标题</title></head><body>网页主体</body>
</html>
  • html:整个网页
  • head:网页头部,存放给浏览器看的代码,例如CSS
  • body:网页主体,存放给用户看的代码,例如图片、文字
  • title:网页标题

vs code 快速生成骨架:
在HTML文件(.html)中,!(英文)配合Enter / Tab键


2.3 标签的关系

作用:明确代码的书写位置

标签的两种关系:

  • 父子关系(嵌套关系)
  • 兄弟关系(并列关系)

在这里插入图片描述
上面的图片和文字是兄弟关系,他们与整个大方框是父子关系


2.4 注释

注释就是对代码的解释和说明,其目的是让人们能够更加轻松地了解代码。注释是编写程序时,写程序的人给一个语句、程序段、函数等的解释或提示,能提高程序代码的可读性。

在编写HTML代码时,我们经常要在一些关键代码旁做一下注释,这样做的好处很多,比如:方便理解、方便查找或方便项目组里的其它程序员了解你的代码,而且可以方便以后你对自己代码进行修改。学习和工作中,关键代码都要加注释

<!--..-->注释标签用来在源文档中插入注释,注释不会在浏览器中显示。
<!--注释标签用来在源文档中插入注释,注释不会在浏览器中显示。-->

2.5 标题标签

一般用在新闻标题、文章标题、网页区域名称、产品名称等等。
在这里插入图片描述

标签名: h1 ~h6(双标签)

  • 显示特点:
    • 文字加粗
    • 字号逐渐减小
    • 独占一行(换行)
<html><head><title>凡界每日一报</title></head><body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3></body>
</html>

经验分享:

  • h1标签在一个网页中只能用一次,用来放新闻标题或网页的logo.
  • h2~ h6没有使用次数的限制

2.6 段落标签

显示效果:
在这里插入图片描述
标签名:p(双标签)

  • 显示特点:独占一行
  • 段落之间存在间隙
<html><body><p>这里写段落</p></body>
</html>

2.7 换行与水平线标签

都是单标签,因为不需要包裹内容

 换行: <br>(单标签)水平线: <hr>(单标签)

注意:

代码中敲回车,浏览器显示是不会换行的


2.8 文本格式化标签

作用:为文本添加特殊格式,以突出重点。常见的文本格式:加粗、倾斜、下划线、删除线等。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/644400.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

3、非数值型的分类变量

非数值型的分类变量 有很多非数字的数据,这里介绍如何使用它来进行机器学习。 在本教程中,您将了解什么是分类变量,以及处理此类数据的三种方法。 本课程所需数据集夸克网盘下载链接:https://pan.quark.cn/s/9b4e9a1246b2 提取码:uDzP 文章目录 1、简介2、三种方法的使用1…

书生·浦语大模型实战营-学习笔记5

LMDeploy 大模型量化部署实践 大模型部署背景 LMDeploy简介 轻量化、推理引擎、服务 核心功能-量化 显存消耗变少了 大语言模型是典型的访存密集型任务&#xff0c;因为它是decoder-by-decoder 先把数据量化为INT4存起来&#xff0c;算的时候会反量化为FP16 AWQ算法&a…

Angular组件(一) 分割面板ShrinkSplitter

Angular组件(一) 分割面板ShrinkSplitter 前言 分割面板在日常开发中经常使用&#xff0c;可将一片区域&#xff0c;分割为可以拖拽整宽度或高度的两部分区域。模仿iview的分割面板组件&#xff0c;用angular实现该功能&#xff0c;支持拖拽和[(ngModel)]双向绑定的方式控制区…

Docker容器引擎(2)

目录 一.批量删除镜像&#xff0c;容器 二.Docker 网络实现原理 随机映射端口&#xff08;从32768开始&#xff09; 访问自己&#xff1a; 在10服务器上配置路由转发&#xff1a; 指定映射端口&#xff1a; 查看容器的输出和日志信息&#xff1a; 将宿主机目标|文件挂载…

RabbitMQ中交换机的应用及原理,案例的实现

目录 一、介绍 1. 概述 2. 作用及优势 3. 工作原理 二、交换机Exchange 1. Direct 2. Topic 3. Fanout 三、代码案例 消费者代码 1. 直连direct 生产者代码 测试 2. 主题topic 生产者代码 测试 3. 扇形fanout 生产者代码 测试 每篇一获 一、介绍 1. …

Vue的生命周期方法

beforeCreate 在实例初始化之后&#xff0c;数据观测&#xff08;data observe&#xff09;和 event/watcher 事件配置之前被调用。在当前阶段 data、methods、computed 以及 watch 上的数据和方法都不能被访问。 created 实例已经创建完成之后被调用。在这一步&#xff0c;实…

【JavaEE进阶】 MyBatis使用注解实现增删改查

文章目录 &#x1f343;前言&#x1f334;传递参数&#x1f38b;增(Insert)&#x1f6a9;返回主键 &#x1f384;删(Delete)&#x1f332;改(Update)&#x1f333;查(Select)&#x1f6a9;起别名&#x1f6a9;结果映射&#x1f6a9;开启驼峰命名(推荐使用) ⭕总结 &#x1f343…

使用curl测试响应式输出的接口

http://127.0.0.1:9010/v1/communicationRecord/summary 传递的json参数&#xff0c;是一个响应式的接口&#xff0c;怎么修改这个参数&#xff0c;可以响应式的输出。 为了使用curl命令对您的接口进行流式输出测试&#xff0c;您需要构造一个curl请求&#xff0c;该请求向您的…

[UI5 常用控件] 01.Text

文章目录 前言1. 普通文本2. 长文本&#xff1a;3. 设置最大显示行数 ( maxLines3 )4. 单行显示 ( wrappingfalse )5. 显示空白符 ( renderWhitespacetrue )6. 使用 - 连接单词:只适用于英文 ( wrappingTypeHyphenated )7. 空白时使用 - 代替 ( emptyIndicatorModeOn )8. JSON数…

行内样式css不生效

场景&#xff1a; 别人的代码里有样式是写在行内的&#xff0c;且设置了display:block&#xff1b;没有生效&#xff0c;也没有被覆盖样式&#xff0c;很奇怪。 <span style"width:90px;display:block;">很多字&#xff0c;style也很长&#xff0c;中间换行了…

2024年需要重点关注的15种计算机病毒

2024年&#xff0c;计算机病毒威胁变得愈发多元化和复杂化。涉及勒索病毒、二维码病毒、挖矿木马等15种类型&#xff0c;这些病毒从数据勒索到系统入侵&#xff0c;对全球网络安全构成严峻挑战。 2024年&#xff0c;计算机病毒威胁变得愈发多元化和复杂化。涉及勒索病毒、二维码…

【网络安全】常见的网络威胁有哪些?

随着互联网的快速发展&#xff0c;网络安全问题日益凸显。常见的网络威胁包括病毒、木马、恶意软件等。这些威胁不仅会影响计算机的安全运行&#xff0c;还会窃取用户的个人信息&#xff0c;造成巨大的损失。因此&#xff0c;我们需要采取一些措施来保护自己的网络安全。 常见的…

ardupilot 方向余弦矩阵/旋转矩阵的理解

目录 文章目录 目录摘要1.序言2.方向余弦矩阵2.1 方向余弦矩阵定义2.2 方向余弦矩阵的特点2.3 方向余弦矩阵微分方程2.4 方向余弦矩阵微分方程求解摘要 本节主要记录自己对ardupilot中用到的方向余弦矩阵/旋转矩阵的理解,欢迎批评指正,有些资料参考网上写的比较好的资料,免…

深入理解Java LinkedList:使用场景与实际应用

深入理解Java LinkedList&#xff1a;使用场景与实际应用 在Java的世界里&#xff0c;集合框架是不可或缺的一部分&#xff0c;它提供了一系列用于存储和操作数据集合的接口和类。其中&#xff0c;LinkedList作为List接口的一个实现&#xff0c;经常被拿来与ArrayList做对比。…

android 图片添加水印

android 图片添加水印 本文主要讲下android 中如何给图片添加水印. 在Android中给图片添加水印可以使用Bitmap、Matrix和Canvas类的方法来实现. private Bitmap addWater() {// 加载原始图片Bitmap sourceBitmap BitmapFactory.decodeResource(getResources(), R.mipmap.sou…

Vue+OpenLayers7:OpenLayers7地图初始化时如何设置默认缩放级别、设置默认地图中心点、最大缩放级别和最小缩放级别以及默认坐标系

返回《Vue+OpenLayers7》专栏目录:Vue+OpenLayers7 本章讲解OpenLayers7地图初始化时如何设置默认缩放级别、设置默认地图中心点、最大缩放级别和最小缩放级别以及默认坐标系等配置。 前言 OpenLayers7地图初始化时如何设置默认缩放级别、初始化时设置默认地图中心点、设置…

启动mitmproxy报错 ImportError: cannot import name ‘url_quote‘ from ‘werkzeug.urls‘

报错截图 ImportError: cannot import name url_quote from werkzeug.urls (d:\soft\python\python38\lib\site-packages\werkzeug\urls.py) 原因是Werkzeug版本不兼容导致 解决方法 pip install Werkzeug2.2.2

大数据学习之Flink算子、了解(Source)源算子(基础篇二)

Source源算子&#xff08;基础篇二&#xff09; 目录 Source源算子&#xff08;基础篇二&#xff09; 二、源算子&#xff08;source&#xff09; 1. 准备工作 2.从集合中读取数据 可以使用代码中的fromCollection()方法直接读取列表 也可以使用代码中的fromElements()方…

北斗短报文DTU 北斗通信DTU无线数传终端

北斗是我国自主建设的卫星导航系统&#xff0c;被广泛应用于全球定位、导航和时间同步等领域。随着物联网的迅猛发展&#xff0c;北斗短报文DTU作为物联网连接的关键技术&#xff0c;成为了各行各业的热门话题。 ** 一、北斗短报文DTU的概念与特点 **   北斗短报文DTU(Data…

sudo 授权问题

sudo 表示 “superuser do”&#xff0c;它允许已验证的用户以其他用户的身份来运行命令。其他用户可以是普通用户或者超级用户。然而&#xff0c;大部分时候我们用它来提权运行命令&#xff0c;以替代直接使用 root 用户的操作。 sudo 命令与安全策略配合使用&#xff0c;安全…