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.rhkb.cn/news/381868.html

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

相关文章

MongoDB教程(十三):MongoDB覆盖索引

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝你生活愉快&#xff01; 文章目录 引言什么是覆盖…

Elasticsearch介绍、安装以及IK分词器 --学习笔记

Elasticsearch 是什么&#xff1f; Elasticsearch 是一个高度可扩展的开源全文搜索和分析引擎。它允许你以极快的速度存储、搜索和分析大量数据。Elasticsearch 基于 Apache Lucene 构建&#xff0c;提供了一个分布式、多租户能力的全文搜索引擎&#xff0c;带有 HTTP web 接口…

安装Ubuntu24.04服务器版本

Ubuntu系统安装 一.启动安装程序二.执行 Ubuntu Server 安装向导1.选择安装程序语言&#xff0c;通常选择「English」2.设置键盘布局&#xff0c;默认「English US」即可3.选择安装方式 三.配置网络1.按Tab键选择网络接口&#xff08;例如 ens160&#xff09;&#xff0c;然后按…

Java:115-Spring Boot的底层原理(下篇)

这里续写上一章博客&#xff08;115章博客&#xff09; SpringBoot视图技术&#xff1a; 支持的视图技术 &#xff1a; 前端模板引擎技术的出现&#xff08;jsp也是&#xff09;&#xff0c;使前端开发人员无需关注后端业务的具体实现&#xff08;jsp中&#xff0c;具体的…

[Doris]阿里云搭建Doris,测试环境1FE 1BE

首先&#xff1a;阿里云的国内服务器千万不要用容器搭建&#xff0c;或者自己Dockfile构建镜像。两种方式都不得行&#xff0c;压根拉不到github的镜像&#xff0c;开了镜像加速器也拉不到&#xff0c;不要折腾了&#xff0c;极其愚蠢。 背景&#xff1a;现在测试环境&#xff…

openmv学习笔记(24电赛备赛笔记)

#openmv简介 openmv一种小型&#xff0c;可编程机器视觉摄像头&#xff0c;设计应用嵌入式应用和计算边缘&#xff0c;是图传模块&#xff0c;或者认为是一种&#xff0c;具有图像处理功能的单片机&#xff0c;提供多种接口&#xff08;I2C SPI UART CAN ADC DAC &#xff0…

Linux云计算 |【第一阶段】ENGINEER-DAY4

主要内容&#xff1a; 配置Linux网络参数、配置静态主机名、查看/修改/激活/禁用网络连接、指定DNS、虚拟网络连接、虚拟机克隆、SSH客户端、SCP远程复制、SSH无密码验证&#xff08;SERVICE-DAY5&#xff09;、虚拟网络类型 一、网络参数配置 修改网卡配置文件主要是需要配置…

人工智能与社交变革:探索Facebook如何领导智能化社交平台

在过去十年中&#xff0c;人工智能&#xff08;AI&#xff09;技术迅猛发展&#xff0c;彻底改变了我们与数字世界互动的方式。Facebook作为全球最大的社交媒体平台之一&#xff0c;充分利用AI技术&#xff0c;不断推动社交平台的智能化&#xff0c;提升用户体验。本文将深入探…

资源调度的艺术:大规模爬虫管理的优化策略

摘要 本文深入探讨了在处理大规模数据抓取项目时&#xff0c;如何通过优化资源调度策略来提升爬虫管理的效率与稳定性。从技术选型到策略实施&#xff0c;揭示了优化的核心技巧&#xff0c;助力企业与开发者高效驾驭大数据采集的挑战。 正文 在互联网信息爆炸的时代&#xf…

TypeScript 开发或面试中常见问题合集

目录 typescript 与 babel 区别编译编译器 模块模块解析规则 命名空间interface 合并逻辑声明合并 普通项目怎么从 js 迁移到 ts解决冲突 第三方工具生成.d.ts文件三斜线指令模块解析逻辑types 发布书写 ts 的声明文件Property includes does not exist on type number[] globa…

RSA非对称加密

前言 RSA是一种非对称加密算法&#xff0c;也是目前最常用的加密算法之一。它由三位发明家&#xff08;Rivest、Shamir、Adleman&#xff09;于1977年提出&#xff0c;并以他们的姓氏命名。RSA算法使用了两个密钥&#xff1a;公钥和私钥。公钥可用于对数据进行加密&#xff0c…

《Exploring Aligned Complementary Image Pair for Blind Motion Deblurring》

这篇论文的标题《Exploring Aligned Complementary Image Pair for Blind Motion Deblurring》可以翻译为《探索对齐的互补图像对用于盲运动去模糊》。从标题可以推断,论文的焦点在于开发一种算法或技术,利用成对的图像来解决运动模糊问题,特别是在不知道模糊核(即造成模糊…

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

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

Modbus转BACnet/IP网关快速对接Modbus协议设备与BA系统

摘要 在智能建筑和工业自动化领域&#xff0c;Modbus和BACnet/IP协议的集成应用越来越普遍。BA&#xff08;Building Automation&#xff0c;楼宇自动化&#xff09;系统作为现代建筑的核心&#xff0c;需要高效地处理来自不同协议的设备数据&#xff0c;负责监控和管理建筑内…

深入浅出mediasoup—通信框架

libuv 是一个跨平台的异步事件驱动库&#xff0c;用于构建高性能和可扩展的网络应用程序。mediasoup 基于 libuv 构建了包括管道、信号和 socket 在内的一整套通信框架&#xff0c;具有单线程、事件驱动和异步的典型特征&#xff0c;是构建高性能 WebRTC 流媒体服务器的重要基础…

使用 spring MVC 简单的案例 (1)计算器

一、计算器 1.1前端代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> …

Git报错fatal: detected dubious ownership in repository

报错信息 fatal: detected dubious ownership in repository at 解决办法 一行代码解决 git config --global --add safe.directory "*";如何使用git工具初始胡项目并且和远程仓库建立联系 git init–建立一个本地仓库 git add README.md–将README.md文件加入…

MySQL添加索引时会锁表吗?

目录 简介Online DDL概念Online DDL用法总结 简介 在MySQL5.5以及之前的版本&#xff0c;通常更改数据表结构操作&#xff08;DDL&#xff09;会阻塞对表数据的增删改操作&#xff08;DML&#xff09;。 MySQL5.6提供Online DDL之后可支持DDL与DML操作同时执行&#xff0c;降低…

算法通关:005对数器

就是你有优解&#xff0c;但是不知道对不对&#xff0c;或者你遇到了题&#xff0c;但是没有在线网站能跑&#xff0c;无法检查你的思路是否正确。 写一个随机生成符合输入要求的方法。 此时用暴力解法写一个&#xff0c;因为答案肯定是对的&#xff0c;再写一个优解方法。将两…

斐波那契数列的多种解法 C++实现,绘图部分用Python实现

斐波那契数列的多种解法 C实现&#xff0c;绘图部分用Python实现 flyfish 斐波那契数列&#xff08;Fibonacci sequence&#xff09;是一个经典的数列&#xff0c;定义如下&#xff1a; { 0 if n 0 1 if n 1 F ( n − 1 ) F ( n − 2 ) if n > 1 \begin{cases} 0 &…