html(超文本标记语言)

免责声明

学习视频来自 B 站up主泷羽sec,如涉及侵权马上删除文章。

笔记的只是方便各位师傅学习知识,以下代码、网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负。

B站地址:https://space.bilibili.com/350329294

1.HTML 简介

html 是用来描述网页的一种语言。

html指的是超文本标记语言:HyperText Markup LAnguage

html不是一种编程语言,而是一种标记语言,标记语言是一套标记标签(markup tag)

html使用标记标签来描述网页

html文档包含了html标签及文本内容

html文档也叫做web页面

2.文HTML 基本结构概述

HTML(超文本标记语言)网页有一个标准的结构,主要由以下几个关键部分组成:文档类型声明,HTML根元素,头部(head)和主体(body)部分。这种结构为浏览器解析和显示网页内容提供了清晰的框架。

3.文档类型声明

<!DOCTYPE html>:这是html5的文档类型声明。它必须位于html文件的第一行,作用是告知浏览器文档所遵循的html版本,以便浏览器能够正确的渲染页面。对于html5来说,这个声明简洁明了,同意了htnl文档类型的标准,取代了以往复杂的 DTD(文档类型定义)声明。

4.HTML根元素(<html>)

<html>:作为html文档的根标签,所有其他的html元素都被包含在它里面。它有开始标签<html>和结束标签</html>。这个标签界定了整个html文档的范围,浏览器只会识别其中的内容作为有效的html代码。

5.头部分(<head>)

<head>:这部分包含了关于网页的元数据,这些信息对浏览器的渲染和网页的展示特性有重要作用,但不会直接在网页的可见区域现实。

<title>:用于定义网页的标题,标题内容会现实在浏览器的标题栏或者标签页上。

eg :

<title>精彩网页世界</title>。

这是用户识别网页的重要标识,同时也对搜索引擎优化(SE0)有一定影响

<meta>:用于提供多种类型的元数据。常见的有字符串编码设置,如<meta charset="UTF_8">,它确保浏览器能够正确解析和现实网页中的各种字符,支持多种语言的字符集。另外还可以用于设置页面描述关键词信息等,如

<meta name="description"> content="这是一个充满趣味的网页">

用于向搜索引擎描述网页内容

<meta name="keywords" content="网页,趣味,示例">可设置关键词帮助搜索引擎索引网页。

<link>:主要用于链接外部资源,最常见的是链接CSS样式表。

<link rel ="stylesheet" href="styles.css">,其中rel="stylesheet"表明这是一个样式表链接,href属性指定了CSS文件路径,通过这种方式可以实现网页内容与样式的分离,方便网页设计和维护

<script>:可用于在Html文档中嵌入JavaScript代码或引用外部的Javascript文件。若果是嵌入代码:

<script>alert('欢迎来到');</script>

若引用外部文件则是

<script src="script.js"></script>,这里src属性指定了JavaScript文件的路径。脚本可以为网页添加交互功能

6.主体部分

<body>:包含了所有在网页中可见的内容,如文本,图像,超链接,表格,表单等各种网页元素。

文本元素:可以使用段落标签<p>来组织文本,如<p>这是一段普通的文本内容。</p>
标题标签<h1>-<h6>可用于创建不同级别的标题,<h1>表示最高级别的标题,重要性依次递减如:<h1>主标题</h1><h2>副标题</h2>

图像元素:使用<img>标签来插入图像,如<img src="image.jpg" alt="图像描述">,src属性指定图像的来源路径,alt属性在图像无法正常现实时提供代替文本,对于可访问行和SE0都很重要。

超链接元素:通过<a>标签创建超链接,如<a href="https://www.baidu.com"> 点击这个</a>

href属性定义了链接的目标url,标签内的文本是用户看到的可点击的链接内容。

表格元素:使用<table>标签创建表格,<tr>表示表格行,<td>表示表格单元格

<table>

<tr>

<td>单元格1</td>

<td>单元格2</td>

</tr>

<tr>

<td>单元格3</td>

<td>单元格4</td>

</tr>

</table>

表单元素:用于收集用户输入信息,如<from>标签包含表单内容,<input>标签用于创建各种输入框,如<input type="text" placeholder="请输入用户名">用于创建一个文本输入框,type属性指定输入类型,placeholder属性显示提示文本。

以下是一个完整的简单html网页示例:

<!DOCTYPE html>

<html>

<head>

<title>示例网页</title>

<meta charset="UTF-8">

</head>

<body>

<h1>欢迎来到网页</h1>

<p>这是网页的主要内容部分,这里可以展示各种信息。</p>

<img src="https://www.baidu.com">访问示例网站</a>

</body>

</html>

相关推荐
卸任7 小时前
Vibe coding工具使用心得
前端·ai编程
brien98 小时前
为什么模型标称 1M,Google Antigravity 聊到 256K 却突然失忆?我们给它做了个原生行内监控圆环
前端
修炼的dance8 小时前
录屏关键帧间隔多少合适?六档实测,2秒到10秒小了75.6%
前端
Lank_M8 小时前
关键帧从1秒拉到10秒,录屏小87.3%,摄像头小10.8%
前端
补码缩写8 小时前
用 ffprobe 拆录屏,八成字节在 29 个关键帧上
前端
百思不得小李8 小时前
一个复杂的动态表单是如何实现的
前端·设计模式
陈随易9 小时前
Cmder 停更 17 个月,2.0 支持 Windows Terminal
前端·后端·程序员
风骏时光牛马9 小时前
前沿视界
前端
kyriewen9 小时前
我扫了 814 个依赖,97 个还敢要 Node 10
前端·javascript·程序员
陈随易9 小时前
3000 万人在用的翻译插件,重写一遍就是一门生意
前端·后端·程序员