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

news2024/11/20 9:30:14

一.使用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.coloradmin.cn/o/2166041.html

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

相关文章

毕业设计选题:基于ssm+vue+uniapp的自助购药小程序

开发语言&#xff1a;Java框架&#xff1a;ssmuniappJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;M…

进阶SpringBoot之 Dubbo 及 Zookeeper 安装

Dubbo 文档 Dubbo 是一款高性能、轻量级的开源 Java RPC 框架 它提供了三大核心功能&#xff1a; 面向接口的远程方法调用、智能容错和负载平衡、服务自动注册和发现 ZooKeeper 是一个分布式的&#xff0c;开放源码的分布式应用程序协调服务&#xff0c;是 Hadoop 和 Hbase …

Vue75 编程式路由导航

笔记 作用&#xff1a;不借助<router-link> 实现路由跳转&#xff0c;让路由跳转更加灵活 具体编码&#xff1a; //$router的两个API this.$router.push({name:xiangqing,params:{id:xxx,title:xxx} })this.$router.replace({name:xiangqing,params:{id:xxx,title:xxx} …

K8s flink-operator 例子

1.参考官网&#xff1a; https://nightlies.apache.org/flink/flink-kubernetes-operator-docs-stable/docs/try-flink-kubernetes-operator/quick-start/ 2.首先环境具备 k8s、helm 我的环境 k8s 1.30 最新版本了 [rootk8s-master ~]# kubectl get no -owide NAME …

【QGIS】软件下载安装及GIS4WRF插件使用

【QGIS】软件下载安装及GIS4WRF插件使用 QGIS软件下载软件安装GIS4WRF插件导入参考 QGIS软件下载 官网-QGIS-Spatial without Compromise 下载安装包&#xff0c;居然有1.2G&#xff0c;那就慢慢下载吧&#xff01; 软件安装 双击安装包&#xff0c;如下&#xff1a; 接受…

MATLAB案例 | 沪深股市收益率的二元Copula模型

沪深股市收益率的二元Copula模型 1. 案例描述2.实现流程2.1 确定随机变量的边缘分布2.1.1 参数法计算流程2.1.2 非参数法 2.2 选取适当的Copula函数2.3 参数估计 3. 完整代码参考资料 1. 案例描述 现有上海和深圳股市同时期日开盘价、最高价、最低价、收盘价、收益率等数据,跨…

9.2自适应阈值分割

基本概念 在图像处理中&#xff0c;阈值分割是一种简单而有效的图像分割方法&#xff0c;它根据像素值将图像分割成前景和背景。自适应阈值分割是阈值分割的一种高级形式&#xff0c;它考虑了图像局部区域的亮度变化&#xff0c;从而能够更准确地分割图像。OpenCV是一个强大的…

完全二叉树和堆排序

完全二叉树 完全二叉树满足以下两个条件&#xff1a; 所有层的节点都完全填满&#xff1a;除了最后一层外&#xff0c;每一层的节点数都是最大节点数&#xff0c;即除了最后一层&#xff0c;其他层的节点数都是满的。 最后一层的节点尽可能地向左排列&#xff1a;在满足第一…

调试技巧 conso.trace()

console 的 trace() 方法向 Web 控制台输出一个堆栈跟踪。 trace是一个很好的调试错误的办法&#xff0c; console.trace() 方法用于显示当前执行的代码在堆栈中的调用路径。 可以查看函数在哪一些地方做了调用 这个在找不出变量在何处被修改的时候&#xff0c;很有用 同时…

TCP网络编程概述、相关函数、及实现超详解

文章目录 TCP网络编程概述1. TCP协议的特点2. TCP与UDP的差异3. TCP编程流程 TCP网络编程相关函数详解1. socket()&#xff1a;创建套接字参数说明&#xff1a;返回值&#xff1a;示例&#xff1a; 2. connect()&#xff1a;客户端连接服务器参数说明&#xff1a;返回值&#x…

力扣每日一题 公司命名 集合 找规律

Problem: 2306. 公司命名 &#x1f468;‍&#x1f3eb; 灵神题解 class Solution {public long distinctNames(String[] ideas) {// 创建一个大小为26的HashSet数组&#xff0c;用于存储每个首字母对应的字符串集合Set<String>[] groups new HashSet[26];Arrays.set…

基于Python大数据的音乐推荐及数据分析可视化系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码 精品专栏&#xff1a;Java精选实战项目…

Cadence Allegro17.4 板框倒角

一、Cadence Allegro 板框倒角有倒斜角和倒圆角两种形式&#xff1a; 1、 板框倒斜角 2、 板框倒圆角 二、有些时候不能倒角 如果我们绘制的板框是Shape属性的是不能正常倒角设置&#xff0c;要将Shape属性的板框更改为lines属性的板框。 1、 选择菜单栏Shape——Decompose …

Wireshark_流量分析

在当今数字化的时代&#xff0c;网络流量分析对于确保网络的稳定运行、排查故障以及保障网络安全至关重要。Wireshark 作为一款功能强大的网络数据包分析工具&#xff0c;为我们提供了多种实用的功能&#xff0c;帮助我们深入了解网络中的数据传输情况。 1、数据包筛选 数据包…

HTTP和HTTPS的区别,HTTP协议转HTTPS协议测试需要注意内容

简单快捷&#xff1a;HTTP 相对于 HTTPS 更简单和快速。在开发过程中&#xff0c;可能频繁地修改代码并测试&#xff0c;使用 HTTP 可以减少一些开发中的额外步骤和复杂性。 不涉及敏感信息&#xff1a;在本地开发环境中&#xff0c;通常不涉及真实用户数据或敏感信息的传输&a…

单链表实现和数组模拟单链表

现在有一个排好序的若干个元素(升序),现在要插入一个元素啊&#xff0c;请你输入插入该元素后的序列(升序) 请分别用单链表实现&#xff0c;和数组模拟单链表实现 为什么要用数组模拟单链表 1.内存局部性&#xff1a;数组在内存中是连续存储的&#xff0c;因此在访问元素时可…

了解针对基座大语言模型(类似 ChatGPT 的架构,Decoder-only)的重头预训练和微调训练

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 随着自然语言处理&#xff08;NLP&#xff09;技术的飞速进步&#xff0c;基于 Transformer 架构的大语言模型在众多任务中取得了显著成就。特别是 Decoder-only 架构&#xff0c;如 GPT 系列模型&…

“警警”有条:zCloud告警中心的告警与处置实践

ENMOTECH 随着金融行业数字化转型步伐的加快&#xff0c;海量数据处理成为常态&#xff0c;而作为数据存储和管理的核心——数据库的稳定性与效率直接影响着企业的运营成效。某金融科技企业使用了近10个品类、300余套数据库来承载业务&#xff0c;在专业运维、集中管理等方面都…

【操作系统】速成3

Linux内核和windows内核 原来鸿蒙是微内核 windows混合内核 参考&#xff1a;xiaolincoding.com

5种强大的方式:AI在临终关怀中提升护理质量,改善生活

目录 什么是临终关怀中的AI&#xff1f;AI如何个性化临终关怀&#xff1f;AI如何改善临终关怀患者的生活质量&#xff1f; 疼痛管理症状管理的预测分析情感和心理支持高效的资源分配减轻家庭压力 临终关怀中AI的未来 近年来&#xff0c;医疗保健行业在人工智能&#xff08;AI…