HTML详解连载(1)

news2025/6/20 19:49:34

这里写目录标题

    • HTML
      • 定义
      • HTML 超文本标记语言
      • 标签语法
      • 注意
      • 拓展
    • HTML基本骨架
      • 解释
      • VS Code 快速生成骨架:
      • 标签的关系
        • 父子关系(嵌套关系)
        • 兄弟关系(并列关系)
      • 代码格式
      • 注释
    • 标题标签
    • 标签名:h1-h6(双标签)
      • 经验:
    • 段落标签
      • 标签名:p(双标签)
      • 显示特点:独占一行、段落之间存在间隙
    • 换行和水平线标签
    • 文本格式化标签
      • 作用:
    • 图像标签-基本使用
      • 强调
      • 图像标签-属性
      • 属性名=“属性值”
    • 路径
      • 路径分类:
        • 相对路径
          • 强调
        • 绝对路径
    • 注释

HTML

定义

Hyper TextMarkup Language。
在这里插入图片描述

HTML 超文本标记语言

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

标签语法

<strong> 需要加粗的文字 </strong>
<strong>--开始标签
</strong>--结束标签

注意

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

拓展

双标签:成对出现的标签
单标签:只有开始标签,没有结束标签
<br>:换行
<hr>:水平线

HTML基本骨架

	<html>
	  <head>
	<title>网页标题</title>	
	</head>
	  <body>
	   		网页主体内容
      </body>
	</html>

在这里插入图片描述

解释

html:整个网页
head:网页头部,用来存放给浏览器看的信息,例如CSS
title:网页标题
body:网页主体,用来存放给用户看的信息,例如图片,文字

VS Code 快速生成骨架:

在HTML文件(.html)中,!(英文)配合Enter/Tab

标签的关系

作用:明确标签的书写位置,让代码格式更整齐

父子关系(嵌套关系)

	<html>
	    	  <head></head>
	</html>

兄弟关系(并列关系)

<head></head>
<body></body>

代码格式

父子关系:子集标签换行且缩进
兄弟关系:兄弟标签换行要对齐

注释

注释中...是注释内容

快捷键: Ctrl + /

在这里插入图片描述

标题标签

一般用在新闻标题、文章标题、网页区域名称、产品名称等等。

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

显示特点:文字加粗、字号逐渐减小、独占一行(换行)

经验:

h1标签再一个网页中只能用一次,用来放新闻标题或者网页的logo
h2-h6没有使用的限制

段落标签

一般用在新闻段落,文章段落,产品描述信息等。

标签名:p(双标签)

显示特点:独占一行、段落之间存在间隙

换行和水平线标签

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

文本格式化标签

作用:

为文本添加特殊格式,以突出重点。常见的文本格式:加粗、倾斜、下划线、删 除线等

  效果		标签名1		标签名2
  加粗		strong		b
  倾斜		em			i
  下划线	ins			u
  删除线	del			s

strong em ins del标签自带强调含义(语义)。
在这里插入图片描述

图像标签-基本使用

作用:在网页中插入图片

<img src=”图片的URL”>

强调

src用于指定图像的位置和名称,是的必须属性。

图像标签-属性

属性作用说明
alt替换文本图片无法显示的时候显示文字,可以不影响图片浏览
title提示文本鼠标悬停再图片上的时候显示的文字
width图片的宽度值为数字,没有单位 默认等比缩放
height图片的高度值为数字,没有单位

属性名=“属性值”

属性写在尖括号里面,标签名后面,标签名和属性之间用空格隔开,不区分先后顺序

路径

路径值得是查找文件是,从起点到终点经历的路线。

路径分类:

相对路径

从当前文件位置出发查找目标文件

强调

/表示进入莫格文件夹里面
.表示当前文件所在文件夹
…表示当前文件的上一个文件夹

绝对路径

从盘符出发查找目标文件
Windows默认是\,其他系统是/

注释

自己通过黑马课程并通过自己整合其他资料总结的笔记,希望能帮助大家。

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

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

相关文章

十二种排序算法(附动图)

排序算法 一、基本介绍 ​ 排序算法比较基础&#xff0c;但是设计到很多计算机科学的想法&#xff0c;如下&#xff1a; ​ 1、比较和非比较的策略 ​ 2、迭代和递归的实现 ​ 3、分而治之思想 ​ 4、最佳、最差、平均情况时间复杂度分析 ​ 5、随机算法 二、排序算法的分类 …

Linux系统目录结构介绍

Linux系统目录结构介绍 一、目录结构 Linux系统的目录结构是一颗倒状树&#xff1a; “/”表示最顶层的目录&#xff0c;叫做根目录。 &#xff08;1&#xff09;pwd可以显示当前所在的目录。 &#xff08;2&#xff09;cd可以切换当前的目录&#xff0c;例如&#xff0c;…

Jenkins部署python接口自动化测试

一、点击新建Item 二、指定源码和分支 私钥位置&#xff1a;C:\Users\Administrator\.ssh 文件下 三、构建脚本编写 四、构建后操作 指定输出的allure 结果目录

jmeter性能测试常见的一些问题

一、request 请求超时设置 timeout 超时时间是可以手动设置的&#xff0c;新建一个 http 请求&#xff0c;在“高级”设置中找到“超时”设置&#xff0c;设置连接、响应时间为2000ms。 1. 请求连接超时&#xff0c;连不上服务器。 现象&#xff1a; Jmeter表现形式为&#xff…

识别和应对内存抖动

关于作者&#xff1a;CSDN内容合伙人、技术专家&#xff0c; 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 &#xff0c;擅长java后端、移动开发、人工智能等&#xff0c;希望大家多多支持。 目录 一、导读二、概览三、案例分析3.1 使用memory-profiler3.2 使用 cp…

ArduPilot飞控之FAILSAFE机制

ArduPilot飞控之FAILSAFE机制 1. 源由2. 设计2.1 遥控信号丢失2.1.1 触发原因2.1.2 场景分析2.1.3 重要参数 2.2 电池低电2.2.1 触发原因2.2.2 场景分析2.2.3 重要参数 2.3 地面站/电传信号丢失2.3.1 触发原因2.3.2 场景分析2.3.3 重要参数 2.4 EKF故障(Extended Kalman Filter…

解密创意保护的钥匙:软著申请流程详解

引言 在当今数字化的浪潮下&#xff0c;软件已经渗透到我们生活的方方面面&#xff0c;从工作到娱乐&#xff0c;从沟通到创新。每一个看似简单的应用程序背后&#xff0c;都蕴藏着无限的创意和智慧。然而&#xff0c;这些创意往往也伴随着被复制、盗用甚至侵权的风险。为了保…

什么是BFC?它有什么作用?如何创建BFC?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 什么是BFC⭐ BFC的作用⭐ 创建BFC的方法⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个专栏是为那些对Web…

【100个 Unity实用技能】☀️ | Unity UGUI ScrollView滑动到指定位置

Unity 小科普 老规矩&#xff0c;先介绍一下 Unity 的科普小知识&#xff1a; Unity是 实时3D互动内容创作和运营平台 。包括游戏开发、美术、建筑、汽车设计、影视在内的所有创作者&#xff0c;借助 Unity 将创意变成现实。Unity 平台提供一整套完善的软件解决方案&#xff…

JMeter常用功能及使用方法详解

JMeter被广泛应用于软件性能测试&#xff0c;是一个开源的、纯Java编写的测试工具&#xff0c;其中包括了很多强大的功能。以下将重点介绍JMeter常用功能及使用方法。 一、JMeter压力测试 1.什么是JMeter压力测试&#xff1f; JMeter压力测试就是模拟多种负载条件并分析不同条…

【雕爷学编程】Arduino动手做(07)---电位器模块之电位器调速并带蜂鸣的8位跑马灯

37款传感器与模块的提法&#xff0c;在网络上广泛流传&#xff0c;其实Arduino能够兼容的传感器模块肯定是不止37种的。鉴于本人手头积累了一些传感器和执行器模块&#xff0c;依照实践出真知&#xff08;一定要动手做&#xff09;的理念&#xff0c;以学习和交流为目的&#x…

详解使用SSH远程连接Ubuntu服务器系统

演示环境&#xff1a; 1.Windows10系统 2.VMware Workstation Pro虚拟机 2.Ubuntu16.04.6&#xff08;以上版本通用&#xff09; 回归正题 一、在Ubuntu端&#xff1a; 1.首先需要安装SSH服务器&#xff0c;在ubuntu终端输入以下指令 sudo apt-get install ssh2.输入你的ubu…

数据安全加固:深入解析滴滴ES安全认证技术方案

前文分别介绍了滴滴自研的ES强一致性多活是如何实现的、以及如何提升ES的性能潜力。由于ES具有强大的搜索和分析功能&#xff0c;同时也因其开源和易于使用而成为黑客攻击的目标。近些年&#xff0c;业界ES数据泄露事件频发, 以下是一些比较严重的数据泄露案件&#xff1a; 202…

基于 ChatGLM2 和 OpenVINO™ 打造中文聊天助手

点击蓝字 关注我们,让开发变得更有趣 作者 | 英特尔 AI 软件工程师 杨亦诚 排版 | 李擎 基于ChatGLM2和OpenVINO™打造中文聊天助手 ChatGLM 是由清华大学团队开发的是一个开源的、支持中英双语的类 ChatGPT 大语言模型&#xff0c;它能生成相当符合人类偏好的回答, ChatGLM2 …

160. 相交链表 题解

题目描述&#xff1a;160. 相交链表 - 力扣&#xff08;LeetCode&#xff09; 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返回 null 。 注&#xff1a;本题中链表相交是“Y”型的&am…

KDD 2023 | 美团技术团队精选论文解读

本文精选了美团技术团队被KDD 2023收录的7篇论文进行解读&#xff0c;论文覆盖了Feed流推荐、多模态数据、实例分割、用户意图预测等多个方向。这些论文也是美团技术团队与国内多所高校、科研机构合作的成果。希望给从事相关研究工作的同学带来一些启发或者帮助。 ACM SIGKDD&a…

(el-switch)操作(不使用 ts):Element-plus 中 Switch 将默认值修改为 “true“ 与 “false“(字符串)来控制开关

Ⅰ、Element-plus 提供的 Switch 开关组件与想要目标情况的对比&#xff1a; 1、Element-plus 提供 Switch 组件情况&#xff1a; 其一、Element-ui 自提供的 Switch 代码情况为(示例的代码)&#xff1a; // Element-plus 自提供的代码&#xff1a; // 此时是使用了 ts 语言环…

如何理解MySQL隔离性---3个记录隐藏字段、undo日志、Read View

目录 一、3个记录隐藏字段 二、undo 日志 三、read view 一、3个记录隐藏字段 本片文章是帮助理解上篇文章Mysql隔离性的辅助知识。 mysql在建表时&#xff0c;不仅仅创建了表的结构&#xff0c;还创建了3个隐藏字段。 DB_TRX_ID &#xff1a;6 byte&#xff0c;最近修改( 修…

uniapp-原生地图截屏返回base64-进行画板编辑功能

一、场景 vue写uniapp打包安卓包&#xff0c;实现原生地图截屏&#xff08;andirod同事做的&#xff09;-画板编辑功能 实现效果&#xff1a; 二、逻辑步骤简略 1. 由 原生地图nvue部分&#xff0c;回调返回 地图截屏生成的base64 数据&#xff0c; 2. 通过 uni插件市场 im…

Go异常处理机制panic和recover

recover 使用panic抛出异常后, 将立即停止当前函数的执行并运行所有被defer的函数&#xff0c;然后将panic抛向上一层&#xff0c;直至程序crash。但是也可以使用被defer的recover函数来捕获异常阻止程序的崩溃&#xff0c;recover只有被defer后才是有意义的。 func main() { p…