Web前端:HTML篇(一)

HTML简介:

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。

一个简单的实例

<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>这是页面标题</title>
</head><body>
<h1>这是一个标题</h1>
<p1>这是一个段落。</p1>
</body></html>

运行结果:

HTML标签

如前所述,HTML是一种标记语言,使用各种标签来格式化内容。这些标签被封装在角括号内 <标签名>. 除了一些标签外,大多数标签都有相应的闭合标签。例如, <html> 有其闭合标签 </html> 和 <body> 标签有其闭合标签 </body> 等等。

标签的写法都是

<标签>元素</标签>

上面的HTML文档示例使用了以下标签 −

序号标签和描述
1<!DOCTYPE...> 此标签定义文档类型和HTML版本。
2<html> 此标签包含完整的HTML文档,主要由文档头部和文档主体组成,文档头部由<head>...</head>标签表示,文档主体由<body>...</body>标签表示。
3<head> 此标签表示文档的头部,可以包含其他HTML标签,如<title>,<link>等。
4<title> <title>标签用于在<head>标签中指定文档标题。
5<body> 此标签表示文档的主体,包含其他HTML标签,如<h1>,<div>,<p>等。
6<h1> 此标签表示标题。
7

<p> 此标签表示段落。

HTML 元素

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容(empty content)
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 大多数 HTML 元素可拥有属性

嵌套的 HTML 元素

大多数 HTML 元素可以嵌套(HTML 元素可以包含其他 HTML 元素)。

HTML 文档由相互嵌套的 HTML 元素构成。

HTML 空元素(换行符<br />)

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素(意味着它没有结束标签,因此这是错误的:<br></br>)。

在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。

注意:请使用 <br> 标签来插入换行符,而不是用它来增加段落之间的空白。

<!DOCTYPE> 声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。

网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的,以下方式均可:

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

中文编码

目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
页面标题</title>
</head>
<body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body>
</html>

对于设置 <meta charset="utf-8" /> 后出现网页乱码问题,其实归根到底就是:你通过 meta 标签设置的编码网页文件在保存时所使用的文档编码不相同造成的!

至于 360 浏览器会设置 GBK 为默认编码,

只要你在 html 文件里写了 <!doctype hmtl>和 <meta charset="utf-8" />,浏览器就绝对会按照 utf-8 编码解析网页,保存 html 文件时,文档编码和 meta 设置的编码,一定要相同,只要不相同,就一定会出现乱码!

之所以一定要写上 <!doctype html>,就是为了防止浏览器的怪异模式,强制浏览器按照标准模式渲染网页!

使用小写标签

HTML 标签对大小写不敏感:<P> 等同于 <p>。但在未来 (X)HTML 版本中强制使用小写。(我不知道,搜的),所以最好用小写。

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

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

相关文章

批量打断相交线——ArcGISpro 解决方法

在数据处理&#xff0c;特别是地理空间数据处理或是任何涉及图形和线条分析的场景中&#xff0c;有时候需要把相交的线全部从交点打断一个常见的需求。这个过程对于后续的分析、编辑、或是可视化展现都至关重要&#xff0c;因为它可以确保每条线都是独立的&#xff0c;避免了因…

.NET下支持多框架的托盘功能NotifyIconEx(WPF / WinForms / Avalonia / WinUI / MAUI / Wice)

支持 WPF / WinForms / Avalonia / WinUI / MAUI / Wice 应用。 先看效果&#xff1a; using NotifyIconEx;var notifyIcon new NotifyIcon() {Text "NotifyIcon",Icon Icon.ExtractAssociatedIcon(Process.GetCurrentProcess().MainModule?.FileName!)! }; not…

【论文速读】| LLMCloudHunter:利用大语言模型(LLMs)从基于云的网络威胁情报(CTI)中自动提取检测规则

本次分享论文&#xff1a;LLMCloudHunter: Harnessing LLMs for Automated Extraction of Detection Rules from Cloud-Based CTI 基本信息 原文作者&#xff1a;Yuval Schwartz, Lavi Benshimol, Dudu Mimran, Yuval Elovici, Asaf Shabtai 作者单位&#xff1a;Ben-Gurion…

第一弹:基于ABAP OLE技术实现对服务器文件进行读写操作

前言 最近遇到这样一个需求&#xff0c;需要对BW服务器上的文件进行下载的同时写入每个用户相对应的数据。之前的服务器模版是一个死模版&#xff0c;对于这样的要求&#xff0c;我就想到了OLE技术&#xff0c;那么什么是OLE技术呢&#xff1f; 一、什么是OLE技术&#xff1f…

Python 全栈体系【三阶】(三)

第一章 Django 七、静态文件 1. 概述 静态文件是指在WEB应用中的图像文件、CSS文件、Javascript文件。 2. 静态文件的配置 settings.py中关于静态文件的配置如下&#xff1a; STATICFILES_DIRS [BASE_DIR , static, ]STATIC_URL /static/其中&#xff1a; STATICFILES…

C++——模板初阶 | STL简介

P. S.&#xff1a;以下代码均在VS2019环境下测试&#xff0c;不代表所有编译器均可通过。 P. S.&#xff1a;测试代码均未展示头文件stdio.h的声明&#xff0c;使用时请自行添加。 博主主页&#xff1a;Yan. yan.                        …

便携气象站:科技助力气象观测

在科技飞速发展的今天&#xff0c;便携气象站以其轻便、高效、全面的特点&#xff0c;正逐渐改变着气象观测的传统模式。这款小巧而强大的设备&#xff0c;不仅为气象学研究和气象灾害预警提供了有力支持&#xff0c;更为户外活动、农业生产等领域带来了诸多便利。 便携气象站是…

Redis+Lua脚本+AOP+反射+自定义注解,打造我司内部基础架构限流组件

定义注解 Retention(RetentionPolicy.RUNTIME) Target({ElementType.METHOD}) Documented public interface RedisLimitAnnotation {/*** 资源的key,唯一* 作用&#xff1a;不同的接口&#xff0c;不同的流量控制*/String key() default "";/*** 最多的访问限制次数…

算法日记day 17(二叉树的最大、最小深度)

一、二叉树的最大深度 题目&#xff1a; 给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;3示例 2&#xff1…

STM32智能机器人控制系统教程

目录 引言环境准备智能机器人控制系统基础代码实现&#xff1a;实现智能机器人控制系统 4.1 数据采集模块 4.2 数据处理与控制模块 4.3 通信与导航系统实现 4.4 用户界面与数据可视化应用场景&#xff1a;机器人控制与优化问题解决方案与优化收尾与总结 1. 引言 智能机器人控…

qt中charts图表的使用方法

折线图 #include "widget.h" #include "ui_widget.h" #include <QtCharts/QChart> #include <QtCharts/QChartView> #include <QtCharts/QLineSeries> #include<QVBoxLayout>Widget::Widget(QWidget *parent): QWidget(parent), …

Windows图形界面(GUI)-MFC-C/C++ - MFC项目工程框架解析

公开视频 -> 链接点击跳转公开课程博客首页 -> e​​​​​​链接点击跳转博客主页 目录 MFC项目 项目选择 配置安装 程序引导 MFC框架 环境设置 程序框架 代码编写 MFC解析 程序入口 执行流程 代码结构 应用程序类 窗口框架类 消息处理 消息类型 消息…

ML.Net 学习之使用经过训练的模型进行预测

什么是ML.Net&#xff1a;&#xff08;学习文档上摘的一段&#xff1a;ML.NET 文档 - 教程和 API 参考 | Microsoft Learn 【学习入口】&#xff09; 它使你能够在联机或脱机场景中将机器学习添加到 .NET 应用程序中。 借助此功能&#xff0c;可以使用应用程序的可用数据进行自…

一个简单好用安全的开源交互审计系统,支持SSH,Telnet,Kubernetes协议(带私活)

前言 在当今的企业网络环境中&#xff0c;远程访问和交互审计成为了保障网络安-全的重要组成部分。然而&#xff0c;现有的解-决方案往往存在一些痛点&#xff0c;如复杂的配置、有限的协议支持、以及审计功能的不足。这些问题不仅增加了IT管理员的负担&#xff0c;也为企业的…

基于R语言复杂数据回归与混合效应模型【多水平/分层/嵌套】技术与代码

回归分析是科学研究特别是生态学领域科学研究和数据分析十分重要的统计工具&#xff0c;可以回答众多科学问题&#xff0c;如环境因素对物种、种群、群落及生态系统或气候变化的影响&#xff1b;物种属性和系统发育对物种分布&#xff08;多度&#xff09;的影响等。纵观涉及数…

HarmonyOS NEXT零基础入门到实战-第四部分

自定义组件: 概念: 由框架直接提供的称为 系统组件&#xff0c; 由开发者定义的称为 自定义组件。 源代码&#xff1a; Component struct MyCom { build() { Column() { Text(我是一个自定义组件) } } } Component struct MyHeader { build() { Row(…

路由器ip地址脱机是什么意思?怎么应对

在数字化时代&#xff0c;路由器作为家庭或企业网络连接的核心设备&#xff0c;其稳定性和连通性对于我们的网络体验至关重要。然而&#xff0c;有时我们可能会遇到路由器IP地址显示脱机的情况&#xff0c;这不仅影响了我们的网络访问&#xff0c;还可能对工作和娱乐造成不便。…

【C语言】 约瑟夫环,循环链表实现

1、循环链表实现约瑟夫环&#xff0c;每次经过特定步数删除一个元素 //looplist.h #ifndef LOOPLIST_H #define LOOPLIST_H #include<stdio.h> #include<string.h> #include<stdlib.h>typedef int datatype;typedef struct Node {union {int len;datatype d…

Elasticsearch:Java ECS 日志记录 - log4j2

ECS 记录器是你最喜欢的日志库的格式化程序/编码器插件。它们可让你轻松将日志格式化为与 ECS 兼容的 JSON。ECS 兼容的 JSON 日志记录可以帮我们简化很多分析&#xff0c;可视化及解析的工作。在今天的文章里&#xff0c;我来详述如何在 Java 应用里生成 ECS 相兼容的日志。 …

tensorflow keras Model.fit returning: ValueError: Unrecognized data type

题意&#xff1a;TensorFlow Keras 的 Model.fit 方法返回了一个 ValueError&#xff0c;提示数据类型无法识别 问题背景&#xff1a; Im trying to train a keras model with 2 inputs: an image part thats a tf.data.Dataset and a nor mal part represented by a pd.DataF…