html相关常用语法

发布于:2025-03-18 ⋅ 阅读:(19) ⋅ 点赞:(0)

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>

网站公告

今日签到

点亮在社区的每一天
去签到