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

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.kler.cn/a/594370.html

相关文章:

  • 机器学习:让计算机学会思考的艺术
  • ubuntu中的配置文件,bashrc、profile
  • 【MySQL】MySQL如何存储数据?
  • Ubuntu20.04安装并配置Pycharm2020.2.5
  • 如何提高STM32 ADC采样速率及精度——核心方法详解
  • 21、web前端开发之html5(二)
  • CSS3-2D转换、动画、3D转换详解
  • 第六:go 操作 redis-go
  • Lineageos 22.1(Android 15)实现负一屏
  • Linux中vscode编程,小白入门喂饭级教程
  • 八股文-C++ 运行时多态与函数调用机制详解
  • Chrome 调试器第二次连接不上?
  • 哈希表以及封装unordered_map及其set
  • uni-app 项目源码托管指南:从零开始将项目上传至 Gitee
  • Bash中小数的大小比较以及if条件中小数的大小判断
  • 将有序数组转换为二叉搜索树 力扣108
  • 什么是 React Router?如何使用它?
  • Web-Machine-N7靶机通关攻略
  • 技术速递|.NET AI 模板现已提供预览版
  • 用Ollama部署大语言模型