当前位置: 首页 > news >正文

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--鼠标放在图片会有提示

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

相关文章:

  • TypeScript 设计模式之【单例模式】
  • 数据备份策略:保障数据安全的关键
  • 从预测性维护到智能物流:ARM边缘计算控制器的工业实践
  • C++——编写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度。用指针方法处理。
  • 入门插件开发-列表插件开发-第三节:案例演示——setFilter事件讲解
  • LLMs之RAG:MemoRAG(利用其记忆模型来实现对整个数据库的全局理解)的简介、安装和使用方法、案例应用之详细攻略
  • 【自学笔记】支持向量机(4)——支持向量回归SVR
  • 国内可用ChatGPT-4中文镜像网站整理汇总【持续更新】
  • 三.python入门语法2
  • OSPF相关基础介绍及基础配置,网络工程师必修
  • redis Redis-Cluster常用命令与Redis性能监控
  • SSH防止暴力破解
  • 2024东湖高新下半年水测公示名单啦
  • 把命令的语气改成聊天的方式
  • 部署Activiti Modeler全流程(工作流引擎Activiti设计插件)
  • CSS相对定位
  • Just for fun——迅速写完快速排序
  • Mithril.js 入门介绍
  • Python学习之路16-使用API
  • vue-cli3搭建项目
  • vue自定义指令实现v-tap插件
  • 基于OpenResty的Lua Web框架lor0.0.2预览版发布
  • 利用DataURL技术在网页上显示图片
  • 腾讯优测优分享 | 你是否体验过Android手机插入耳机后仍外放的尴尬?
  • 想晋级高级工程师只知道表面是不够的!Git内部原理介绍
  • ​​​​​​​​​​​​​​Γ函数
  • (02)Unity使用在线AI大模型(调用Python)
  • (39)STM32——FLASH闪存
  • (42)STM32——LCD显示屏实验笔记
  • (env: Windows,mp,1.06.2308310; lib: 3.2.4) uniapp微信小程序
  • (void) (_x == _y)的作用
  • (超详细)2-YOLOV5改进-添加SimAM注意力机制
  • (二)学习JVM —— 垃圾回收机制
  • (附源码)ssm航空客运订票系统 毕业设计 141612
  • (论文阅读31/100)Stacked hourglass networks for human pose estimation
  • (算法)区间调度问题
  • (五)关系数据库标准语言SQL
  • (转)GCC在C语言中内嵌汇编 asm __volatile__
  • (转)机器学习的数学基础(1)--Dirichlet分布
  • (转)母版页和相对路径
  • .gitignore
  • .net core 6 redis操作类
  • .NET Core WebAPI中使用swagger版本控制,添加注释
  • .NET Core 控制台程序读 appsettings.json 、注依赖、配日志、设 IOptions
  • .Net Core 中间件验签
  • .net core使用ef 6
  • .NET 的静态构造函数是否线程安全?答案是肯定的!
  • .NET 快速重构概要1
  • .net 使用$.ajax实现从前台调用后台方法(包含静态方法和非静态方法调用)
  • .net 写了一个支持重试、熔断和超时策略的 HttpClient 实例池
  • .NET开源快速、强大、免费的电子表格组件
  • /usr/bin/perl:bad interpreter:No such file or directory 的解决办法
  • [ 蓝桥杯Web真题 ]-布局切换
  • [2017][note]基于空间交叉相位调制的两个连续波在few layer铋Bi中的全光switch——
  • [20180312]进程管理其中的SQL Server进程占用内存远远大于SQL server内部统计出来的内存...