HTML语法规范

news2024/12/22 20:40:53

HTML语法规则

  1. HTML 标签是由尖括号包围的关键词,标签通常是成对出现的,例如 <html></html>,称为双标签 。标签对中的第一个标签是开始标签,第二个标签是结束标签
  2. 单标签比较少,例如<br />,加一个/即可

标签关系

双标签关系可以分为两类:包含关系并列关系

//包含标签:
<html>
    <head></head>
</html>
//并列关系:
<html>
    <head></head>
    <body> </body>
</html>

HTML 基本结构标签

  1. HTML页面也称为 HTML 文档
  2. HTML 文档的的后缀名必须是 .html.htm ,浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。这也就提醒我们,用记事本时,要修改后缀名。
  3. 此时,用浏览器打开这个网页,可以预览HTML 文件了

在这里插入图片描述

vscode使用技巧

  1. ctrl + / - 放大缩小页面
  2. shift + alt + 下箭头 快速赋值上一行
  3. ctrl + d 选定多个相同的单词,双击单词,再按快捷键,可同时修改多个单词
  4. ctrl + alt + 上箭头/下箭头 ,添加多个光标,同时修改多行
  5. ctrl + h 全局替换某些单词
  6. ctrl + g 快速定位到某一行
  7. shift + alt 然后拖动鼠标,可以选择某个区块进行操作
  8. ctrl + / 单行注释

DOCTYPE

<!DOCTYPE html>  文档类型声明标签,告诉浏览器这个页面采取html5版本来显示页面.

注意:

  1. <!DOCTYPEl> 声明位于文档中最前面的位置,处于<html>标签之前
  2. <!DOCTYPEl>不是一个HTMl标签,他就是文档类型声明标签

HTML常用标签

标题标签

特点:

  1. 加了标题的文字会变的加粗,字号也会依次变大。
  2. 一个标题独占一行
  3. 标题标签为双标签,成对出现<h1></h1>
  4. 重要性h1h6一次递减

段落标签

  1. 需要注意的是,在软件使用时我们人为的换行,在网站打开是不起作用的无论打一个空格还是10个空格,都只会显示一个空格,因此需要段落标签帮助我们进行分段处理
  2. 双标签<p> 我是一个段落标签 </p>
  3. vscode中查看 – 自动换行
  4. 特点:
    1. 文本在一个段落中会根据浏览器窗口的大小自动换行。
    2. 段落和段落之间保有空隙。

换行标签

  1. 在 HTML 中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后才自动换行。如果希望某段文本强制换行显示,就需要使用换行标签 <br />
  2. 特点:
    1. <br /> 是个单标签
    2. <br /> 标签只是简单地开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距,
    3. 不会形成如段落一样的较大缝隙,在网页上看就是单纯的另起一行,而不是另起一段

文本格式化标签

在这里插入图片描述

特殊标签

  1. <div><span>标签,是是没有语义的,它们就是一个盒子,用来装内容的。
  2. 特点:
    1. <div> 标签用来布局,但是现在一行只能放一个<div>,也就是说一个<div>占一整行,后面再写内容会在<div>的下面显示。 大盒子
    2. <span> 标签用来布局,一行上可以多个 <span>。小盒子
    3. 都是双标签

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

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

相关文章

flink实现复杂kafka数据读取

接上文&#xff1a;一文说清flink从编码到部署上线 环境说明&#xff1a;MySQL&#xff1a;5.7&#xff1b;flink&#xff1a;1.14.0&#xff1b;hadoop&#xff1a;3.0.0&#xff1b;操作系统&#xff1a;CentOS 7.6&#xff1b;JDK&#xff1a;1.8.0_401。 常见的文章中&…

大模型微调---Prompt-tuning微调

目录 一、前言二、Prompt-tuning实战2.1、下载模型到本地2.2、加载模型与数据集2.3、处理数据2.4、Prompt-tuning微调2.5、训练参数配置2.6、开始训练 三、模型评估四、完整训练代码 一、前言 Prompt-tuning通过修改输入文本的提示&#xff08;Prompt&#xff09;来引导模型生…

如何使用 WebAssembly 扩展后端应用

1. WebAssembly 简介 随着互联网的发展&#xff0c;越来越多的应用借助 Javascript 转到了 Web 端&#xff0c;但人们也发现&#xff0c;随着移动互联网的兴起&#xff0c;需要把大量的应用迁移到手机端&#xff0c;随着手端的应用逻辑越来越复杂&#xff0c;Javascript 的解析…

python学习——洛谷P2010 [NOIP2016 普及组] 回文日期 三种方法

[NOIP2016 普及组] 回文日期 文章目录 [NOIP2016 普及组] 回文日期题目背景题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 样例 #2样例输入 #2样例输出 #2 提示方法一方法二方法三 题目背景 NOIP2016 普及组 T2 题目描述 在日常生活中&#xff0c;通过年、月、日这…

前端yarn工具打包时网络连接问题排查与解决

最近线上前端打包时提示 “There appears to be trouble with your network connection”&#xff0c;以此文档记录下排查过程。 前端打包方式 docker启动临时容器打包&#xff0c;命令如下 docker run --rm -w /app -v pwd:/app alpine-node-common:v16.20-pro sh -c "…

BenchmarkSQL使用教程

1. TPC-C介绍 Transaction Processing Performance Council (TPC) 事务处理性能委员会&#xff0c;是一家非盈利IT组织&#xff0c;他们的目的是定义数据库基准并且向产业界推广可验证的数据库性能测试。而TPC-C最后一个C代表的是压测模型的版本&#xff0c;在这之前还有TPC-A、…

Linux网络基础--传输层Tcp协议(上) (详细版)

目录 Tcp协议报头&#xff1a; 4位首部长度&#xff1a; 源端口号和目的端口号 32位序号和确认序号 标记位 超时重传机制&#xff1a; 两个问题 连接管理机制 三次握手&#xff0c;四次挥手 建立连接&#xff0c;为什么要有三次握手&#xff1f; 先科普一个概念&…

全志H618 Android12修改doucmentsui鼠标单击图片、文件夹选中区域

背景: 由于当前的文件管理器在我们的产品定义当中,某些界面有改动的需求,所以需要在Android12 rom中进行定制以符合当前产品定义。 需求: 在进入File文件管理器后,鼠标左击整个图片、整个文件夹可以选中该类型,进行操作,故代码分析以及客制化如下: 主要涉及的代码:…

Unity命令行传递自定义参数 命令行打包

命令行参数增加位置 -executeMethod 某脚本.某方法 参数1 参数2 参数3 ... 例如执行EditorTest.GetCommandLineArgs方法 增加两个命令行参数 Version=125 CDNVersion=100 -executeMethod EditorTest.GetCommandLineArgs Version=125 CDNVersion=100 Unity测试脚本 需要放在…

如何重新设置VSCode的密钥环密码?

故障现象&#xff1a; 忘记了Vscode的这个密码&#xff1a; Enter password to unlock An application wants access to the keyring “Default ke... Password: The unlock password was incorrect Cancel Unlock 解决办法&#xff1a; 1.任意terminal下&#xff0c;输入如下…

电子发票汇总改名,批量处理电子发票问题

今天给大家推荐一个财务方面工作的软件。可以帮你解决很多财务。发票方面的问题。 电子发票汇总改名 批量处理电子发票问题 这个软件安装之后。会在桌面上分成三个小软件&#xff0c;分别是修改单位信息、自定义命名规则和电子发票汇总改名。 你可以在这个软件里提取PDF或者of…

Linux——卷

Linux——卷 介绍 最近做的项目&#xff0c;涉及到对系统的一些维护&#xff0c;有些盘没有使用&#xff0c;需要创建逻辑盘并挂载到指定目录下。有些软件需要依赖空的逻辑盘&#xff08;LVM&#xff09;。 先简单介绍一下卷的一些概念&#xff0c;有分区、物理存储介质、物…

MySQL通用语法 -DDL、DML、DQL、DCL

SQL 全称 Structured Query Language&#xff0c;结构化查询语言。操作关系型数据库的编程语言&#xff0c;定义了 一套操作关系型数据库统一标准 。 SQL通用语法 MySQL语言的通用语法。 SQL语句可以单行或多行书写&#xff0c;以分号结尾。SQL语句可以使用空格/缩进来增强…

利用DnslogSqlinj工具DNSlog注入

工具下载链接 https://github.com/adooo/dnslogsqlinj 配置 将域名和API进行一个更改 之后再安装两个python2的库就可以使用dnslog进行自动化注入了 python2安装pip2 curl https://bootstrap.pypa.io/2.7/get-pip.py -o get-pip.py python2 get-pip.py库 pip2 install geven…

QT网络(一):主机信息查询

网络简介 在QT中进行网络通信可以使用QT提供的Qt Network模块&#xff0c;该模块提供了用于编写TCP/IP网络应用程序的各种类&#xff0c;如用于TCP通信的QTcpSocket和 QTcpServer&#xff0c;用于 UDP 通信的 QUdpSocket&#xff0c;还有用于网络承载管理的类&#xff0c;以及…

STM32-笔记5-按键点灯(中断方法)

1、复制03-流水灯项目&#xff0c;重命名06-按键点灯&#xff08;中断法&#xff09; 在\Drivers\BSP目录下创建一个文件夹exti&#xff0c;在该文件夹下&#xff0c;创建两个文件exti.c和exti.h文件&#xff0c;并且把这两个文件加载到项目中&#xff0c;打开项目工程文件 加载…

重塑医院挂号体验:SSM 与 Vue 搭建的预约系统设计与实现

4系统概要设计 4.1概述 本系统采用B/S结构(Browser/Server,浏览器/服务器结构)和基于Web服务两种模式&#xff0c;是一个适用于Internet环境下的模型结构。只要用户能连上Internet,便可以在任何时间、任何地点使用。系统工作原理图如图4-1所示&#xff1a; 图4-1系统工作原理…

mysql的事务控制和数据库的备份和恢复

事务控制语句 行锁和死锁 行锁 两个客户端同时对同一索引行进行操作 客户端1正常运行 客户端2想修改&#xff0c;被锁行 除非将事务提交才能继续运行 死锁 客户端1删除第5行 客户端2设置第1行为排他锁 客户端1删除行1被锁 客户端2更新行5被锁 如何避免死锁 mysql的备份和还…

C# OpenCV机器视觉:尺寸测量

转眼就是星期一了&#xff0c;又到了阿强该工作的时候了&#xff01;阿强走进了他作为机器视觉工程师的办公室&#xff0c;准备迎接新一天的挑战。随着周末的结束&#xff0c;他心中暗想&#xff1a;“如果我能让机器像我一样聪明&#xff0c;那就太好了&#xff01;” 正当他…

四川托普信息技术职业学院教案1

四川托普信息技术职业学院教案 【计科系】 周次 第 1周&#xff0c;第1次课 备 注 章节名称 第1章 XML语言简介 引言 1.1 HTML与标记语言 1.2 XML的来源 1.3 XML的制定目标 1.4 XML概述 1.5 有了HTML了&#xff0c;为什么还要发展XML 1.5.1 HTML的缺点 1.5.2 XML的特点 1.6 X…