当前位置: 首页 > article >正文

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

http://www.kler.cn/a/446756.html

相关文章:

  • 【TF-IDF】Hugging Face Model Recommendation System
  • 滚珠花键的保养与维护方法
  • STL 剖析
  • ChatGPT重大更新:新增实时搜索和高级语音
  • 解决小程序中ios可以正常滚动,而Android失效问题
  • 基于Python3编写的Golang程序多平台交叉编译自动化脚本
  • 自动生成发票数据并存入Excel
  • 【大语言模型】ACL2024论文-28 TTM-RE: 增强记忆的文档级关系抽取
  • 你了解TCP/IP参考模型吗
  • 8086汇编(16位汇编)学习笔记00.DEBUG命令使用解析及范例大全
  • Qt开发经验 --- 避坑指南(2)
  • Ajax简单理解
  • raft: Failed to contact
  • 从零搭建纯前端飞机大战游戏(附源码)
  • Restaurants WebAPI(三)——Serilog/
  • 前端学习二
  • SQL血缘解析
  • ubuntu镜像开荒ssh
  • [数据结构] 链表
  • 【Linux开发工具】版本控制器git
  • Vivado - 远程调试 + 远程综合实现 + vmWare网络配置 + NFS 文件共享 + 使用 VIO 核
  • 如何看待Java面试造火箭工作拧螺丝?
  • 怎么将pdf中的某一个提取出来?介绍几种提取PDF中页面的方法
  • 数据结构与算法学习笔记----Prim算法
  • 复盘:“辩论赛”复盘
  • 容联云孔淼:金融数智化深水区,从数字化工具到业务变革提效