HTML-01我的第一个网页

注释

设么是注释

注释:代码不会执行:用来给开发人员看的

格式:

元素

其他的叫法:标签 标记

html 复制代码
<a href="">我的博客</a>

标签:Element 元素

元素的构成:开始标签 + 结束标签 +标签内容 +属性

属性:属性名+属性值

属性分类:

  • 局部属性:某些元素特有属性 例子 href 只用于a
  • 全局属性:所有元素通用 例子title

单标签 空元素

html 复制代码
<meta charset="utf-8">
<img src="" alt="" />

有些元素是没有闭合标签 ---也叫空元素

元素嵌套

元素之间不能彼此嵌套

html 复制代码
<div><p></div></p>

父元素 子元素 兄弟元素 祖先元素 后代元素

标准文档结构介绍

html 复制代码
<!DOCTYPE html>

声明文档 告诉浏览器当前使用的是html5

不写的话会出现怪异模式

html 复制代码
<html></html>

根元素:可以不写 浏览器会自行识别--建议还是写上

虽然 HTML 并不要求作者指定 元素的开始和结束标记,但作者必须这样做,因为这将允许他们为网页指定 lang。根据 RFC 5646: 识别语言的标签(也称为 BCP 47),在 元素上提供一个带有有效语言标记的 lang 属性,将有助于屏幕阅读技术确定要宣告的适当语言。标识语言标签应描述页面大部分内容所使用的语言。如果没有它,屏幕阅读器通常会默认使用操作系统设置的语言,这可能会导致发音错误。

在 元素中包含一个有效的 lang 声明,还可以确保页面的 中包含的重要元数据(如页面的
)也会被正确地宣告。

html 复制代码
<head></head>

机器可读的文档相关信息(元数据):对文件的描述信息

html 复制代码
<head>
<meta charset="utf-8">
<meta name="author" content="yzm"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
html 复制代码
<meta> 元素表示那些不能由其他 HTML 元相关(meta-related)元素表示的元数据信息。
<meta> 元素定义的元数据的类型包括以下几种:

如果设置了 name 属性,<meta> 元素提供的是文档级别(document-level)的元数据,应用于整个页面。
如果设置了 http-equiv 属性,<meta> 元素则是编译指令,提供的信息与类似命名的 HTTP 头部相同。
如果设置了 charset 属性,<meta> 元素是一个字符集声明,告诉文档使用哪种字符编码。
如果设置了 itemprop 属性,<meta> 元素提供用户定义的元数据。
html 复制代码
<title>第一个网页</title>

元素 定义文档的标题,显示在浏览器的标题栏或标签页上。 一个 元素只能包含一个 <title> 元素 页面标题和 SEO 页面标题的内容可能对搜索引擎优化(SEO)具有重要意义。通常,较长的描述性标题要比简短或一般性标题更好。标题的内容是搜索引擎算法用来确定在搜索结果中列出页面顺序的组件之一。同样,标题是初始的"挂钩",你可以通过它吸引浏览浏览结果页面的读者的注意力。

撰写好标题的一些准则和技巧:

避免使用一两个单词的标题。对于词汇表或参考样式的页面,请使用描述性短语或术语 - 定义对。

搜索引擎通常显示页面标题的前 55 至 60 个字符。超出此范围的文本可能会丢失,因此请尽量不要使标题更长。如果你必须使用较长的标题,请确保重要的部分出现在前面,并且标题中可能要删除的部分中没有关键内容。

不要使用"关键字集合"。如果标题只是单词列表,则算法通常会降低页面在搜索结果中的位置。

尝试确保你的标题在你自己的网站中尽可能唯一。标题重复(或几乎重复)可能会导致搜索结果不准确。

html 复制代码
<body>
	<!-- 所有的网页内容都写在这里 -->
	<a href="">我的博客</a>
</body>

HTML 元素表示 HTML 文档的内容。文档中只能有一个 元素。

相关推荐
datagear8 小时前
DataGear 6.0.0 新特性之本地图表
数据分析·html·数据可视化
我是大卫8 小时前
【图】React源码解析-从数据结构、依赖追踪机制、值传播与更新触发、以及性能陷阱与优化,深挖useContext的底层原理
前端·react.js·源码
谭光志8 小时前
深入浅出 RAG:用一个可运行的 Demo 讲透完整链路
前端·后端·ai编程
Cobyte8 小时前
使用 JavaScript 实现有限状态机的经典问题
前端·javascript·vue.js
道友可好8 小时前
前端工程师的 AI 时代生存指南
前端·人工智能·后端
●VON8 小时前
鸿蒙 PC Markdown 编辑器质量流水线:Web 构建、回归与 Release 门禁
前端·华为·编辑器·harmonyos·鸿蒙
acheding8 小时前
File System Access API 实战:让网页真正读写本地文件
前端·javascript·vue.js·编辑器·markdown
何时梦醒8 小时前
⚛️ React 19 + TypeScript 深度学习笔记 —— 从组件化思维到 WebGPU 端侧 AI 落地
前端·javascript·人工智能
橘子星9 小时前
在浏览器里跑大模型!用 WebGPU 零成本部署 DeepSeek-R1
前端·typescript