HTML-介绍-MDN文档学习笔记

news2025/1/13 3:38:27

HTML-介绍

查看更多学习笔记:GitHub:LoveEmiliaForever
MDN中文官网

HTML-简介

MDN 文档引用:
就其核心而言,HTML 是一种相当简单的、由不同元素组成的标记语言,它可以被应用于文本片段,使文本在文档中具有不同的含义(它是段落吗?它是项目列表吗?它是表格吗?),将文档结构化为逻辑块(文档是否有头部?有三列内容?有一个导航菜单?),并且可以将图片,影像等内容嵌入到页面中。

HTML 的主要特性总结

  • 由不同元素组成的标记语言
  • 标记文本片段为元素,以赋予其含义
  • 组织文档,让其拥有逻辑结构
  • 给予文档额外的功能性

HTML-入门

HTML-组织结构

HTML 构建的文章总体由各种元素组成,元素之间可以嵌套,且由于不同元素含有不同意义,元素之间可以拥有逻辑和排版上的结构
HTML 文章与元素之间的关系大致可以表述如下图所示

在这里插入图片描述

HTML-元素分类

元素的具体结构

在这里插入图片描述

块级元素和内联元素
  • 块级元素在页面中以块的形式展现
    • 块级元素自己独占一行,通常是页面的结构元素
    • 块级元素可以嵌套在块级元素内,但不能嵌套在内联元素内
  • 内联元素通常嵌套在块级元素内
    • 内联元素不会导致换行
    • 内联元素通常和文本一起使用,并带来一些效果

❕元素的类型与 CSS 中display:类型并不一样,尽管 CSS 可以改变元素的显示,但不能够改变元素的类型,也改变不了元素间包含和被包含的关系

❕HTML5 重新定义了元素的分类,原因如上所示,害怕混淆

空元素

有一些元素没有结束标签,它不包含文章片段,而是用来执行一些额外行为
例如<img><img/>就是用来在文章中插入图片所使用的元素
这些元素称为空元素,如上所示在空元素标签的末尾添加/也是可行的,此时XML也可以识别该元素

HTML-元素属性

属性简介

元素的属性通常是定义元素行为或为元素添加额外信息

在这里插入图片描述

  • 属性和属性、属性和标签之间以空格分隔
  • 属性与属性值以=相连
  • 属性值由" "包裹
属性使用示例
    <a href="github.com" title="点击前往GitHub" target="_blank">前往GitHub</a>

示例元素的属性声明了元素的额外行为,与额外信息

  • href属性声明了跳转目的地这个额外信息
  • title声明了链接描述这个额外信息
  • target声明了跳转方式这个额外行为
布尔属性

有些属性可以不用写它的属性值,因为它只有一个和它属性名相同的属性值
这种属性称为布尔属性,通常是用于声明某种行为
如表单元素的disable属性就是布尔属性,它表示禁用此表单元素

属性值的引号问题

当元素中只有一个属性时可以不使用" "包裹属性值
但当属性不止一个时,不使用" "包裹属性值则很可能产生错误结果
可以使用" "也可以使用' '包裹属性值,可以嵌套,不能混用

HTML-文档剖析

HTML 页面的一般结构

    <!DOCTYPE html>
    <html lang="zh-CN">
        <head>
            <meta charset="utf-8" />
            <title>我的测试站点</title>
        </head>
        <body>
            <p>这是我的页面</p>
        </body>
    </html>
  • <!DOCTYPE html>是一个历史遗留问题,现在只需把它加入 HTML 页面文档开头即可
  • <html>包含了页面的所有内容,称为根元素
  • <head>包含了一些有关 HTML 页面的信息,其中内容并不显示在页面
  • <meta/>用于设置一些独特的信息,如字符集关键字等等
  • <title>设置了页面的标题信息
  • <body>包含了所有显示在页面上的信息

❕在 HTML 文档中连续的空格或换行在渲染时都仅被当成一个空格

HTML-实体引用

实体引用类似于转义,是用来表示特殊字符的代码
常用实体引用如下表

所表示字符实体引用代码所表示字符实体引用代码
<&lt>&gt
"&quot&apos
&&amp空格&nbsp

HTML-注释

只需要用<!---->包裹起来注释内容即可创建一行 HTML 注释

HTML-head标签内容

<title>元素的使用

<title>是用来给 HTML 文档添加标题的标签,但是和<h1>不同

  • <title>添加的是整个文档文件的标题
  • <h1>是为文档包含的内容添加标题

<meta>元素

元数据是用来描述数据的数据,HTML 中可以使用<meta>来添加元数据
<meta>有许多不同种类,常见的有如下一些

指定文档字符编码
    <meta charset="字符集">

不同的字符编码会将同一字符数据解释为不同的字符,为了兼容性考虑,使用utf-8是最好的
虽然某些浏览器会尝试修正错误编码,但这显然不稳妥,应该要指定字符编码

为文档添加作者
    <meta name="author" content="LoveEmiliaForever">
  • name属性用于指定<meta>的类型
  • content属性则包含了想要写入的数据
给文档添加描述
    <meta name="description" content="网页描述">

给网页添加描述能够让使用者快速了解网页,并且搜索引擎也会使用该元数据

❕ 许多的<meta>特性以及被弃用了,如<meta name="keywords" content="关键字">

其它类型元数据

某些网站是有自己的元数据协议的,也就是说某些元数据类型是专门使用在特定网站上的
如 Facebook、Twitter 都有一些特有的元数据协议,用于提供扩展服务

自定义站点图标

可以在<head></head>中指定特定图片作为站点的图标(通常是.ico格式)
可以使用下列语法指定站点图标

    <link rel="icon" href="图标路径" type="image/x-icon">

引入-CSS-文件和-JS-脚本

可以在<head>内通过<link/><script>分别引入外部 css 文件、 js 文件

    <link rel="stylesheet" href="css文件路径">
    <script src="js文件路径" defer></script>

<script>添加属性defer即意味着告诉浏览器 “在解析完 HTML 文件后再加载 js 文件”。这样可以防止 js 在运行环境尚未完成时运行,避免出现错误

给文档设定主语言

可以通过使用lang属性给元素设定主语言,该属性通常是被放置在<html>内,以规定该页面的主语言

    <html lang="zh-CN">
        页面内容
    </html>

HTML-文本处理基础

标题和段落

通过将内容包裹在<p>中可以标记一个段落
通过将标题内容包裹在<h1><h6>内,可以定义六个等级的标题

  • 使用标题时应该要安排好文档的层次结构
  • 每个文档最好只使用一次<h1>,这是顶级标题
  • 标题等级最好不要跳跃式定义
  • 每个文档最好不要超过三个级别的标题

语义化的重要性

语义化标签可以元素赋予对应的含义,使得元素之间能够进行视觉、逻辑、结构上的统一

这样做的好处有很多

  • 使文档结构清晰,易于阅读
  • 让页面后续维护开发更加简单
  • 利于搜索引擎提取页面信息

列表

无序列表

无序列表是没有顺序标签的,也就是说使用该列表时顺序应该要是无关紧要的事情
如下所示,<ul>用于声明无需列表,<li>用于声明列表项

    <ul>
        <li>吃饭</li>
        <li>睡觉</li>
        <li>喝水</li>
    </ul>
有序列表

和无序列表相反,有序列表是有顺序标签的
它们的结构相似<ol>用于声明有序列表,<li>用于声明列表项

    <ol>
        <li>步骤一</li>
        <li>步骤二</li>
        <li>步骤三</li>
    </ol>
列表嵌套

列表之间是可以嵌套的,只需要在<li>内部插入<ul><ol>即可

    <ol>
        <li>步骤一</li>
        <li>步骤二</li>
        <li>步骤三
            <ul>
                <li>材料A</li>
                <li>材料B</li>
                <li>材料C</li>
            </ul>
        </li>
    </ol>

重点强调

HTML 中提供了一些标签用于标记文字,使得文字具有特殊效果,以达到强调文字内容的作用

斜体

可以使用<em>标记文本以获得斜体字,但是它是具有语义的元素
如果仅仅只是想要斜体字,且没有代表什么含义那么就不应该使用<em>,可以使用<i>或是<span><mark> + CSS

    <!--此时的斜体代表著名书籍-->
    <p><em>《哈姆雷特》</em>是一本经典的书</p>
    <!--下面的斜体则没有什么含义-->
    <p><i>今天</i>想吃水饺</p>
粗体

语义化的粗体标签是<strong>,普通的粗体标签是<b>

下划线

由于超链接一般会拥有下划线,所以如果要给文字添加下划线,最好定义一些独特的格式
可以使用<u>定义下划线,但最好使用<span><mark> + css给下划线一个明确的语义,然后使用下划线

表象元素

HTML 中的大部分标签都是具有语义的,但有一些标签没有什么含义
例如<i><b><u>
这些标签定义的元素叫做表象元素,应该减少这些标签的使用

超链接

超链接简介

超链接是一个地址,指向其它资源或是文档内容
点击超链接后就可访问地址,以进行跳转或获取资源

超链接的定义

在 HTML 中可以使用<a>定义一个超链接,在其中还包含有一些属性以定义超链接

    <a href="地址" title="页面描述" target="打开方式">描述文字</a>

<a>可以包含块级元素,这基本意味着它可以把任何东西作为超链接而不单单是文字

URL与Path

url全名Uniform Resource Locator,它是代表了一个网络位置的字符串
https://www.baidu.com就是一个url

path一般指本地的文件路径,是访问本地文件的一个路径,代表着文件的逻辑存放位置

路径分为相对路径绝对路径

  • 绝对路径是从根目录开始定位文件位置的
  • 相对路径则是依据现处位置定位文件位置
    • 相对于现路径同级则为./
    • 前往现路径的上一级为../

定义 超链接 访问文章锚点

  1. 为元素设置锚点id=id名字
  2. 设置<a>href#id名字
  3. 点击超链接即可前往对应位置

超链接最佳实践

  • 不要使用 url 作为链接的描述
  • 链接的描述应该 精确、简洁
  • 不要用一些没有意义的词描述链接
  • 当链接到特殊 url 时应该描述清楚(如下载,观看视频等)
  • 当链接到下载文件的 url 时,应该使用download属性指定一个默认的下载文件名

定义邮箱链接

可以更改地址mailto:邮件地址来指向一个电子邮箱
甚至可以提前指定好邮件题目subject收件人cc邮件内容body

    <a href="
    mailto:邮件地址&cc=address1&cc=address2&subject=xxx&body=xxx">
        发送一个邮件
    </a>

❗️ccsubjectbody中包含的信息应该要被转义过

文本处理进阶

描述列表

除了无序列表有序列表外,还存在着描述列表
这种列表的每一项包括目标文本描述文本,其中描述文本可以有多个
它的定义和其它列表也不太一样

    <dl>
        <dt>被描述的东西</dt>
            <dd>相关的一些描述,解释,介绍等等</dd>
        <dt>被描述的东西</dt>
            <dd>相关的一些描述,解释,介绍等等</dd>
        <dt>被描述的东西</dt>
            <dd>相关的一些描述,解释,介绍等等</dd>
            <dd>相关的一些描述,解释,介绍等等</dd>
    </dl>

引用

HTML 有用于标记引用的标签,并且有块引用行内引用
浏览器会分别给它们添加默认的样式

    <!--块引用-->
    <blockquote cite="引用地址">
        <p>引用一个 HTML 块</p>
    </blockquote>
    <!--行内引用-->
    <p>
        有一句很著名的话,
        <q cite="引用地址">一千个读者有一千个哈姆雷特</q>
        广为人知
    </p>

使用<blockquote><q>标签虽然为文本添加引用样式,但是不能充分利用cite属性的内容
因此,使用<a><cite></cite></a>这样的结构更能够体现引用地址

    <a href="寂静的春天">
        <cite>
            《寂静的春天》
        </cite>
    </a>
    描述了一个悲惨的世界

缩略语

在编辑文档时经常遇到缩略语的编写,为了防止有人不知道缩略语的意思,编写者通常会解释一遍缩略语
如果使用<abbr>标签,那么当鼠标移到缩略语上时,缩略语会自动浮现出全名

    <p>
        <abbr title="Hyper Text Markup Language">HTML</abbr>
        是一个非常重要的标记语言
    </p>

其中title属性应该填写有关缩略语的全称

❕曾经有一个<acronym>也是缩略语,但它已经废弃

联系方式标记

可以使用<address>标记联系地址

    <address>
        <p>123大街123号</p>
        <a href="mailto:123456@gamil.com">我的邮箱</a>
    </address>

❕联系方式标记的位置要小心,不要搞错了
<address>标记的联系方式应该是离它最近的<article>所属
或是当它放在<footer>时,它应该是整个页面的联系方式

上标、下标

上标的标签是<sup>,下标的标签是<sub>

展示计算机代码

  • <code>用来标记计算机通用代码
  • <pre>将文本包裹在其中,空白字符换行符将以原样展示
  • <var>标记变量名
  • <kbd>标记输入
  • <samp>标记输出
    <p>下面是一段 Python 代码</p>
    <pre>
        <code>
            <var>BAT</var>="比亚迪,埃安,特斯拉"
            <var>STR</var>=input()
            print(BAT,STR)
        </code>
    </pre>
    <p>当我们输入<kbd>我爱</kbd>后,程序会输出<samp>比亚迪,埃安,特斯拉我爱</samp></p>

标记时间和日期

因为文本表示时间的格式太多了,因此可以把时间插入到<time>
并为它设置一个机器时间,以此统一时间格式

    <time datetime="2016-06-26">2023年 6月 26日</time>

❕注意如果时间的位数不够,要用零填补其它位置

利用datetime设置一个机器时间

文档与网站架构

HTML 不仅能够定义一些细分的结构,也可以使用块级元素定义网页的整体架构,从而使得网页规划整齐可读性高语义化强

文档的基本组成部分

  • 页眉
    • 通常横跨网页顶部,有大标题或标志
    • 放置一些网站的通用信息,通常存在于每个网站页面
  • 导航栏
    • 存放着指向网站各部分的超链接,是一个索引集
    • 通常不跟随页面改变而改变
  • 主内容
    • 存放有网页的展示信息等等
  • 侧边栏
    • 一些辅助性的功能,通常和主内容有关
  • 页脚
    • 和页眉相似,放在网页底部
    • 通常放置一些声明,链接等等信息

在这里插入图片描述

用于构建内容的HTML

HTML 可根据功能来为区段添加标记,使用元素来无歧义地表示内容区段

标签名字介绍
<header>页眉如果是<main>的子元素那么就是网页的页眉
如果是<article><section>的子元素那么就是它们独有的页眉
<nav>导航栏包含页眉的导航功能,但不应该包含二级链接等等
<main>主内容存放每个页面独有的内容,每个页面仅有一个
<article>文章包裹着一篇文章这类的,与其它部分无关
<section>大分区组织页面的分块
<aside>侧边栏包含有一些间接信息,辅助功能等等
<footer>页脚放置页面的页脚,内含一些通用信息
<div>块级无语义标签配合id、class使用
<span>内联无语义标签配合id、class使用
<br>换行适当的换行能够优化结构
<hr>水平线使用水平线可以分隔不同部分

❗️不要滥用div标签,能不用就不用

HTML-调试

通常的代码错误分为下列两种

  • 语法错误:使用错误的编写使得程序无法运行
  • 逻辑错误:存在逻辑上的错误使得不能产生预期结果

因为浏览器是以宽松模式运行的,HTML并不容易出现导致程序停止的错误
但正因如此,浏览器在修复语法错误时很可能给出非预期的结果

在不规则语法时,可以手动查找
但更好的方法是使用标记验证服务网站,让机器帮助你找到语法错误

HTML-语义化小项目

HTML-语义化-信件
HTML-语义化-观鸟者网

` | 页脚 | 放置页面的页脚,内含一些通用信息 | | `
` | 块级无语义标签 | 配合id、class使用 | | ` ` | 内联无语义标签 | 配合id、class使用 | | `
` | 换行 | 适当的换行能够优化结构 | | `
` | 水平线 | 使用水平线可以分隔不同部分 |

❗️不要滥用div标签,能不用就不用

HTML-调试

通常的代码错误分为下列两种

  • 语法错误:使用错误的编写使得程序无法运行
  • 逻辑错误:存在逻辑上的错误使得不能产生预期结果

因为浏览器是以宽松模式运行的,HTML并不容易出现导致程序停止的错误
但正因如此,浏览器在修复语法错误时很可能给出非预期的结果

在不规则语法时,可以手动查找
但更好的方法是使用标记验证服务网站,让机器帮助你找到语法错误

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1459386.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Security6.2 中的SpEL 表达式应用(权限注解使用)

最近学习若依框架&#xff0c;里面的权限注解涉及到了SpEL表达式 PreAuthorize("ss.hasPermi(system:user:list)")&#xff0c;若依项目中用的是自己写的方法进行权限处理&#xff0c; 也可以只用security 来实现权限逻辑代码&#xff0c;下面写如何用security 实现。…

[计算机网络]---UDP协议

前言 作者&#xff1a;小蜗牛向前冲 名言&#xff1a;我可以接受失败&#xff0c;但我不能接受放弃 如果觉的博主的文章还不错的话&#xff0c;还请点赞&#xff0c;收藏&#xff0c;关注&#x1f440;支持博主。如果发现有问题的地方欢迎❀大家在评论区指正 目录 一、端口号…

HarmonyOS - 实现多设备协同开发实战教程~

前言 现在随着个人设备越来越多&#xff0c;越来越需要多个设备之间相互感知和连接&#xff0c;设备和设备之间可以相互联动&#xff0c;形成互联互通的场景&#xff0c;而搭载HarmonyOS的设备恰好可以满足这一点 。下面通过开发一个HarmonyOS的多端分布式表白应用来实现设备之…

STM32_ESP8266 连接阿里云 操作图解

一、烧录MQTT固件 ESP8266出厂时&#xff0c;默认是&#xff1a;AT固件。连接阿里云需要&#xff1a;MQTT固件。 因此&#xff0c;我们需要给8266重新烧录 MQTT固件。 针对“魔女开发板&#xff0c;ESP8266模块烧录MQTT固件&#xff0c;图解教程如下&#xff1a; ESP8266 烧录 …

代码随想录算法训练营|二叉树总结

二叉树的定义&#xff1a; struct TreeNode {int val;TreeNode* left;TreeNode* right;TreeNode():val(0),left(nullptr),right(nullptr){}TreeNode(int val):val(val),left(nullptr),right(nullptr){}TreeNode(int val,TreeNode* left,TreeNode* right):val(val),left(left),…

网工内推 | 证券公司急招网工,base上海,年薪50W

01 广发证券 招聘岗位&#xff1a;网络工程师 任职要求&#xff1a; 1、懂基础建设网络&#xff0c;虚拟化&#xff0c;或者服务器中任意一个都可以&#xff08;需资深&#xff09;2、985/211本硕 3、年龄最好35以下 薪资待遇&#xff1a; 1、工作时间9:00-17:00 2、根据资历…

思腾合力邀您共赴第二届世界元宇宙大会

由中国仿真学会、中国指挥与控制学会和北京理工大学共同主办&#xff0c;上海市嘉定区安亭镇人民政府和中国仿真学会元宇宙专业委员会承办的第二届世界元宇宙大会大会以“虚实相生、产业赋能”为主题&#xff0c;聚焦元宇宙关键技术发展的共性问题&#xff0c;交流元宇宙技术产…

Window系统GPT-SoVITS配置安装

GPT-SoVITS配置安装 GPT-SoVITS配置Python下载以及安装源文件安装依赖 运行整理在安装配置环境时遇到的报错总结 GPT-SoVITS配置 作者链接 Python下载以及安装 版本这里根据教程的版本走即可&#xff0c;这里不会安装python或者不会配置环境的参考我之前的文章 Python 3.9,…

C# GTS四轴运动控制器实例(固高科技步进电机不带编码器)

注&#xff1a;由于电机不带编码器&#xff0c;无法做home和当前位置信息读取&#xff01; 功能&#xff1a; 三个轴的点位运动&#xff1a;前进后退&#xff0c;并分别显示每个轴的移动脉冲数(可以换算为距离)&#xff01; 开发环境&#xff1a;VS2017 硬件设备&#xff1a;固…

编程笔记 Golang基础 007 第一个程序:hello world 使用Goland

编程笔记 Golang基础 007 第一个程序&#xff1a;hello world 使用Goland 步骤1&#xff1a;启动GoLand并创建新项目步骤2&#xff1a;创建主包和主函数步骤3&#xff1a;运行程序小结 开始在Goland环境中编程go语言代码啦。 步骤1&#xff1a;启动GoLand并创建新项目 打开GoL…

[word] word中图片衬于文字下方无法显示 #媒体#微信

word中图片衬于文字下方无法显示 1、如图&#xff0c;图片“衬于文字下方”&#xff0c;文字下方的图象看不见 2、光标这位到图片上这段文字中&#xff0c;点击“格式”&#xff0d;“边框和底纹”&#xff0c;切换到“底纹”选项卡。可发现这两段文字底纹被设置成“白色”了 …

【数学建模入门】

数学建模入门 数学建模需要的学科知识怎么学习数学模型如何读好一篇优秀论文数学建模赛题常见类别数学建模常见问题数学建模组队和分工数学建模准备工作 数学建模需要的学科知识 怎么学习数学模型 &#x1f4a6;推荐阅读书籍&#xff1a; 《数学建模算法与应用》&#xff0c;…

OpenGL学习——17.模型

前情提要&#xff1a;本文代码源自Github上的学习文档“LearnOpenGL”&#xff0c;我仅在源码的基础上加上中文注释。本文章不以该学习文档做任何商业盈利活动&#xff0c;一切著作权归原作者所有&#xff0c;本文仅供学习交流&#xff0c;如有侵权&#xff0c;请联系我删除。L…

FlinkCDC详解

1、FlinkCDC是什么 1.1 CDC是什么 CDC是Chanage Data Capture&#xff08;数据变更捕获&#xff09;的简称。其核心原理就是监测并捕获数据库的变动&#xff08;例如增删改&#xff09;&#xff0c;将这些变更按照发生顺序捕获&#xff0c;将捕获到的数据&#xff0c;写入数据…

Vue | (二)Vue组件化编程 | 尚硅谷Vue2.0+Vue3.0全套教程

文章目录 &#x1f4da;模块与组件、模块化与组件化&#x1f4da;非单文件组件&#x1f407;基本使用&#x1f407;关于组件的几个注意点&#x1f407;组件的嵌套 &#x1f4da;单文件组件&#x1f407;一个.vue 文件的组成&#x1f407;实例 学习链接&#xff1a;尚硅谷Vue2.0…

多线程、分布式运行用例

python多线程 threading模块 多线程实例 # -*- coding: utf-8 -*- # Time : 2024/2/7 15:50 # Author : 居里夫人吃橘子 # File : class01.py # Software: PyCharm import threading from time import sleepdef run(name):print(name 该起床了)sleep(2)print(name …

EXCEL使用VBA一键批量转换成PDF

EXCEL使用VBA一键批量转换成PDF 上图是给定转换路径 Sub 按钮1_Click() Dim a(1 To 1000) As String Dim a2 As String Dim myfile As String Dim wb As Workbook a2 Trim(Range("a2"))myfile Dir(a2 & "\" & "*.xls")k 0Do While m…

【LeetCode】树的BFS(层序遍历)精选6题

目录 1. N 叉树的层序遍历&#xff08;中等&#xff09; 2. 二叉树的锯齿形层序遍历&#xff08;中等&#xff09; 3. 二叉树的最大宽度&#xff08;中等&#xff09; 4. 在每个树行中找最大值&#xff08;中等&#xff09; 5. 找树左下角的值&#xff08;中等&#xff09…

2024.2.20

使用多进程完成两个文件的拷贝&#xff0c;父进程拷贝前一半&#xff0c;子进程拷贝后一半&#xff0c;父进程回收子进程的资源 #include<myhead.h> int main(int argc, const char *argv[]) {char str[100]"";puts("please input str:");//从终端读…

手动实现new操作符

<script>//前置知识// 每一个函数在创建之初就会有一个prototype属性&#xff0c;这个属性指向函数的原型对象// function abc(){// }// abc.prototype--> {constructor: f}// 在JS中任意的对象都有内置的属性叫做[[prototype]]这是一个私有属性&#xff0c;这个私有属…