HTML基础

已于 2024-08-22 12:41:50 修改
阅读量1k 收藏 29
点赞数 14
分类专栏： HTML5+CSS3 文章标签： html 前端
于 2024-08-22 12:39:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43108180/article/details/141424910
版权

一、基本语法

1、标签语法

HTML 超文本标记语言——HyperText Markup Language。

  • 超文本：链接

  • 标记：标签，带尖括号的文本

2、标签结构

  • 标签要成对出现，中间包裹内容

  • <>里面放英文字母（标签名）

  • 结束标签比开始标签多 /

  • 标签分类：双标签和单标签

<strong>需要加粗的文字<strong>
<br>
<hr>

3、基本骨架

  • html：整个网页

  • head：网页头部，用来存放给浏览器看的信息，例如 CSS

    • title：网页标题

  • body：网页主体，用来存放给用户看的信息，例如图片、文字

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

注：VS Code 可以快速生成骨架：在 HTML 文件（.html）中，!（英文）配合 Enter / Tab 

4、标签关系

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

（1）父子关系（嵌套关系）：子级标签换行且缩进（Tab键）

（2）兄弟关系（并列关系）：兄弟标签换行要对齐

5、注释

概念：注释是对代码的解释和说明，能够提高程序的可读性，方便理解、查找代码。

注释不会再浏览器中显示。

在 VS Code 中，添加 / 删除注释的快捷键：Ctrl + /

<!-- 我是 HTML 注释 -->

二、常用标签

1、标题标签

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

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

显示特点：

  • 文字加粗

  • 字号逐渐减小

  • 独占一行（换行）

注：h1 标签在一个网页中只能用一次，用来放新闻标题或网页的 logo，h2 ~ h6 没有使用次数的限制

2、段落标签

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

<p>段落</p>

显示特点：

  • 独占一行

  • 段落之间存在间隙

3、换行和水平线标签

  • 换行：br

  • 水平线：hr

<br>
<hr>

4、文本格式化标签

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

提示：strong、em、ins、del 标签自带强调含义（语义）。

5、图像标签

作用：在网页中插入图片

<img  src="图片的 URL">

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

（1）图像属性

  • 属性名="属性值"

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

（2）相对路径和绝对路径

概念：路径指的是查找文件时，从起点到终点经历的路线。

路径分类：

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

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

    • Windows 电脑从盘符出发

    • Mac 电脑从根目录出发

特殊符号：

  • / 表示进入某个文件夹里面 → 文件夹名/

  • . 表示当前文件所在文件夹 → ./

  • .. 表示当前文件的上一级文件夹 → ../

提示：

Windows 默认是 \ ，其他系统是 /，建议统一写为 /

特殊的绝对路径 → 文件的在线网址：https://www.itheima.com/images/logo.png "

7、超链接标签

作用：点击跳转到其他页面。

<a href="https://www.baidu.com">跳转到百度</a>

href 属性值是跳转地址，是超链接的必须属性。

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

拓展：开发初期，不确定跳转地址，则 href 属性值写为 #，表示空链接，页面不会跳转，在当前页面刷新一次。

<a href="https://www.baidu.com/">跳转到百度</a>

<!-- 跳转到本地文件：相对路径查找 --> 
<!-- target="_blank" 新窗口跳转页面 --> 
<a href="./01-标签的写法.html" target="_blank">跳转到01-标签的写法</a>

<!-- 开发初期，不知道超链接的跳转地址，href属性值写#，表示空链接，不会跳转 -->
<a href="#">空链接</a>

8、音频和视频标签

（1）音频标签

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

拓展：书写 HTML5 属性时，如果属性名和属性值相同，可以简写为一个单词。

<!-- 在 HTML5 里面，如果属性名和属性值完全一样，可以简写为一个单词 -->
<audio src="./media/music.mp3" controls loop autoplay></audio>

（2）视频标签

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

<!-- 在浏览器中，想要自动播放，必须有 muted 属性 -->
<video src="./media/vue.mp4" controls loop muted autoplay></video>

三、综合案例

1、个人简介

2、Vue简介

半痴半傻半疯颠
关注
专栏目录
HTML基础知识总结
qq_40046544的博客
11-14 4306
HTML 是用来描述网页地一种语言。HTML 指的是超文本标记语言（Hyper Text Markup Language）HTML 不是一种编程语言，而是一种标记语言（markup language）标记语言是一套标记标签（markup tag）HTML 使用标记标签来描述网页声明必须是 HTML 文档的第一行，位于 html 标签之前。声明不是 HTML 标签；它是指示 web 浏览器使用哪个 HTML 版本进行编写的指令。
HTML零基础入门教程（详细）
热门推荐
ZONGXP的博客
10-22 23万+
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 指的是超文本标记语言:HyperTextMarkupL...
web前端面试-10大经典题（HTML基础）
厚积薄发.
11-21 4507
web前端面试-10大经典题（HTML基础） ✨个人笔记博客✨星月前端博客✨原创不易，还希望各位大佬支持一下✏️评论，你的意见是我进步的财富！
【HTML】HTML入门：构建网页的基础
qq_70814008的博客
03-26 1万+
HTML是一种标记语言，它通过一系列的标签（tags）来描述网页的结构。这些标签可以定义文本、图片、链接等内容，以及它们在浏览器中的显示方式。HTML是构建网页的基石，学习它不仅能够为你打开Web开发的大门，还能帮助你更好地理解互联网的工作原理。以下是一份详细的总结，旨在指导你如何高效地学习HTML。
HTML基础 - HTML列表
qq_45383769的博客
04-08 1万+
HTML基础 - HTML列表 html的列表主要有两种，一种是无序列表，一种是有序列表。 1.无序列表 <ul> <li> (1)无序列表基础版 主要使用<ul>标签和<li>标签 无序列表表示只是列表而已，没有什么顺序之分它的展现形式是由<ul>标签包裹着<li>标签： (2)无序列表实心方块图标 关键语句： <ul style="list-style-type: square;"> (3)无序列表空心圆图标 关键
HTML零基础入门教程完整版
哈哈
09-11 2万+
HTML零基础入门教程完整版
html基础（全）
hl826669的博客
05-15 1827
input>表单元素。
HTML基础+案例（适合零基础小白）
qq_42907061的博客
06-16 1752
HTML练习 1. HTML简介 HTML注释标记是<!- -> HTML不用区分大小写，但是建议用小写 当网页既设置了背景图像有设置了背景色，那么以背景图片为主 URL：统一资源定位器（uniform Resource Locator） http：超文本传输协议 2. HTML基本标签 斜体：<i></i> 粗体：<b></b> 删除线：<s></s> 一条横线：<hr> 段落标记：<p>&l
HTML基础教程（非常详细）从零基础入门到精通，看完这一篇就够了。
m0_61869253的博客
09-07 4054
HTML全称Hyper Text Markup Language, 翻译成中文就是超文本标记语言，是一种最基础的网页开发语言, 需要注意的是HTML并不是编程语言, 而是一种标记语言超文本可以理解为超越了文本的意思, 也就是超级文本, 超文本不只是普通的文本内容, 还可以加入图片,视频,声音等内容, 甚至可以从一个文件跳转到另一个文件(超级链接文本)标记语言可以理解为一套标记标签,也就是由许多标记标签组成的语言。
【前端学习笔记】HTML 基础
2401_84304834的博客
04-18 2505
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它允许用户通过结合文本、图像、链接、格式等元素来构建网页，并通过浏览器进行解析和显示。HTML文件通常以.html或.htm为扩展名，包含一系列的标签（tags），这些标签用于定义网页的结构、样式和内容。
HTML基础模板
qq_61690596的博客
07-18 2151
HTML基本模板，每个基础元素的内容和作用
HTML基础练习题
weixin_50108821的博客
09-23 1万+
第一题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>嘿嘿嘿</title> </head> <body> <table border="1" cellspacing="0" cellpadding="0"> <tr align="center">
《Web程序设计基础R》实验报告---HTML基础
一只小鹿的博客
12-21 4881
一、实验目的 1．掌握常用的HTML语言标记； 2．利用文本编辑器建立HTML文档，制作简单表单页面。 二、实验环境 计算机、Windows10 操作系统 三、实验内容、源码及运行结果 1．  实验内容 在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。（请仔细阅读下列程序语句，理解每条语句的作用） 源程序清单如下： 1. <html> 2. <head> 3. <title>Example</title&
HTML 基础标签——元数据标签 ＜meta＞
Allen-
11-01 358
标签通常位于文档的部分。它用于定义文档的元数据，包括字符编码、文档描述、关键字、作者信息等。这些信息可以帮助浏览器正确解析和显示文档，同时还可以提供搜索引擎索引所需的信息。
HTML 标签属性——id、class、style 等全局属性详解
Allen-
11-02 195
HTML全局属性是一组可以应用于几乎所有HTML元素的特殊属性。这些属性提供了额外的功能和信息，使得网页开发者能够更好地控制元素的行为、样式和可访问性。
CSS:基础选择器,文字控制属性(HTML)
最新发布
m0_75035023的博客
11-04 198
CSS:基础选择器,文字控制属性(HTML),javaweb
Html编写发射粒子爱心
m0_58419490的博客
10-31 1300
【代码】Html编写发射粒子爱心。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值