初识HTML（一）

已于 2024-03-28 14:30:50 修改
阅读量405 收藏 7
点赞数 12
文章标签： html 前端 html5
于 2024-03-28 14:17:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73829587/article/details/137099237
版权

什么是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>

常见属性

vx_wbl0522o
关注
  • 12
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
初识HTML语言
12-18
World Wide Web（万维网WWW）是一种建立在Internet上的、全球性的、交互的、多平台的、分布式的信息资源网络。它采用HTML语言描述超文本（Hypertext）文件。这里所说的超文本指的是包含有链接关系的文件，并且包含了...
初识HTML5，认识html
03-05
让刚学编程的人对HTML5有所了解，认识什么是html5,知道什么是HTML5，对html感兴趣
初识html5.ppt
07-02
初识html5.ppt
HTML-css初识.md
01-06
HTML-css初识.md
HTML初识基础认知 + HTML标签
12-05
HTML初识基础认知 + HTML标签
HTML中的文档声明
小卡酷谋的博客
04-22 1156
浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。书写文档声明原因是不同版本所支持的 HTML 元素类型是不同的，我需要告诉浏览器以哪一种文档类型方式来解析当前的这个 HTML 文件。模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的。
HTML随机点名程序
m0_65992344的博客
04-22 287
HTML随机点名程序
Web前端开发之HTML_3
zx1026409886的博客
04-23 902
表单在Web网页中用来给用户填写信息，从而采集用户信息，使网页具有交互功能。所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。表单是由容器和控件组成的，一个表单一般应包含用户填写信息的输入框，按钮等，这些输入框、按钮叫做控件，表单就是容器，它能够容纳各种各样的控件。
用html写一个旋转菜单
最新发布
liulang68的博客
04-24 613
【代码】用html写一个旋转菜单。
基于java,SpringBoot和HTML实验室预约管理系统设计
程序猿大波的博客
04-23 555
本研究旨在设计并实现一个基于Java, Spring Boot和HTML的实验室预约管理系统，以解决实验室资源分配不均、管理混乱和预约流程繁琐等问题。系统采用B/S架构设计，后端使用Spring Boot框架进行开发，前端使用HTML进行页面设计，实现了用户登录、实验室预约、查看预约状态以及管理员对实验室的管理等功能。首先，系统通过Spring Boot实现了快速开发和部署，简化了项目的配置和管理。
用html画一个四叶草
liulang68的博客
04-20 1260
以上是部分代码，需要请看主页加联系方式。
如何创建响应式HTML电子邮件模板
晓风晓浪
04-20 1157
在这个适合初学者的指南中，你将学习如何创建一个响应式电子邮件模板。你将跟随逐步说明以及代码片段设计一个在任何设备上都看起来很棒的电子邮件模板。这个项目非常适合渴望掌握电子邮件设计基础的新手！（本文视频讲解：java567.com）
HTML中的页面可见性
小卡酷谋的博客
04-22 377
所以，所谓页面可见性，就是获取当前页面的可见状态。因为对于用户来讲可以打开好多标签页面来回切换，然而始终只有一个页面处于显示状态。所以我们可以通过页面可见性（Page Visibility）API 来判断当前页面是显示状态还是隐藏状态。页面事件来判断当前页面可见性的状态，并针对性的执行某些任务。长期以来一直缺少一个判断用户是否正在浏览某个指定标签页的方法。里页面可见性接口就提供给了程序员一个方法，让他们使用。用户是否去看别的网站了？更多有关页面可见性的内容可以参阅。"页面切换了~目前不可见"
高频前端面试题汇总之HTML篇
qq_51685537的博客
04-18 689
不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在HTML⽂档的第⼀⾏。浏览器渲染页面的两种模式（可通过document.compatMode获取，比如，语雀官网的文档类型是。
html笔记 ai问答
qq_50437196的博客
04-23 404
在HTML中，`text-align: center` 属性是用来设置内联内容（比如文本或链接）在其块级容器（比如`<div>`, `<p>`, 或 `<h1>` 等）内部水平居中的。- `$("p span")`会选择所有位于`p`元素内的`span`元素，无论`span`元素嵌套在`p`元素内部的深度如何。在这个例子中，尽管 `text-align: center` 是应用在 `<h1>` 上的，但 `<span>` 作为内联元素会继承这个对齐方式，从而使得其中的文本居中。
HTML使用jQuery实现两个点击按钮，分别控制改文本字体颜色和字体大小
m0_65992344的博客
04-22 429
jQuery 是一个广泛使用的 JavaScript 库，旨在简化对 HTML 文档的操作、事件处理、动画效果和 AJAX 等操作。
CSS基础选择器
bengbeng2345的博客
04-23 370
h1,p,...所有元素{margin: 0px;}（消除默认边框的影响）标签内容（常用于去除页面标签默认的margin和padding）标签内容优先级：ID选择器>类选择器>标签选择器。
【HTML】H5新增元素记录
kakaai77的博客
04-20 519
MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input。data-*是全局属性，可以在所有元素中定义，并且javascript中操作DOM通过dataset轻松获取到。HTML元素用于在HTML中嵌入媒体播放器，支持文档中的视频播放。HTML元素用于在文档中嵌入音频内容，和video的用法类似。遇到浏览器不支持MP4格式时，会自动切换到webm的格式。用途：通常用于HTML和javascritp的数据传递。
Java读取html 中标签的值
zlfjavahome的专栏
04-23 487
如果返回的是json格式的字符串，可以用jsonUtil的工具类，直接转换成jsonobject，然后直接jsonObject.get("key")，就可以拿到数据，那如果返回的是一个html页面呢，应该怎么获取html页面中的信息呢;根据 HTML 的结构和需要提取的内容，可以使用 Jsoup 提供的选择器来获取指定的元素。Java 提供了多个库用于解析 HTML，比如 Jsoup 和 HtmlUnit。Elements这个对象提供了一系列类似于DOM的方法来查找元素，抽取并处理其中的数据。
初识html：简单的hello world网页制作
06-28
### 回答1： Hello World网页制作是HTML编程的入门级别。以下是制作Hello World网页的步骤： 1. 打开文本编辑器，如记事本或Sublime Text等。 2. 在文本编辑器中输入以下代码： <!DOCTYPE html> <html> <head> <title>Hello World</title> </head> <body> <h1>Hello World!</h1> </body> </html> 3. 保存文件，文件名为“helloworld.html”，确保文件类型为“所有文件”。 4. 在浏览器中打开“helloworld.html”文件，即可看到“Hello World!”的标题。 这个简单的网页由HTML标记组成，其中包括文档类型声明、HTML标签、标题标签和正文标签。HTML标记告诉浏览器如何显示网 ### 回答2： HTML是超文本标记语言的英文缩写，是用来制作网页的一门标记语言。在网页制作中，HTML主要用来编写网页的内容和结构，决定网页中各个元素的排列和位置。 制作HTML网页的第一步，是编写一个简单的“hello world”网页。这个网页的基本结构如下所示： <!DOCTYPE html> <html> <head> <title>我的第一个网页</title> </head> <body> <h1>Hello World！</h1> </body> </html> 该网页有三个部分组成： 1.头部（head）：用于描述文档的基本属性，包括文档类型声明、字符编码、文档title等。文档title会在浏览器的标题栏中显示。 2.主体（body）：用于展示文档内容。在body中，可以添加文本、图片、链接、表格等各种元素。 3.文本（text）：在该网页中，<h1>标签表示网页的标题，这里的标题是“Hello World！”。 当我们在编辑器中输入以上代码，保存为一个html文件，使用浏览器打开它，就可以看到“Hello World！”这个简单的网页了。 尽管这只是一个简单的网页，但它展示了HTML的基本属性，如何在HTML中描述文档的结构和展示内容，为之后学习其他更加复杂的HTML网页制作奠定了基础。 ### 回答3： HTML 是一种标记语言，是网页制作的基础。在制作网页时，首先需要创建一个 HTML 文件，并在文件中编写 HTML 代码。最简单的 HTML 代码就是 Hello World 网页。下面我来介绍一下如何制作这个网页。 首先，我们需要创建一个 HTML 文件。可以使用文本编辑器（如 Notepad++、Sublime Text 等）来创建 HTML 文件。以 Notepad++ 为例，创建一个新文本文件，将文件后缀名改为 .html，这样我们就创建了一个 HTML 文件。接下来，我们需要在 HTML 文件中编写代码。 HTML 代码由标签和内容组成。标签用来标记 HTML 文档中的不同部分，内容则是标签所包含的文本、图片、链接等等。以 Hello World 网页为例，我们可以编写以下代码： ``` <!DOCTYPE html> <!-- 文档类型声明 --> <html> <!-- html 根标签 --> <head> <!-- head 标签 --> <title>Hello World</title> <!-- title 标签，设置网页标题 --> </head> <body> <!-- body 标签，设置网页的 body 部分 --> <h1>Hello World</h1> <!-- h1 标题标签，设置网页主标题 --> <p>This is my first HTML web page.</p> <!-- p 标签，设置网页主要内容 --> </body> </html> ``` 上述代码中，第一行 ``<!DOCTYPE html>`` 是文档类型声明，告诉浏览器这是一个 HTML5 文档。接下来的 ``<html>`` 标签是 HTML 文档的根标签，所有其他标签都嵌套在它内部。``<head>`` 标签用于设置网页的头部内容，例如网页标题、样式表等等。标签内部的 ``<title>`` 标签用于设置网页标题。``<body>`` 标签用于设置网页的 body 部分，即网页中显示的内容。``<h1>`` 标签用于设置网页主标题，“Hello World” 就是我们的主标题。``<p>`` 标签是段落标签，用于设置网页主要内容。 将上述代码保存为 .html 后，我们就可以用浏览器打开它，看到我们刚刚编写的 Hello World 网页了。这是一个非常简单的网页，但它包含了 HTML 的基础标签和使用方法，对于初学者来说是非常有帮助的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值