Web前端:HTML篇(一)

news2025/6/9 16:44:25

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.coloradmin.cn/o/1942314.html

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

相关文章

android studio中svn的使用

第一步&#xff0c;建立一个项目。 第二步&#xff0c;share project。 第三步&#xff0c;选择存放的位置&#xff0c;然后添加提交信息&#xff0c;最后点击share。这样就可以在svn上面看到一个空的项目名称。 第四步&#xff0c;看到文件变成了绿色&#xff0c;点击commit图…

驾驭云原生日志洪流:高效分析与管理的策略集

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《未来已来&#xff1a;云原生之旅》&#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、日志管理在云原生架构中的重要性 2、云原生环境的特…

Open-TeleVision复现及机器人迁移

相关信息 标题 Open-TeleVision: Teleoperation with Immersive Active Visual Feedback作者 Xuxin Cheng1 Jialong Li1 Shiqi Yang1 Ge Yang2 Xiaolong Wang1 UC San Diego1 MIT2主页 https://robot-tv.github.io/链接 https://robot-tv.github.io/resources/television.pdf代…

Java | Leetcode Java题解之第273题整数转换英文表示

题目&#xff1a; 题解&#xff1a; class Solution {String[] singles {"", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine"};String[] t…

Linux下安装Redis(超简单)

1.下载 选着自己需要下载的版本后&#xff0c;右击选择复制链接&#xff0c;然后利用命令进行下载&#xff0c;进入Xshell控制台&#xff0c;输入wget将复制的链接粘帖上&#xff0c;这里我选择的是6.0.6版本。 命令如下&#xff1a; wget https://download.redis.io…

QML学习——Qt Quick Controls 1 Examples Calendar/FileSystemBrowser(九)

02 File System Browser Show: Notes: 使用了自定义的继承自QFileSystemModel的类&#xff0c;在原有的基础上新加了角色(role)&#xff0c;并且重写了QFileSystemModel中的data函数、及角色和字符串描述对应的哈希表&#xff1b; 使用系统的文件资源管理器打开该文件的链接&…

资产拆分、资产分割的操作,事务代码ABUMN

在公司常见的业务运行中可能会有这样的场景&#xff1a;资产A 需要拆分成资产B 和 C。这个时候就需要使用到资产分割或者资产转移的操作 &#xff0c;事务代码ABUMN。 我司的实际业务场景是这样的&#xff0c;当初想分别入账给A和B的资产。一年之后发现&#xff0c;当时操作错误…

高清录屏无压力,这四款软件助你轻松搞定

现在不论是教育、娱乐还是工作电脑怎么录屏都成为这些领域里不可或缺的一部分。掌握录屏软件&#xff0c;也能成为个人的软实力之一哦&#xff0c;下面我介绍几款可以快速上手的录屏软件来为你增加实力。 1、福晰REC大师 这款软件我是觉得他是我最快上手的一个工具&#xff0…

Unity UGUI 之 Dropdown

本文仅作学习笔记与交流&#xff0c;不作任何商业用途 本文包括但不限于unity官方手册&#xff0c;唐老狮&#xff0c;麦扣教程知识&#xff0c;引用会标记&#xff0c;如有不足还请斧正 1.Dropdown是什么 下拉列表 2.重要参数 首先这些参数和Button差不多&#xff0c;不过多…

昇思MindSpore学习入门-格式转换

MindSpore中可以把用于训练网络模型的数据集&#xff0c;转换为MindSpore特定的格式数据&#xff08;MindSpore Record格式&#xff09;&#xff0c;从而更加方便地保存和加载数据。其目标是归一化用户的数据集&#xff0c;并进一步通过MindDataset接口实现数据的读取&#xff…

基于微信小程序+SpringBoot+Vue的校园自助打印系统(带1w+文档)

基于微信小程序SpringBootVue的校园自助打印系统(带1w文档) 基于微信小程序SpringBootVue的校园自助打印系统(带1w文档) 管理信息可以处理复杂的信息从而提高用户的工作效率&#xff0c;减少失误。所以本基于Vue和微信小程序的校园自助打印系统的开发非常有意义&#xff0c;本系…

科研绘图系列:R语言TCGA分组饼图(multiple pie charts)

介绍 在诸如癌症基因组图谱(TCGA)等群体研究项目中,为了有效地表征和比较不同群体的属性分布,科研人员广泛采用饼图作为数据可视化的工具。饼图通过将一个完整的圆形划分为若干个扇形区域,每个扇形区域的面积大小直接对应其代表的属性在整体中的占比。这种图形化的展示方…

react入门到实战-day2-7.21

昨天晚上刚学完已经一点了&#xff0c;来不及写笔记&#xff0c;主要是想睡觉哈&#xff0c;所以今天补上&#xff0c;我发现效率还挺高的&#xff0c;今天重新做笔记&#xff0c;加固了昨天的知识点&#xff0c;要不以后都这样子哈&#xff0c;学完第二天再写哈&#xff0c;要…

【MSPM0G3507】CCS-Sysconfig配置 按键控制LED(二)

1.相关配置 主控&#xff1a;MSPM0G3507编译环境&#xff1a;CCS 2.板子以及原理图 3.Sysconfig配置 LED配置一样 按键为INPUT DL_GPIO_readPins(GPIO_SWITCHES_PORT, GPIO_SWITCHES_USER_1_PIN)// 读取端口状态类型为uint32_t &#xff0c;返回的是对应引脚的状态位。比如…

react中组件间的通信

一、父传子 1.代码展示 import React, { useState } from react;function SonPage(props){ // 子组件const {msg} propsreturn (<div>我是子组件 {msg}</div>) }function App() { // 父组件const [msgText,setMsgText] useState(父传子)return (<div classN…

四、GD32 MCU 常见外设介绍 (5) TIMER 模块介绍

5.1.TIMER 基础知识 TIMER分高级定时器&#xff0c;通用定时器L0&#xff0c;L1&#xff0c;L2和基本定时器。 5.2.硬件连接说明 TIMER 属于片内外设&#xff0c;对于外部硬件设计&#xff0c;只需要单独IO口外接信号线即可。 5.3.GD32 TIMER 外设原理简介&#xff08;以 G…

wsl –install 遇到灾难性故障

windows10 使用wsl 安装Linux系统遇到&#xff1a;灾难性故障 解决办法

VideoAgent: Long-form Video Understanding with Large Language Model as Agent

VideoAgent: Long-form Video Understanding with Large Language Model as Agent 基本信息 博客贡献人 燕青 作者 Xiaohan Wang, Yuhui Zhang, et al. 标签 Large Language Model Agent, Long-form Video Understanding, Vision-Language Foundation Models 摘要 长视…

【Drone】drone编译web端 防墙策略 | 如何在被墙的状态drone顺利编译npm

一、drone编译防墙版本 1、web端drone kind: pipeline type: docker name: ui steps:- name: build_projectimage: node:20-slim depends_on: [clone]volumes:- name: node_modulespath: /drone/src/node_modulescommands:- pwd- du -sh *- npm config set registry https://…

Anaconda下安装配置Jupyter

Anaconda下安装配置Jupyter 1、安装 conda activate my_env #激活虚拟环境 pip install jupyter #安装 jupyter notebook --generate-config #生成配置文件提示配置文件的位置&#xff1a; Writing default config to: /root/.jupyter/jupyter_notebook_config.py检查版本&am…