首页 > 其他分享 >初识HTML(一)

初识HTML(一)

时间:2024-03-28 18:02:40浏览次数:24  
标签:标签 初识 HTML 超链接 跳转 换行符 属性

什么是HTML?

  • HTML是一种超文本标记语言。
  • 超文本(链接)
  • 标记(带尖括号的标签)

标签语法

- 标签都是成对出现的,中间可以包裹内容

- <>里面放标签的名字,一般都是小写

- 结束标签多一个 /

- 标签还可以分为单标签、双标签

单标签

<input type="text">

双标签

<strong>加粗</strong>

HTML基本骨架

  • html:包裹了整个网页
  • head:表示网页的头部
  • body:表示网页的主体

标签的关系

  • 父子关系(嵌套关系)
<html>
    <body>
    </body>
</html>
  • 兄弟关系(并列关系)
<head>
</head>
<body>
</body>

标题标签

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

特点:

  • 独占一行
  • 字号逐级减小
  • 文字加粗

注:h1标签只能用一次,h2~h6没有次数限制

段落标签

<p>我是段落</p>

特点:

  • 独占一行
  • 段落间有间隙

换行符和水平线标签

<br> //换行符
<hr> //水平线

注:换行符和水平线都是单标签

文本格式化标签

作用:为了强调语义,可以适当添加文本格式化标签。

标签名效果
strong加粗
em倾斜
ins下划线
del删除线

图像标签

作用:用来引入图片

<img src="./images/精灵图.jpg">

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

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

路径

路径指的是查找文件时,从起点到终点的路线。

路径分类:

   相对路径:从当前文件位置出发查找目标文件

<img src="./images/精灵图.jpg">
  • / 表示 进入某个文件夹里面
  • . 表示 当前 文件所在文件夹

    绝对路径:从盘符出发查找目标文件

<img src="D:/html/images/精灵图.jpg">

超链接

  作用: 点击跳转到其他页面。
<a href="https://www.baidu.com/">百度一下</a>

href属性是跳转的地址,是超链接标签的必须属性。

超链接默认是当前窗口跳转页面,添加target="_blank"属性可以实现在新窗口打开。

如果还不确定要跳转的链接,可以设置href="#",表示当前页面刷新一次。

音频标签

<audio src="音频的 URL"></audio>

常见属性

视频标签

<video src="视频的 URL"></video>

常见属性

标签:标签,初识,HTML,超链接,跳转,换行符,属性
From: https://blog.csdn.net/m0_73829587/article/details/137099237

相关文章

  • 【HTML】标签学习(下.1)
    (大家好哇,标签学习(上)的部分告别了一小段落,今天我们将继续来学习HTML(下)的相关知识,大家可以在评论区进行互动答疑哦~加油!......
  • 爬虫初识
    爬虫初识【一】爬虫介绍【1】定义爬虫是一种自动化获取互联网数据的技术,通过模拟浏览器行为,向目标网站发送请求并获取响应,然后解析响应中的数据。应用领域:爬虫可以应用于各种网站数据的获取【2】工作原理爬虫通过发送HTTP请求,模拟浏览器行为,获取网站的响应,并解析响应中的......
  • OpenCV初识
    1、OpenCV简介OpenCV(OpenSourceComputerVisionLibrary)是一个开源的计算机视觉和机器学习软件库。它由一系列的C函数和少量C++类构成,同时提供Python、Java和MATLAB等语言的接口,实现了图像处理和计算机视觉方面的很多通用算法。#导入OpenCV库importcv2#打印OpenCV......
  • 「DevExpress中文教程」如何将DevExtreme JS HTML编辑器集成到WinForms应用
    在本文中我们将演示一个混合实现:如何将webUI工具集成到WinForms桌面应用程序中。具体来说,我们将把DevExtremeJavaScriptWYSIWYGHTML编辑器(作为DevExtreme UI组件套件的一部分发布的组件)集成到WindowsForms应用程序中。获取DevExtremev23.2正式版下载DevExpress技术交......
  • HTML,CSS简单命令操作
    HTML、HTML5标题标签、段落标签<h1 id="title" class="title"> 标题</h1><p> 第一个段落</p>水平线<hr>按钮标签<button>按钮</button>给按钮添加属性(效果:点击按钮则变换)注:点击效果也涉及了JavaScript<!--给按钮添加属性,使点击按钮使标题变biaodom操作-->......
  • 【HTML】标签学习 (上.4)
    (注:续接【HTML】标签学习(上.3))(大家好哇,今天我们将继续来学习HTML的相关知识,大家可以在评论区进行互动答疑哦~加油!......
  • HTML 简介
    ​ HTML(HyperTextMarkupLanguage,中文:超文本标记语言)是一种用于创建网页结构和内容的标记语言。它由一系列标签组成,这些标签描述了网页中的各个元素和其它相关信息。通过使用HTML标签和属性,开发人员可以定义文本、图像、链接、表格、表单等元素,并控制它们的外观和行为。本文主......
  • html消息滚动
    案例1<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title>......
  • 网页图像渐变的方法(HTML+CSS) (渐变与切换)
    网页图像渐变的方法(HTML+CSS)(渐变与切换)Date:2024.03.27参考色彩runoob-渐变色工具渐变-水平多图效果HTML<divclass="conBoxpubCon"><divclass="imgBox"><imgclass="img1"src=""/><imgclass="......
  • flutter--day1 初识
    flutter&dart初体验前言:我平时只使用VUE和uniapp,最近的一个项目是一个pad上的app,于是了解了下移动端。现在比较流行的两个框架flutter和reactnative,刚好项目进入尾声,就来研究一下flutter吧!地址dart中文网:https://dart.cn/guidesflutter中文网:https://flutter.cn/docs......