002 HTML元素

文章目录

    • HTML的元素
      • 元素的属性
    • 注释快捷键
    • 根元素
    • head元素
      • meta元素
    • body元素
    • h元素
    • p元素
    • img元素
      • src属性
      • alt属性
    • 路径分隔符
    • a元素
      • href属性
      • target属性
      • 锚点链接
    • iframe元素
    • div与span
    • 不常用元素
    • HTML全局属性
    • 字符实体
    • URL和URI
    • SEO
    • 字符编码

官方文档:https://www.w3.org/TR/

HTML的元素

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

元素的属性

属性值由一对引号引起来,属性名与元素之间有个空格,如果有多个属性,属性与前一个属性之间有一个空格
不同元素没有区别,本质上是浏览器给元素加了CSS属性

注释快捷键

ctrl + /

根元素

html元素

<style>:root {}
</style>

head元素

规定文档相关的配置信息(也称元数据,描述数据的数据),包括文档的标题,引用的文档样式和脚本等

meta元素

设置网页的字符编码

<meta charset="utf-8">

body元素

在浏览器窗口看到的东西,是网页的内容和结构

h元素

标题

p元素

段落

img元素

将图像嵌入文档
可替换元素

src属性

路径

alt属性

图片加载不成功,会显示这段文本
屏幕阅读器用来读取这段文字给使用者听

路径分隔符

路径分隔符是/

a元素

定义超链接

href属性

指定要打开的url地址,可以是本地地址

target属性

指定在何处显示链接的资源
_self:默认值,在当前窗口打开url
_blank:在一个新的窗口中打开url
_parent:在父窗口中打开url
_top:在顶层窗口中打开url

锚点链接

在要跳转的元素上定义id属性
a元素的href指向那个id

iframe元素

在一个HTML文档中嵌入其他HTML文档

X-Frame-Options: sameorigin

frameborder属性
1:显示边框
0:不显示边框

div与span

多个div元素包裹的内容在不同行显示:
一般用作其他元素的父容器,用于把网页分割为多个独立的部分
多个span元素包裹的内容在同一行显示:
用于区分特殊文本和普通文本

不常用元素

strong元素:内容加粗、强调
i元素:内容倾斜,偶尔用它做字体图标
code元素:用于显示代码,偶尔用来显示等宽字体

HTML全局属性

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes
常见的全局属性:
id:定义唯一标识符,该标识符在整个文档中必须是唯一的。其目的是在链接(使用片段标识符),脚本或样式(使用CSS)时标识元素。
class:一个以空格分隔的元素的类名(classes)列表,它允许CSS和Javascript通过类选择器或DOM方法来选择和访问特定的元素
style:给元素添加内联样式
title:包含表示与其所属元素相关信息的文本。这些信息通常可以作为提示呈现给用户,但不是必须的

字符实体

HTML实体是一段以&开头,以;结尾的字符串
实体用于显示保留字符和不可见字符
也可以用于代替难以用标准键盘键入的字符

URL和URI

理论上给定唯一资源在web上的地址
url的标准格式:

[协议类型]://[服务器地址]:[端口号]/[文件路径][文件名]?[查询]#[片段ID]

URI = Uniform Resource Identifier 统一资源标志符,用于标识Web技术使用的逻辑或物理资源
URL = Uniform Resource Locator 统一资源定位符,俗称网络地址,相当于网络中的门牌号

URL是URI的一个子集,URI并不一定是URL,URL是一个URI

SEO

搜索引擎优化(SEO)是通过了解搜索引擎的运作规则来调整网站,以及提高网站在有关搜索引擎内排名的方式

字符编码

编码(encode)
解码(decode)

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

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

相关文章

【数据结构】括号匹配问题你学会了吗?来刷刷题检验一下吧!!!

栈在括号问题中的应用 导言一、有效的括号——栈、字符串——简单1.1 题目要求与分析1.2 代码实现 二、 最长有效括号——栈、字符串、动态规划——困难2.1 题目要求与分析2.2 问题解析2.2.1 如何计算有效括号的个数2.2.2 如何记录了连续括号的长度2.2.3 如何寻找最长的子串 2.…

STM32 GPIO输入检测——按键

前言 在嵌入式系统开发中&#xff0c;对GPIO输入进行检测是一项常见且关键的任务。STM32微控制器作为一款功能强大的处理器&#xff0c;具有丰富的GPIO功能&#xff0c;可以轻松实现对外部信号的检测和处理。在本文中&#xff0c;我们将深入探讨如何在STM32微控制器上进行GPIO…

二十四种设计模式与六大设计原则(三):【装饰模式、迭代器模式、组合模式、观察者模式、责任链模式、访问者模式】的定义、举例说明、核心思想、适用场景和优缺点

接上次博客&#xff1a;二十四种设计模式与六大设计原则&#xff08;二&#xff09;&#xff1a;【门面模式、适配器模式、模板方法模式、建造者模式、桥梁模式、命令模式】的定义、举例说明、核心思想、适用场景和优缺点-CSDN博客 目录 装饰模式【Decorator Pattern】 定义…

linux redis 快速安装

选择合适的版本 以下是在Linux系统上安装Redis的步骤&#xff1a; 1、下载Redis&#xff1a; wget http://download.redis.io/releases/redis-7.2.0.tar.gz 2、解压缩Redis&#xff1a; tar xzf redis-7.2.0.tar.gz 3、编译Redis&#xff1a; cd redis-7.2.0 make 4、…

C语言——内存函数

前言&#xff1a; C语言中除了字符串函数和字符函数外&#xff0c;还有一些函数可以直接对内存进行操作&#xff0c;这些函数被称为内存函数&#xff0c;这些函数与字符串函数都属于<string.h>这个头文件中。 一.memcpy&#xff08;&#xff09;函数 memcpy是C语言中的…

维修贝加莱4PP420.1043-B5触摸屏Power Panel 400工业电脑液晶

深圳捷达工控维修为贝加莱、HMI 显示电源面板 400 4PP420.1043-B5 提供专业电子维修。在 深圳捷达工控维修&#xff0c;我们拥有及时且经济高效地维修 B&R 、HMI Display Power Panel 400 4PP420.1043-B5 的经验。我们为发送给我们工厂维修的贝加莱 HMI 显示面板 400 4PP42…

【智能算法】霜冰优化算法(RIME)原理及实现

目录 1.背景2.算法原理2.1算法思想2.2算法过程 3.结果展示4.参考文献 1.背景 2023年&#xff0c;H Su等人受到自然界霜冰生长机制启发&#xff0c;提出了霜冰优化算法&#xff08;Rime Optimization Algorithm, RIME&#xff09;。 2.算法原理 2.1算法思想 RIME模拟软霜颗粒…

css去除滑动框

css去除滑动框 要在CSS中去除滑动条&#xff0c;可以使用overflow属性。如果你想要在特定的元素上去除滑动条&#xff0c;可以将该元素的overflow属性设置为hidden&#xff0c;这样内容如果超出了元素的尺寸&#xff0c;就不会显示滑动条。 例如&#xff0c;如果你想要在一个…

【Laravel】06 数据库迁移工具migration

【Laravel】06 数据库迁移工具migration 1.migration文件目录2. 举例 1.migration文件目录 2. 举例 (base) ➜ example-app php artisan migrate Migration table created successfully. Migrating: 2014_10_12_000000_create_users_table Migrated: 2014_10_12_000000_crea…

QT(6.5) cmake构建C++编程,c++与python进行通信(命名管道)

QT(6.5) cmake构建C编程&#xff0c;c与python进行通信&#xff08;命名管道&#xff09; 首先&#xff0c;c端编写命名管导通信代码 #include <QDebug> #include <windows.h>bool fifp_cpp(){// 创建命名管道&#xff08;用于读写&#xff09;HANDLE hPipe;hPip…

HTTP/1.1、HTTP/2、HTTP/3 演变(计算机网络)

HTTP/1.1 相比 HTTP/1.0 提高了什么性能&#xff1f; HTTP/1.1 相比 HTTP/1.0 性能上的改进&#xff1a; 使用长连接改善了短连接造成的性能开销。支持管道网络传输&#xff0c;只要第一个请求发出去了&#xff0c;不必等其回来&#xff0c;就可以发第二个请求出去&#xff0c…

0基础学习Mybatis系列数据库操作框架——最小Demo

大纲 数据库Mybatis目录结构配置代码 代码/配置结构配置结构依赖库配置SQL配置Mybatis配置数据库配置SQL映射配置 完整配置 代码结构映射类Mybatis逻辑从 XML 中构建 SqlSessionFactory从 SqlSessionFactory 中获取 SqlSession通过mapper中的namespace和id执行SQL 完整逻辑和代…

nginx的https与动态负载均衡

nginx的https 证书可以根据你的域名和服务器服务商去进行签发 , 比如 : 阿里云 腾讯云 百度云 华为云等 这里使用的是腾讯云 : 下载证书 : 选择 nginx: 下载之后传递到服务器上。 下面开始配置nginx的https: 1. 解压下载的证书包 cd /etc/ssl unzip xxcc.dwa_nginx.zip mv…

2024/3/31学习总结

才不是今天没有学大知识才学这个。等我下周我发个大的。最近在读mysql的innodb底层&#xff0c;到时候给大家总结大的用自己的话&#xff0c;应该是缓慢更新吧 一、上午 1.1 icpc西部赛 酣畅淋漓的环节。主办方没有活硬整&#xff0c;就a,c,d,h可以做。a&#xff0c;h还题目意…

基于知识图谱的个性化学习推荐系统的设计与实现(论文+源码)_kaic

摘 要 Abstract 1 绪 论 1.1 研究背景及意义 1.2 国内外现状研究 1.3 研究工作和论文结构 2 相关技术 2.1 HTML 语言 2.2 Python 语言 2.3 数据库技术 2.4 Django 框架 3 系统分析 3.1 需求概述 3.2 系统可行性分析 3.2.1 技术可行性 3.2.2 经济可行性 3.2.3 操作可行性 3.3 功…

Spring-事务管理

1、事务管理 1.1、回滚方式 默认回滚方式&#xff1a;发生运行异常时异常和error时回滚&#xff0c;发生受查(编译&#xff09;异常时提交。不过&#xff0c;对于受查异常&#xff0c;程序员也可以手工设置其回滚方式 1.2、事务定义接口 1.2.1、事务隔离级别常量 这些常量…

EXCEL-VB编程实现自动抓取多工作簿多工作表中的单元格数据

一、VB编程基础 1、 EXCEL文件启动宏设置 文件-选项-信任中心-信任中心设置-宏设置-启用所有宏 汇总文件保存必须以宏启动工作簿格式类型进行保存 2、 VB编程界面与入门 参考收藏 https://blog.csdn.net/O_MMMM_O/article/details/107260402?spm1001.2014.3001.5506 二、…

HarmonyOS实战开发-slider组件的使用

介绍 本篇Codelab主要介绍slider滑动条组件的使用。如图所示拖动对应滑动条调节风车的旋转速度以及缩放比例。 相关概念 slider组件&#xff1a;滑动条组件&#xff0c;通常用于快速调节设置值&#xff0c;如音量调节、亮度调节等应用场景。 环境搭建 软件要求 DevEco Stu…

图像处理_积分图

目录 1. 积分图算法介绍 2. 基本原理 2.1 构建积分图 2.2 使用积分图 3. 举个例子 1. 积分图算法介绍 积分图算法是图像处理中的经典算法之一&#xff0c;由Crow在1984年首次提出&#xff0c;它是为了在多尺度透视投影中提高渲染速度。 积分图算法是一种快速计算图像区域和…

基于Python实现多功能翻译助手(上)

创建一个支持多种语言翻译并且允许通过文件拖拽来输入文本的Python窗口应用程序是一个相对复杂的任务&#xff0c;涉及到多个库和组件。以下是一个简化的指南&#xff0c;展示如何使用Python的Tkinter库创建GUI窗口&#xff0c;结合Googletrans库进行翻译&#xff0c;以及使用P…