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

注释

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

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

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

相关文章

springboot 数据库版本升级管理常用解决方案

目录 一、前言 1.1 单独执行初始化sql 1.2 程序自动执行 二、数据库版本升级管理问题 三、spring 框架sql自动管理机制 3.1 jdbcTemplate 方式 3.1.1 创建数据库 3.1.2 创建 springboot 工程 3.1.3 初始化sql脚本 3.1.4 核心配置类 3.1.5 执行sql初始化 3.2 配置文…

Flink源码之StreamTask启动流程

每个ExecutionVertex分配Slot后&#xff0c;JobMaster就会向Slot所在的TaskExecutor提交RPC请求执行Task&#xff0c;接口为TaskExecutorGateway::submitTask CompletableFuture<Acknowledge> submitTask(TaskDeploymentDescriptor tdd, JobMasterId jobMasterId, RpcTi…

微服务系列(2)--注册中心

在博文&#xff1a;微服务系列(1)里我们提到过注册中心的概念&#xff0c;简单来说微服务注册中心是一个用于存储和管理微服务实例信息的组件&#xff0c;它提供了服务注册、服务发现、服务健康检查等功能&#xff0c;以确保微服务之间的稳定通信。在微服务架构中&#xff0c;各…

【Linux】ICMP协议——网络层

ICMP协议 ICMP&#xff08;Internet Control Message Protoco&#xff09;Internet控制报文协议&#xff0c;用于在IP主机、路由器之间传递控制信息&#xff0c;是一个TCP/IP协议。该协议是用来检测网络传输的问题&#xff0c;相当于维修人员的工具。 ICMP协议的定位 在TCP/IP…

【vue3】解决scope.row.id套标签太多无法随着点击按钮而变化

实现要求:再点击每一行的修改按钮时&#xff0c;动态拿取该行的id传给后端作为pk(主键)实现数据库数据的修改&#xff0c;并显示在vue前端&#xff1b; 我遇到的问题&#xff1a;在2处使用 scope 作用域插槽拿取每一行的数据&#xff0c;在3处&#xff0c;删除按钮那一行代码&a…

机器学习 | Python实现KNN(K近邻)模型实践

机器学习 | Python实现KNN(K近邻)模型实践 目录 机器学习 | Python实现KNN(K近邻)模型实践基本介绍模型原理源码设计学习小结参考资料基本介绍 一句话就可以概括出KNN(K最近邻算法)的算法原理:综合k个“邻居”的标签值作为新样本的预测值。更具体来讲KNN分类过程,给定一个训…

基于深度信念神经网络+长短期神经网络的降雨量预测,基于dbn-lstm的降雨量预测,dbn原理,lstm原理

目录 背影 DBN神经网络的原理 DBN神经网络的定义 受限玻尔兹曼机(RBM) LSTM原理 DBN-LSTM的降雨量预测 基本结构 主要参数 数据 MATALB代码 结果图 展望 背影 DBN是一种深度学习神经网络,拥有提取特征,非监督学习的能力,通过dbn进行无监督学习提取特征,然后长短期神经…

突然让做性能测试?试试RunnerGo

当前&#xff0c;性能测试已经是一名软件测试工程师必须要了解&#xff0c;甚至熟练使用的一项技能了&#xff0c;在工作时可能每次发版都要跑一遍性能&#xff0c;跑一遍自动化。性能测试入门容易&#xff0c;深入则需要太多的知识量&#xff0c;今天这篇文章给大家带来&#…

Unity zSpace 开发

文章目录 1.下载 zSpace 开发环境1.1 zCore Unity Package1.2 zView Unity Package 2. 导入工程3. 发布设置4.功能实现4.1 用触控笔来实现对模型的拖拽&#xff1a; 5. 后续更新 1.下载 zSpace 开发环境 官网地址 1.1 zCore Unity Package zSpace 开发核心必须 1.2 zView …

Android核心开发之——OpenGL

OpenGL是一种用于编程计算机图形的应用程序编程接口&#xff08;API&#xff09;。它提供了一系列函数和方法&#xff0c;用于绘制2D和3D图形&#xff0c;以及进行渲染和图形处理。OpenGL可以跨平台使用&#xff0c;支持各种操作系统和硬件设备。它被广泛应用于游戏开发、虚拟现…

【Unity每日一记】向量操作摄像机的移动(向量加减)

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;uni…

Python Opencv实践 - 图像放射变换

import cv2 as cv import numpy as np import matplotlib.pyplot as pltimg cv.imread("../SampleImages/pomeranian.png", cv.IMREAD_COLOR) rows,cols img.shape[:2] print(img.shape[:2])#使用getAffineTransform来获得仿射变换的矩阵M #cv.getAffineTransform(…