Html--笔记01:使用软件vscode,简介Html5--基础骨架以及标题、段落、图片标签的使用

一.使用VSC--全称:Visual Studio Code

vscode用来写html文件,打开文件夹与创建文件夹:①选择文件夹  ②拖拽文件

生成浏览器的html文件的快捷方式:  !+enter

运行代码到网页的方法:

普通方法:找到书写代码的文件夹,点击使用浏览器打开

在vscode快速使用:需要添加插件:Open In  Bower,然后右击选择:Open In Default Brower(默认浏览器) ,Open In Other Brower(选择其他浏览器)----推荐使用,更快捷方便。

vscode快捷键

shift+alt+F代码格式化
alt+↑/↓将选则的代码向上或向下
shift+alt+↑/↓快速复制一行向上或向下
ctrl+s保存▲
ctrl+F快速查找
ctrl+H快速替换

二.HTML简介和基础骨架

Html5:是一种超文本标记语言,用来描述网页的一种语言。

标记语言<----标记标签<----双标签:<html></html>   ,单标签:<img> 

HTML5的DOCTYPE声明:

<!DOCTYPE html> 位于H5声明文档的最上面,处于标签之前,是网页的必备组成,避免浏览器的怪异模式

HTML5的基础骨架:

<html>标签:定义HTML文档,浏览器看到后就是个html文档了,所有其他元素就包裹在它里面,html标签限定了文档的开始点和结束点。

<head>标签:用于定义文档的头部,在头部描述了文档的各种属性和信息,包括文档的标题,在web的位置。

<body>标签:元素定义的文档的主体,body元素:包含文档的所有内容(比如文件,超链接,图像,表格和列表),会直接在页面显示,也是直接看到的内容。

以上就是Html5的基础骨架

拓展基础标签:

title 标签:

可以定义文档的标签,显示在浏览器的标题或状态栏上

<title>标签是<head>标签中唯一必须要求包含的东西,就是在<head>中必须有<title>。

<title>的增加有利于SEO优化----SEO搜索引擎优化的英文缩写,通过对网站内容调整,满足搜索引擎的排名需求

mate标签:

meta标签用来描述网页文档属性,关键词等,更多的都是字符编码: charset="UTF-8",也是在<head>标签里的

三.标题标签:

标题(Heading)通过:<h1>--<h6>标签进行定义

<h1>定义最大的标题 ,<h6>定义最小的标题。

这里的align是指内容的位置属性,默认居左,可以选择left | center |right

 生成h1到h6快捷键:  h$*6 

注意:要正确的使用标题标签,HTML的标题标签只用于标题,不仅仅只是为了生成粗体或者头号字体而使用,正确使用有利于SEO,h1--h6是先后顺序的且重要程度也是由重到轻。

四.标签--段落,换行,水平线

段落:通过<p>标签定义,

换行:希望将一个段落进行换行,就在分割处加一个<br>或者<br />都可以 

效果如下:

水平线: <hr />单行标签:在HTML页面会创建水平线具体属性有:

color---颜色,width--长度,size--大小,alig--对齐方式(默认居中),也可取值left | right。

具体实例在上图。

五.标签--图片

插入图片, <img>标签定义HTML页面中的图像:

<img  src=""   alt""   title=""  width=""  height="" >

<img>是单标签,不需要进行闭合操作

src--(图片地址与名字)路径

alt--图像替换文本,若图像加载失败,就会显示文本信息

width--宽度

heigth--高度

title--鼠标放在图片会有提示

感谢各位大佬的观看!求免费的点赞收藏关注喔!!!

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

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

相关文章

Vue3实现动态菜单功能

文章目录 0.效果演示1.搭建Vue3项目1.1 vite 脚手架创建 Vue3 项目1.2 设置文件别名1.3 安装配置 element-plus1.4 安装配置路由2.登录页面3.后台管理页面3.1 搭建后台框架3.2 左侧菜单栏3.3 header 用户信息3.4 主要内容3.5 footer4.配置静态路由5.记录激活菜单5.1 el-menu 绑…

yub‘s Algorithmic Adventures_Day3

yub’s Algorithmic Adventures_Day3 有序数组的平方 link&#xff1a;977. 有序数组的平方 - 力扣&#xff08;LeetCode&#xff09; 非递减顺序 一个数列中的元素从左到右依次不减&#xff0c;或者说不降序排列. 比如&#xff1a;1233445&#xff0c;12345. 思路分析 如果…

二分查找算法专题(1)

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a; 优选算法专题 目录 二分查找算法的介绍 704. 二分查找 34. 在排序数组中查找元素的第一个和 最后一个位置 35. 搜索插入位置 69. x的平…

Java网络通信—UDP

0.小记 1.udp通信不需要建立socket管道&#xff0c;一边只管发&#xff0c;一边只管收 2.客户端&#xff1a;将数据&#xff08;byte&#xff09;打包成包裹&#xff08;DatagramPacket&#xff09;&#xff0c;写上地址&#xff08;IP端口&#xff09;&#xff0c;通过快递站&…

【网络安全】Cookie与ID未强绑定导致账户接管

未经许可,不得转载。 文章目录 前言正文前言 DigiLocker 是一项在线服务,旨在为公民提供一个安全的数字平台,用于存储和访问重要的文档,如 Aadhaar 卡、PAN 卡和成绩单等。DigiLocker 通过多因素身份验证(MFA)来保护用户账户安全,通常包括 6 位数的安全 PIN 和一次性密…

大数据开发--1.2 Linux介绍及虚拟机网络配置

目录 一. 计算机入门知识介绍 软件和硬件的概述 硬件 软件 操作系统概述 简单介绍 常见的系统操作 学习Linux系统 二. Linux系统介绍 简单介绍 发行版介绍 常用的发行版 三. Linux系统的安装和体验 Linux系统的安装 介绍 虚拟机原理 常见的虚拟机软件 体验Li…

[Linux] Linux 的进程如何调度——Linux的 O(1)进程调度算法

标题&#xff1a;[Linux] Linux 的进程如何调度——优先级与进程调度 个人主页水墨不写bug 目录 一、前言 二、将要出现的概念 1.进程调度队列 2.位图 3.进程的优先级 三、Linux进程的调度过程 1.活动队列&#xff08;*active指向的队列&#xff09; 2.过期队列&#…

openKylin--安装 .net6.0

编辑profile文件 cd .. //切换到根目录 cd /etc //切换到etc目录 vim profile //b编辑profile文件 1. 按→键移动到文件末尾 2. 按Insert键进入编辑模式 3. 按Enter另起一行开始编辑 export DOTNET_ROOT/home/dotnetexport PATH$PATH:/home/dotnet 可以通过右键--粘贴 的…

模拟实战数据落地:MSsql通过存储过程获得销售数据视图

话不多说 目标需求:通过传递参数(查询条件及查询时间)调用存储过程获得销售数据视图,并且在视图中有时间字段供后续引用,实现数据对接获取任务 最终结果如图: 实现以上结果步骤如下: 1)建立users表和orders表分别代表用户及订单,其中订单中用户id与用户表中用户id关联,并随机…

LLM - 使用 vLLM 部署 Qwen2-VL 多模态大模型 (配置 FlashAttention) 教程

欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://spike.blog.csdn.net/article/details/142528967 免责声明:本文来源于个人知识与公开资料,仅用于学术交流,欢迎讨论,不支持转载。 vLLM 用于 大语言模型(LLM) 的推理和服务,具有多项优化技术,包括先进…

VMware ESXi Centos7网卡名称 ens192 变更eth0

1.在 /etc/sysconfig/network-scirpts/ 文件夹下 创建一个ifcfg-eth0的文件&#xff0c; 最简单的方式是 mv ifcfg-ens192 ifcfg-eth0 然后 vi ifcfg-eth0 把DEVICE改成 DEVICEeth0 wq! 保存 2. vi /etc/sysconfig/grub # 在位置添加 net.ifnames0 biosdevname0 参数 完…

java基础 day1

学习视频链接 人机交互的小故事 微软和乔布斯借鉴了施乐实现了如今的图形化界面 图形化界面对于用户来说&#xff0c;操作更加容易上手&#xff0c;但是也存在一些问题。使用图形化界面需要加载许多图片&#xff0c;所以消耗内存&#xff1b;此外运行的速度没有命令行快 Wi…

【iOS】计算器的仿写

计算器 文章目录 计算器前言简单的四则运算UI界面事件的逻辑小结 前言 笔者应组内要求&#xff0c;简单实现了一个可以完成简单四则运算的计算器程序。UI界面则是通过最近学习的Masonry库来实现的&#xff0c;而简单的四则运算内容则是通过栈来实现一个简单的四则运算。 简单…

QSqlDatabase在多线程中的使用

Qt中多线程使用数据库_qt数据库管理类支持多数据库,多线程-CSDN博客 1. 代码&#xff1a; #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QPushButton> #include <QSqlDatabase> #include <QSqlQuery> #include <QSqlError>…

【SpringBoot详细教程】-08-MybatisPlus详细教程以及SpringBoot整合Mybatis-plus【持续更新】

目录 🌲 MyBatis Plus 简介 🌾入门案例 🌾 MP 简介 🌲 MP 的CRUD 🌾 新增 🌾 删除 🌾 修改在进行 🌾 根据ID查询 🌾 查询所有 🌲 分页功能 🌾 设置分页参数 🌾 设置分页拦截器 🌲 优化启动 🌾 取消mbatisPlusBanner 🌾 取消Sprin…

L0-Linux-关卡材料提交

SSH全称Secure Shell&#xff0c;中文翻译为安全外壳&#xff0c;它是一种网络安全协议&#xff0c;通过加密和认证机制实现安全的访问和文件传输等业务。SSH 协议通过对网络数据进行加密和验证&#xff0c;在不安全的网络环境中提供了安全的网络服务。 SSH 是&#xff08;C/S…

大学学校用电安全远程监测预警系统

1.概述&#xff1a; 该系统是基于移动互联网、云计算技术&#xff0c;通过物联网传感终端&#xff0c;将办公建筑、学校、医院、工厂、体育场馆、宾馆、福利院等人员密集场所的电气安全数据&#xff0c;实时传输至安全用申管理服务器&#xff0c;为用户提供不间断的数据跟踪&a…

Linux shell编程学习笔记84:tee命令——显示保存两不误

0 引言 在前面的学习笔记中&#xff0c;我们经常使用echo命令和输出重定向来生成脚本文件或演示文件&#xff0c;其实Linux提供了一个可以从标准输入读取数据&#xff0c;并输出成文件的命令——tee。 1 tee命令 的帮助信息、功能、命令格式、选项和参数说明 1.1 tee命令 的…

基于Hive和Hadoop的用电量分析系统

本项目是一个基于大数据技术的用电量分析系统&#xff0c;旨在为用户提供全面的电力消耗信息和深入的用电量分析。系统采用 Hadoop 平台进行大规模数据存储和处理&#xff0c;利用 MapReduce 进行数据分析和处理&#xff0c;通过 Sqoop 实现数据的导入导出&#xff0c;以 Spark…

Windows 11 安装配置 Git 教程

目录 Git Windows 11 环境安装配置 Git Git Git是一个开源的分布式版本控制系统&#xff0c;由Linus Torvalds创建&#xff0c;用于有效、高速地处理从小到大的项目版本管理。Git是目前世界上最流行的版本控制系统&#xff0c;广泛应用于软件开发中。 以下是Git的一些关键特…