HTML详解连载(1)

HTML详解连载(1)

    • 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默认是\,其他系统是/

注释

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Jenkins 监控dist.zip文件内容发生变化 触发自动部署

为Jenkins添加plugin http://xx:xx/manage 创建一个任务 构建触发器 每3分钟扫描一次&#xff0c;发现指定文件build.zip文件的MD5发生变化后 触发任务

IntelliJ IDEA(简称Idea) 基本常用设置及Maven部署---详细介绍

一&#xff0c;Idea是什么&#xff1f; 前言&#xff1a; 众所周知&#xff0c;现在有许多编译工具&#xff0c;如eclipse&#xff0c;pathon, 今天所要学的Idea编译工具 Idea是JetBrains公司开发的一款强大的集成开发环境&#xff08;IDE&#xff09;&#xff0c;主要用于Java…

qemu简单使用

参考&#xff1a; 记一次全设备通杀未授权RCE的挖掘经历 claude1 安装使用 附件下载 下载后拖到虚拟机 解压 使用root用户 运行.sh脚本即可 运行脚本解读 #!/bin/bashsudo qemu-system-mipsel \-cpu 74Kf \-M malta \-kernel vmlinux-3.2.0-4-4kc-malta \ -hda debian…

【C语言】每日一题(寻找数组的中心下标)

寻找数组的中心下标&#xff0c;链接奉上 方法 暴力循环前缀和 暴力循环 ​​​​​​​思路&#xff1a; 依旧是我们的老朋友&#xff0c;暴力循环。 1.可以利用外层for循环&#xff0c;循环变量为数组下标&#xff0c;在循环内分别求出下标左边与右边的sum 2.在边界时讨论&…

【华为Datacom 综合拓扑案例—分享篇】

拓扑图 题目要求 实验要求&#xff1a; 1、PC1\PC2\PC3\PC4采用DHCP自动获取IP地址&#xff0c;SW5作为服务器&#xff0c;SW3和SW4作为中继 创建地址池ip pool huawei1和ip pool huawei2&#xff0c;租期都为2天 2、SW3与SW4做链路聚合&#xff0c;采用LACP模式。SW3作为主…

VScode如何设置中文教程

前言&#xff1a;打开VSCode软件&#xff0c;可以看到刚刚安装的VSCode软件默认使用的是英文语言环境&#xff0c;但网上都是vscode中文界面教你怎么设置中文&#xff0c;可能不利于小白阅读&#xff0c;所以重装vscode&#xff0c;手摸手从英文变成中文。 设置为中文 打开VS…

Mirror网络库 | 实战

此篇为下文&#xff0c;上篇&#xff1a;Mirror网络库 | 说明 一、官方实例说明 场景名说明AdditiveLevels场景为“关卡”&#xff0c;附加形式加载AdditiveScenes加载卸载附加场景Basic基础的连接/断开&#xff0c;消息发送Benchmark服务器1000“怪物”生成性能测试Benchmark…

PHP最简单自定义自己的框架控制器自动加载运行(四)

1、实现效果调用控制中方法 2、创建控制器indexCrl.php <?php class indexCrl{public function index(){echo 当前index控制器index方法;} } 3、KJ.php字段加载控制器文件 public static function run(){//定义常量self::_set_const();//创建模块目录self::_mk_module();…

Vue-打印组件页面

场景: 需要将页面的局部信息打印出来&#xff0c;只在前端实现&#xff0c;不要占用后端的资源。经过百度经验&#xff0c;决定使用 print-js和html2canvas组件。 1. 下载包 npm install print-js --save npm install --save html2canvas 2. 组件内引用 <script>impo…

win11右下角图标(网络,音量,电量)点击无反应问题,两分钟解决!

win11系统用的好好的&#xff0c;突然有一天任务栏右下角的常用三件套&#xff08;网络&#xff0c;音量&#xff0c;电量&#xff09;左键单击没反应&#xff0c;无法方便的调节音量和连接wifi&#xff0c;如下图所示&#xff0c;但是右键好用&#xff0c;不过不方便。网上查了…

spring按条件注入@Condition及springboot对其的扩展

概述 spring的ioc极大的方便了日常开发&#xff0c;但随着业务的迭代。配置的一些参数在某些情况下需要按条件注入。 比如原先定义的db公共模块下&#xff0c;相关的配置和工具类只是基于mysql的。但是后续有模块需要使用mongo/es等其他数据库&#xff0c;又想继续使用db公共…

RocketMQ消息轨迹产生的背景以及使用方式

这里是weihubeats,觉得文章不错可以关注公众号小奏技术&#xff0c;文章首发。拒绝营销号&#xff0c;拒绝标题党 背景 最近在维护RocketMQ经常会出现这种问题 消息发送方和接收方出现扯皮&#xff0c;消息发送方说我的消息已经发送成功了&#xff0c;消费方说我没接收到消息。…

AI黑马挑战赛,探索研发新趋势丨IDCF

随着AI的出现&#xff0c;获取知识的成本大幅降低&#xff0c;当DevOps与AI相结合时&#xff0c;必将产生全新的化学反应。不断涌现的AI新工具提醒我们&#xff0c;一个全新的研发工作范式正在逐渐形成。而DevOps的核心理念是敏捷协同&#xff0c;作为工程师&#xff0c;如何通…

【从零学习python 】19. 循环遍历列表和列表嵌套的应用

文章目录 列表的循环遍历1. 使用while循环2. 使用for循环3. 交换2个变量的值1. 列表嵌套2. 应用 进阶案例 列表的循环遍历 1. 使用while循环 为了更有效率的输出列表的每个数据&#xff0c;可以使用循环来完成 namesList [xiaoWang,xiaoZhang,xiaoHua] length len(namesLi…

基于C#的无边框窗体阴影绘制方案 - 开源研究系列文章

今天介绍无边框窗体阴影绘制的内容。 上次有介绍使用双窗体的方法来显示阴影&#xff0c;这次介绍使用API函数来进行绘制。这里使用的是Windows API函数&#xff0c;操作系统的窗体也是用的这个来进行的绘制。 1、 项目目录&#xff1b; 下面是项目目录&#xff1b; 2、 函数介…

浅谈早期基于模板匹配的OCR的原理

基于模板匹配的概念是一种早期的字符识别方法&#xff0c;它基于事先准备好的字符模板库来与待识别字符进行比较和匹配。其原理如下&#xff1a; 1. 字符模板库准备&#xff1a;首先&#xff0c;针对每个可能出现的字符&#xff0c;制作一个对应的字符模板。这些模板可以手工创…

同步_异步请求和Ajax并利用axios框架简化

目录 同步和异步 原生的Ajax 创建XMLHttpRequest对象 常用方法 常用属性 axios框架 同步和异步 同步请求&#xff1a;发送请求后&#xff0c;会做出回应&#xff0c;回应的内容会覆盖浏览器中的内容&#xff0c;这样会打断其他正常的操作&#xff0c;显得不太友好&#…

uni-app中使用pinia

目录 Pinia 是什么&#xff1f; uni-app 使用Pinia main.js 中引用pinia 创建和注册模块 定义pinia方式 选项options方式 定义pinia 页面中使用 pinia选项options方式 函数方式 定义pinia 页面中使用 函数方式 定义的pinia Pinia 是什么&#xff1f; Pinia&#xff0…

两个pdf合并成一个pdf怎么合并?这几个方法值得推荐

两个pdf合并成一个pdf怎么合并&#xff1f;pdf文件的合并是一个很常见的需求&#xff0c;特别是在处理工作文件或学习资料时。为了更好的帮助你了解如何将两个pdf文件合并成一个&#xff0c;下面就给大家详细介绍几种合并方法。 方法一&#xff1a;使用迅捷PDF转换器 这是一款…

Linux服务器上配置HTTP和HTTPS代理

本文将向你分享如何在Linux服务器上配置HTTP和HTTPS代理的方法&#xff0c;解决可能遇到的问题&#xff0c;让你的爬虫项目顺利运行&#xff0c;畅爬互联网&#xff01; 配置HTTP代理的步骤 1. 了解HTTP代理的类型&#xff1a;常见的有正向代理和反向代理两种类型。根据实际需求…