web前端-HTML标签

news2024/11/10 13:33:03

一、HTML语法规范

1.基本语法概述

(1)HTML标签是由尖括号包围的关键词,例如<html>

(2)HTML标签通常是成对出现的,例始<html>和</html>,我们称为双标签。标签对中的第一个标签是开始标签,第二个标签是结束标签

(3)有些特殊的标签必须是单个标签(极少情况),例如<br/>,我们称为单标签

2.标签关系

(1)包含关系:

(2)并列关系

二、HTML基本结构标签

1.第一个HTML网页

每个网页都会有一个基本的结构标签(也称为骨架标签),页面内容也是在这些基本标签上书写,HTML页面也称为 HTML文档

每个网页都会有一个基本的结构标签(也称为骨架标签),页面内容也是在这些基本标签上书写。

三、网页开发工具-VSCode的使用

生成页面骨架结构:输入!后按下Tab键或回车键

VSCode 工具生成骨架标签新增代码

1.文档类型声明标签

<!DOCTYPE>文档类型声明,作用就是告诉浏览器使用哪种HTML版本来显示网页。

这句代码的意思是:当前页面采取的是HTML5版本来显示网页

2.lang语言种类

用来定义当前文档显示的语言。

(1)en定义语言为英语

(2)zh-CN定义语言为中文

简单来说,定义为en 就是英文网页,定义为 zh-CN 就是中文网页

其实对于文档显示来说,定义成en的文档也可以显示中文,定义成zh-CN的文档也可以显示英文

3.字符集

字符集(Characterset)是多个字符的集合,以便计算机能够识别和存储各种文字

在<head>标签内,可以通过<meta>标签的charset属性来规定 HTML文档应该使用哪种字符编码。

charset常用的值有:GB2312、BIG5、GBK和 UTF-8,其中UTF-8也被称为万国码,基本包含了全世界所有国家需要用到的字符

一般情况下,统一使用“UTF-8”编码

尽量注意:上面语法是必须要写的代码,否则可能引起乱码的情况。统一写成标准的"UTF-8",不要写成"utf8"或"UTF8"

四、HTML常用标签

1.标题标签<h1>-<h6>

为了使网页更具有语义化,我们经常会在页面中用到标题标签,HTML提供了6个等级的网页标题即<h1>-<h6>。

单词 head 的缩写,意为头部、标题。

标签语义:作为标题使用,并且依据重要性递减。

特点:
(1)加了标题的文字会变的加粗,字号也会依次变大

(2)一个标题独占一行。

2. 段落和换行标签
在网页中,要把文字有条理地显示出来,就需要将这些文字分段显示。

在HTML标签中,<p>标签用于定义段落,它可以将整个网页分为若干个段落。

单词 paragraph的缩写,意为段落标签语义:可以把 HTML 文档分割为若干段落。

特点:
1.文本在一个段落中会根据浏览器窗口的大小自动换行。

2.段落和段落之间保有空隙。

在 HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后才自动换行。如果希望某段文本强制换行显示,就需要使用换行标签<br/>


单词 break的缩写,意为打断、换行。
标签语义:强制换行。
特点:
(1)<br/>是个单标签
(2)<br />标签只是简单地开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距。

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

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

相关文章

STM32(一)简介

一、stm32简介 1.外设接口 通过程序配置外设来完成功能 2.系统结构 3.引脚定义 4.启动配置 5.最小系统电路

解决:axios 请求头url传参数组时发生400错误

一、前言 axios封装的网络请求&#xff0c;url传参时&#xff0c;数组作为参数传递&#xff0c;发生400错误请求时数组参数转url会保留 [] 二、原因 RFC3986&#xff1a;除了 数字 字母 -_.~ 不会被转义&#xff0c;其他字符都会被以百分号&#xff08;%&#xff09;后跟两位…

QT:动态库与静态库的生成和使用

目录 一.动态库和静态库 1.动态链接&#xff08;Dynamic Linking&#xff09; 2.静态链接&#xff08;Static Linking&#xff09; 3.选择依据 二.库的创建 1.新建文件和项目中&#xff0c;选择Library中C库 2.新建一个名为libtest库 3.打印一个qDebug&#xff0c;用于…

PCA数据降维技术详解

在数据分析和机器学习的世界里&#xff0c;维度灾难是一个不可忽视的问题。随着数据维度的增加&#xff0c;计算量急剧上升&#xff0c;模型复杂度变高&#xff0c;同时可能引入噪声和冗余信息&#xff0c;影响模型的性能和解释性。主成分分析&#xff08;Principal Component …

第六篇——黄金分割:毕达哥拉斯如何连接数学和美学?

目录 一、背景介绍二、思路&方案三、过程1.思维导图2.文章中经典的句子理解3.学习之后对于投资市场的理解4.通过这篇文章结合我知道的东西我能想到什么&#xff1f; 四、总结五、升华 一、背景介绍 人眼看到的美的东西&#xff0c;都可以从数学这个抽象的学科中得到明确的…

网页打印模板解析源码--SAAS本地化及未来之窗行业应用跨平台架构

一、打印模板解析 /* ///cyberwin_offline_database_printtemp.js未来之窗打印模板解析技术 2024-09 */ class CyberWin_Database_printtemp_KV {constructor() {this.data {};this.line_count 0 ;}解析(数据) {// this.data[key] value;this.line_count 0 ;this.data {}…

生日(仅粉丝可见,生日是9月6日,提前一天发的)

祝我自己生日快乐&#xff01; 感谢大家的陪伴与支持&#xff0c;以后我会努力做作品的&#xff01; &#xff08;累谁也不能累自己&#xff0c;所以我打算放3天假&#xff0c;反正延迟开学&#xff0c;先玩了来再去上学&#xff01;&#xff09;

数据库超时排查

背景&#xff1a; 项目是用的springboot&#xff0c;连接池用的是hikaricp&#xff0c;且数据库连接做了LB配置&#xff0c;之前就是经常会有数据库出现问题&#xff0c;专家给到的解决方案。 数据连接io超时报错&#xff0c;排查了当时数据库各项指标都无显示异常&#xff0c;…

基于SA-BP模拟退火算法优化BP神经网络实现数据预测Python实现

在数据分析和机器学习领域&#xff0c;时间序列预测和多输入单输出系统的预测是重要且复杂的问题。传统的BP&#xff08;反向传播&#xff09;神经网络虽然具有强大的非线性函数逼近能力&#xff0c;但在处理这些问题时容易陷入局部极小值、训练速度慢以及过拟合等问题。为了克…

【读书笔记-《30天自制操作系统》-15】Day16

本篇内容继续多任务的讲解。上一篇中实现了两个任务之间的自动切换&#xff0c;但还不够通用&#xff0c;这里将其优化为多个任务之间的切换。接着引入了任务休眠的概念与休眠的程序实现。最后介绍了任务的优先级&#xff0c;一种用切换时间的长短来衡量&#xff0c;一种用Task…

【Qt】文件对话框QFileDialog

文件对话框QFileDialog ⽂件对话框⽤于应⽤程序中需要打开⼀个外部⽂件或需要将当前内容存储到指定的外部⽂件。 通过QFileDialog 可以选择一个文件&#xff0c;能够获取到这个文件的路径&#xff0c;打开文件/保存文件。 常⽤⽅法介绍&#xff1a; 1、打开⽂件&#xff08;⼀…

【高中生讲机器学习】17. 讲人话的主成分分析,它来了!(上篇)

创建时间&#xff1a;2024-08-13 首发时间&#xff1a;2024-09-05 最后编辑时间&#xff1a;2024-09-05 作者&#xff1a;Geeker_LStar 你好呀~这里是 Geeker_LStar 的人工智能学习专栏&#xff0c;很高兴遇见你~ 我是 Geeker_LStar&#xff0c;一名准高一学生&#xff0c;热爱…

Redis 集群高可用详解及配置

关型数据库 关系型数据库&#xff1a; 是建立在关系模型基础上的数据库&#xff0c;其借助于集合代数等数学概念和方法来处理数据库中的数据 主流的 MySQL、Oracle、MS SQL Server 和 DB2 都属于这类传统数据库 关型数据库的优缺点 特点&#xff1a; 1、数据关系模型基于关系…

Redis使用——Redis的redis.conf配置注释详解(三)

Redis使用——Redis的redis.conf配置注释详解&#xff08;三&#xff09; 背景 日常我们开发时&#xff0c;我们会遇到各种各样的奇奇怪怪的问题&#xff08;踩坑o(╯□╰)o&#xff09;&#xff0c;这个常见问题系列就是我日常遇到的一些问题的记录文章系列&#xff0c;这里整…

鸿蒙轻内核M核源码分析系列四 中断Hwi

往期知识点记录&#xff1a; 鸿蒙&#xff08;HarmonyOS&#xff09;应用层开发&#xff08;北向&#xff09;知识点汇总 持续更新中…… 在鸿蒙轻内核源码分析系列前几篇文章中&#xff0c;剖析了重要的数据结构。本文&#xff0c;我们讲述一下中断&#xff0c;会给读者介绍中…

Ubuntu固定USB串口名(包括1拖N的USB串口)

在运行Ubuntu系统的开发板上,如果使用可插拔的USB串口,有时候程序正在运行时,如果突然连接传感器的USB串口设备被插拔了一下,这时,会发现系统中的USB串口名发生了改变。例如,插拔之前是/dev/ttyUSB0,插拔之后变成了/dev/ttyUSB3。发生这种情况的时候,有时候会导致程序无…

Windows I/O系统

硬件存储体系 寄存器 处理器内部定义的存储体&#xff0c;它们除了存储功能&#xff0c;往往还兼有其他的能力&#xff0c;比如参与运算&#xff0c;地址解析&#xff0c;指示处理器的状态&#xff0c;等等。寄存器是由处理器内部专门的触发器电路实现的&#xff0c;处理器往…

jupyter里怎么设置代理下载模型

使用如下方式: %env http_proxyhttp://10.110.146.100:7890 %env https_proxyhttp://10.110.146.100:7890

【SLAM】GNSS的定义,信号原理以及RTK在多传感器融合中的使用方法

【SLAM】GNSS的定义&#xff0c;信号原理以及在多传感器融合中的使用方法 1. GNSS的定义2. GNSS信号原理3. RTK - Real Time Kinematic4。 如何使用RTK做融合和优化 1. GNSS的定义 GPS&#xff08;Global Positioning System&#xff09;和GNSS&#xff08;Global Navigation …

Ubuntu22.04安装colmap

首先上这里查看自己电脑GPU的CMAKE_CUDA_ARCHITECTURES 终端输入以下内容安装预先的前置依赖 sudo apt-get install \git cmake ninja-build build-essential \libboost-program-options-dev libboost-filesystem-dev \libboost-graph-dev libboost-system-dev libboost-tes…