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.mzph.cn/web/53648.shtml

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

相关文章

linux命令记录 ss 和 lsof

ss ss 命令是 Linux 中用于查看和分析套接字&#xff08;sockets&#xff09;状态的工具&#xff0c;功能类似于 netstat&#xff0c;但提供了更快、更详细的信息。以下是对 ss 命令的详细介绍&#xff0c;包括常用选项及其用法&#xff1a; 基本用法 ss [选项]常用选项 -t…

Debian与Ubuntu:深入解读两大Linux发行版的历史与联系

Debian与Ubuntu&#xff1a;深入解读两大Linux发行版的历史与联系 引言 在开源操作系统的领域中&#xff0c;Debian和Ubuntu是两款备受瞩目的Linux发行版。它们不仅在技术上有着密切的联系&#xff0c;而且各自的发展历程和理念也对开源社区产生了深远的影响。本文将详细介绍…

从零开始学习Python

目录 从零开始学习Python 引言 环境搭建 安装Python解释器 选择IDE 基础语法 注释 变量和数据类型 变量命名规则 数据类型 运算符 算术运算符 比较运算符 逻辑运算符 输入和输出 控制流 条件语句 循环语句 for循环 while循环 循环控制语句 函数和模块 定…

【裸机装机系列】12.kali(ubuntu)-优化-减少var,tmp目录等存储占用空间

推荐阅读&#xff1a; 1.kali(ubuntu)-为什么弃用ubuntu&#xff0c;而选择基于debian的kali操作系统 如果你在安装partition disks的时候选择的是“separate /home,/var and /tmp paratitions”,会自动为你分区大小&#xff0c;由于自动分配的/var和/tmp分区比较小&#xff0c…

Robot Operating System——带有时间戳和坐标系信息的三维向量

大纲 应用场景1. 机器人运动控制场景描述具体应用 2. 传感器数据处理场景描述具体应用 3. 物体姿态表示场景描述具体应用 4. 物理仿真场景描述具体应用 5. 无人机飞行控制场景描述具体应用 6. 自动驾驶车辆控制场景描述具体应用 定义字段解释 案例 geometry_msgs::msg::Vector3…

丹摩智算(damodel)部署stable diffusion实验

名词解释&#xff1a; 丹摩智算&#xff08;damodel&#xff09;&#xff1a;是一款带有RTX4090&#xff0c;Tesla-P40等显卡的公有云服务器。 stable diffusion&#xff1a;是一个大模型&#xff0c;可支持文生图&#xff0c;图生图&#xff0c;文生视频等功能 一.实验目标 …

SQLServer TOP(Transact-SQL)

1、本文内容 语法参数最佳实践兼容性支持互操作性限制和局限示例 适用于&#xff1a; Microsoft Fabric Microsoft FabricWarehouse 中的 SQL ServerAzure SQL 数据库Azure SQL 托管实例Azure SynapseAnalytics Analytics Platform System &#xff08;PDW&#xff09;SQL A…

Java中的数据一致性策略:从最终一致性到强一致性的选择

Java中的数据一致性策略&#xff1a;从最终一致性到强一致性的选择 大家好&#xff0c;我是微赚淘客返利系统3.0的小编&#xff0c;是个冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们来讨论Java后端开发中非常重要的一个概念&#xff1a;数据一致性。数据…

MODELS 2024震撼续章:科技与可持续性的未来交响曲

MODELS 2024国际会议正如火如荼地进行着&#xff0c;每一天都充满了新的发现与启迪&#xff0c;每一场分享都是对技术前沿的一次深刻探索&#xff0c;更是对现实世界可持续性挑战的一次积极回应。现在让我们继续这场科技盛宴&#xff0c;看看小编为您精选几场的学术分享吧~ 会议…

地质工程专业职称申报条件详细解读

一、初级&#xff08;助理&#xff09;地质工程工程师评审条件&#xff1a; 1、理工类或者地质工程类专业毕业 2、专科毕业满3年或本科毕业满1年 3、研究生毕业&#xff0c;从事本专业技术工作&#xff0c;当年内考核认定 二、中级地质工程工程师评审条件&#xff1a; 1、理工…

【LeetCode刷题】链表篇

203. 移除链表元素 /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode() {}* ListNode(int val) { this.val val; }* ListNode(int val, ListNode next) { this.val val; this.next next; }* }*…

每天一道面试题(18):Redis 和 MySQL 如何保证数据一致性

引言 在现代分布式系统中&#xff0c;Redis 常被用作缓存层以提升应用性能&#xff0c;而 MySQL 则作为持久化存储。然而&#xff0c;由于二者的数据存储特性不同&#xff0c;保证 Redis 和 MySQL 之间的数据一致性是一个重要且复杂的问题。在这篇学习笔记中&#xff0c;我们将…

大数据 flink 01 | 从零环境搭建 简单Demo 运行

什么是Flink Flink是一个开源的流处理和批处理框架,它能够处理无界和有界的数据流&#xff0c;具有高吞吐量、低延迟和容错性等特点 Flink 可以应用于多个领域如&#xff1a;实时数据处理、数据分析、机器学习、事件驱动等。 什么是流式处理&#xff1f;什么是批处理 流处理…

xQTLs 共定位分析(XQTLbiolinks包)

XQTL 共定位分析 XQTLbiolinks 是一个端到端的生物信息学工具&#xff0c;由深圳湾实验室李磊研究团队开发&#xff0c;用于高效地分析公共或用户定制的个xQTLs数据。该软件提供了一个通过与 xQTLs 共定位分析进行疾病靶基因发现的流程&#xff0c;以检测易感基因和致病变异。…

vimax通信协议

关于“Vimax通信协议”&#xff0c;实际上可能存在一定的误解或混淆。在通信技术和网络领域&#xff0c;并没有广泛认知的名为“Vimax”的通信协议。然而&#xff0c;您可能是在询问关于“WiMAX”的信息&#xff0c;因为“WiMAX”与“Vimax”在发音上相近&#xff0c;且WiMAX是…

【STM32】RTT-Studio中HAL库开发教程七:IIC通信--EEPROM存储器FM24C04

文章目录 一、简介二、模拟IIC时序三、读写流程四、完整代码五、测试验证 一、简介 FM24C04D&#xff0c;4K串行EEPROM&#xff1a;内部32页&#xff0c;每个16字节&#xff0c;4K需要一个11位的数据字地址进行随机字寻址。FM24C04D提供4096位串行电可擦除和可编程只读存储器&a…

python学习记录3

目录 1、数据类型转换 2、eval函数 3、运算符 1、数据类型转换 变量类型的转换分为隐类转换和显类转换&#xff0c;隐类转换在python代码行中运行时就自动发生。例如 x ture print(x1) 显类转换使用函数完成&#xff0c;主要有以下几种&#xff1a; x 10 #整数默认是i…

2.1 HuggingFists系统架构(一)

系统架构 HuggingFists的前端主体开发语言为HtmlJavascript&#xff0c;后端的主体开发语言为Java。在算子部分有一定份额的Python代码&#xff0c;用于整合Python在数据处理方面强大能力。 功能架构 HuggingFists的功能架构如上&#xff0c;由下向上各层为&#xff1a; 数据存…

leetcode刷题day29|贪心算法Part03( 134. 加油站、135. 分发糖果、860.柠檬水找零、406.根据身高重建队列)

134. 加油站 思路&#xff1a; 暴力解法&#xff1a;for循环适合模拟从头到尾的遍历&#xff0c;while循环适合模拟环形遍历&#xff01;但是会超出leetcode的时间限制。 class Solution {public int canCompleteCircuit(int[] gas, int[] cost) {for(int i0;i<gas.length…

从文本图片到多模态:3D 数字人打开企业全域商业增长新空间

摘要&#xff1a;数字化与AI浪潮推动各行业变革&#xff0c;内容形式也发生巨变&#xff0c;从文本到多媒体的多模态表达&#xff0c;标志着内容创造走向升维。AIGC 3D生成技术的突飞猛进&#xff0c;彻底打破了传统3D内容生产门槛高、周期长、成本高昂的问题。将3D数字人的打造…