当前位置: 首页 > 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>
http://www.dtcms.com/a/80868.html

相关文章:

  • 【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,多核异构如何成就机器人精准控制?
  • CMS漏洞-DeDeCMS篇
  • Python数据可视化实战:从基础图表到高级分析
  • 基于springboot的房产销售系统(016)
  • Spring常用参数校验注解
  • 【MySQL】存储过程
  • 前端安全之DOMPurify基础使用
  • 如何理解分布式光纤传感器?
  • 二手Mac验机过程
  • 新一代电子数据取证专家 | 苏州龙信信息科技有限公司
  • 操作系统为ubantu的服务器上部署nginx软件基础步骤总结