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

html相关常用语法

html相关常用语法

HTML(HyperText Markup Language)即超文本标记语言,是用于创建网页的标准标记语言
HTML使用标记语言描述Web页面的结构
HTML元素是HTML页面的建构快
HTML元素通过标签tag来表示
HTML标签是“标题”、”段落“、”表格“等内容的一部分
浏览器不显示HTML标签,但是使用它们来渲染页面内容

HTML标签是被尖括号包围的元素名称,html标签通常成对出现,一个是开始标签,一个是结束标签。开始标签和结束标签相同,但在结束标签名称前需要插入一个反斜线

  1. ! 生成html基本模板
<!--使用!生成html基本模板-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2.子元素>

<!-- div>ul>li -->
<div>
    <ul>
        <li></li>
    </ul>
</div>

3.兄弟元素 +

<!-- div+p+bq -->
<div></div>
<p></p>
<blockquote></blockquote>

4.嵌套子元素 >

<!-- div+div>p>span+em -->
<div></div>
<div>
    <p><span></span><em></em></p>
</div>

5.多次重复 *

<!-- ul>li*5 -->
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

6.分组()

<!-- div>(header>ul>li*2>a)+footer>p -->
<div></div>
<header>
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</header>
<footer>
    <p></p>
</footer>

7.属性操作id和class

<!-- div#header+div.page+div#footer.class1.class2.class3 -->
<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

举一个简单的实例

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
    <meta charset="utf-8">
</head>
<body>
    <h1>标题</h1>
    <p>段落</p>
</body>
</html>
<!--声明文档类型为 HTML5 只出现一次,并且在页面顶部-->
 <!DOCTYPE html>
<!--html元素是HTML页面的根元素-->
<html>
<!--head 元素包含关于文档的元数据信息-->
<head>
<!--title元素为文档指定一个标题-->
<title>标题</title>
<!--body元素包含可视化页面内容-->
<body>
<!--h1元素定义一个大的标题-->
<h1>标题</h1>
<!--p元素定义一个段落-->
<p>段落</p>

相关文章:

  • 【docker】--- 详解 WSL2 中的 Ubuntu 和 Docker Desktop 的区别和关系!
  • springboot Actuator 指标分析
  • 在 Kubernetes(k8s)部署过程中常见的问题
  • 数据结构:用C语言实现插入排序
  • WPF 中的 GridSplitter 详解
  • mysql 索引的使用
  • 【数据库备份】docker中数据库备份脚本——MySql备份脚本
  • 【工具分享】vscode+deepseek的接入与使用
  • Spring MVC响应数据
  • Redis Spring Cache
  • 一和零 (leetcode 474
  • wujie vite vue3
  • 尝试将相机采集图像流程封装成相机采图类
  • 数据可信安全流通实战,隐语开源社区Meetup武汉站开放报名
  • 如何制作一个手机用的电动3D扫描转盘
  • 未来办公与生活的新范式——智慧园区
  • 【K8S】ImagePullBackOff状态问题排查。
  • iwebsec-updatexml报错注入
  • Linux的I2C总线的原理和结构详解
  • ZMC600E,多核异构如何成就机器人精准控制?
  • 前4个月我国货物贸易进出口同比增长2.4%,增速较一季度加快1.1个百分点
  • 阿里CEO:将以饱和式投入打法,聚焦几大核心战役
  • 外交部答澎湃:美方攻击抹黑中加关系与合作的卑劣图谋不会得逞
  • 复旦设立新文科发展基金,校友曹国伟、王长田联合捐赠1亿助力人文学科与社会科学创新
  • 印度袭击巴基斯坦已致至少3人死亡
  • 马克思主义理论研究教学名师系列访谈|石书臣:思政课是落实立德树人的关键