HTML语法规范

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. 都是双标签

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

四川托普信息技术职业学院教案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…

Win10将WindowsTerminal设置默认终端并添加到右键(无法使用微软商店)

由于公司内网限制&#xff0c;无法通过微软商店安装 Windows Terminal&#xff0c;本指南提供手动安装和配置新版 Windows Terminal 的步骤&#xff0c;并添加右键菜单快捷方式。 1. 下载新版终端安装包: 访问 Windows Terminal 的 GitHub 发布页面&#xff1a;https://githu…

OpenAI发布新一代推理模型O3和O3 Mini:能力与性能的双重突破

2024年12月21日&#xff0c;OpenAI通过一场特别活动正式宣布了其新一代推理模型O3及其轻量化版本O3 Mini。这标志着AI推理能力和效率的又一次飞跃。本文将围绕发布会中的关键内容&#xff0c;详细介绍O3和O3 Mini的核心能力、性能表现、以及面向公众安全测试的相关计划。 1. 背…

VScode插件之get、set函数自动生成

文章目录 VScode插件之get、set函数自动生成插件名称现有功能功能快捷键使用总结与部分插件的get、set生成对比部分实现效果展示部分实现思路 VScode插件之get、set函数自动生成 初次尝试插件的编写开发&#xff0c;这篇博客也是对自己成果的一个记录&#xff0c;如有不足请指…

【Lua热更新】上篇

Lua 热更新 - 上篇 下篇链接&#xff1a;【Lua热更新】下篇 文章目录 Lua 热更新 - 上篇一、AssetBundle1.理论2. AB包资源加载 二、Lua 语法1. 简单数据类型2.字符串操作3.运算符4.条件分支语句5.循环语句6.函数7. table数组8.迭代器遍历9.复杂数据类型 - 表9.1字典9.2类9.3…

完全二叉树的权值(蓝桥杯2019年试题G)

给定一棵包含N个节点的完全二叉树&#xff0c;树上的每个节点都有一个权值&#xff0c;按从上到小、从左到右的顺序依次是A1、A2……An,&#xff08;1&#xff0c;2&#xff0c;n为下标。&#xff09;如下图所示。 现在&#xff0c;小明要把相同深度的节点的权值加到一起&#…

时间管理系统|Java|SSM|JSP|

【技术栈】 1⃣️&#xff1a;架构: B/S、MVC 2⃣️&#xff1a;系统环境&#xff1a;Windowsh/Mac 3⃣️&#xff1a;开发环境&#xff1a;IDEA、JDK1.8、Maven、Mysql5.7 4⃣️&#xff1a;技术栈&#xff1a;Java、Mysql、SSM、Mybatis-Plus、JSP、jquery,html 5⃣️数据库可…

前端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 "…

harmony UI组件学习(1)

Image 图片组件 string格式&#xff0c;通常用来加载网络图片&#xff0c;需要申请网络访问权限:ohos.permission.INTERNET Image(https://xxx.png) PixelMap格式&#xff0c;可以加载像素图&#xff0c;常用在图片编辑中 Image(pixelMapobject) Resource格式&#xff0c;加…

mac 安装graalvm

Download GraalVM 上面链接选择jdk的版本 以及系统的环境下载graalvm的tar包 解压tar包 tar -xzf graalvm-jdk-<version>_macos-<architecture>.tar.gz 移入java的文件夹目录 sudo mv graalvm-jdk-<version> /Library/Java/JavaVirtualMachines 设置环境变…

14-zookeeper环境搭建

0、环境 java&#xff1a;1.8zookeeper&#xff1a;3.5.6 1、下载 zookeeper下载点击这里。 2、安装 下载完成后解压&#xff0c;放到你想放的目录里。先看一下zookeeper的目录结构&#xff0c;如下图&#xff1a; 进入conf目录&#xff0c;复制zoo_sample.cfg&#xff0…

如何使用Python处理视频合成

使用 Python 处理视频合成可借助 MoviePy 库&#xff0c;以下是具体步骤&#xff1a; 安装 MoviePy 通过 pip 命令安装&#xff0c;即 pip install moviepy&#xff0c;需确保已安装 ffmpeg&#xff0c;并正确设置环境变量&#xff0c;因为 MoviePy 依赖它来处理视频. 基本合…

存储过程 与 存储函数的区别及用法 及 触发器 !!!

引言&#xff1a; 存储函数和存储过程&#xff0c;作为数据库中的预编译代码块&#xff0c;能够封装复杂的业务逻辑和数据处理流程&#xff0c;使得数据库操作更加简洁、易读和可维护。而触发器&#xff0c;则像是一个智能的守卫&#xff0c;能够在特定事件发生时自动执行预设的…

用nginx部署两个前端(超简单,三步!)

1.首先在nginx的html目录下创两个文件夹分别用于放两个前端打包好的静态资源&#xff0c;并且把静态资源各自放好&#xff1a; 2. 在nginx的配置文件里&#xff0c;写好两个server。如图&#xff0c;写好两个前端要用的端口以及刚才那两文件夹的路径&#xff1a; worker_proces…

level2逐笔委托查询接口

沪深逐笔委托队列查询 前置步骤 分配数据库服务器 查询模板 以下是沪深委托队列查询的请求模板&#xff1a; http://<数据库服务器>/sql?modeorder_book&code<股票代码>&offset<offset>&token<token>查询参数说明 参数名类型说明mo…

flask-admin的modelview 实现list列表视图中某个列字段值翻译

背景&#xff1a; flask-admin 开发中modelview视图是非常强大的&#xff0c;但文档写的很难受&#xff0c;只能通过源码慢慢摸索学习&#xff0c;一点点记录 材料&#xff1a; 可用的flask-admin 环境 制作&#xff1a; 样例代码&#xff1a; 1、modelview 视图代码 col…

打造基于 SSM 和 Vue 的卓越电脑测评系统:挖掘电脑潜力

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常适…

物联网:全面概述、架构、应用、仿真工具、挑战和未来方向

中文论文标题&#xff1a;物联网&#xff1a;全面概述、架构、应用、仿真工具、挑战和未来方向 英文论文标题&#xff1a;Internet of Things: a comprehensive overview, architectures, applications, simulation tools, challenges and future directions 作者信息&#x…

【AI学习】OpenAI推出o3,向AGI迈出关键一步

2024年12月21日&#xff0c;OpenAI在其为期12天发布会活动的最后一天&#xff0c;正式发布了备受期待的o3系列模型&#xff0c;包括o3和o3-mini。 o3 是一个非常强大的模型&#xff0c;在编码、数学以及 ARC-AGI 基准测试等多个基准上超过了 OpenAI 此前的 o1 模型&#xff08…

Oracle 中间件 Webcenter Portal服务器环境搭建

环境信息 服务器基本信息 如下表&#xff0c;本次安装总共使用2台服务器&#xff0c;具体信息如下&#xff1a; Webcenter1服务器 归类 SOA服务器 Ip Address 172.xx.xx.xx.xx HostName wcc01.xxxxxx.com Alias wccprd01 Webcenter2服务器 归类 OSB服务器 Ip Addr…