首页 > 其他分享 >【网页前端设计HTML】水平线、div、自闭合标签及块元素和行内元素、特殊符号

【网页前端设计HTML】水平线、div、自闭合标签及块元素和行内元素、特殊符号

时间:2024-07-13 18:29:33浏览次数:11  
标签:及块 hr 标签 元素 水平线 HTML div 特殊符号 我们

使用所分享的知识,还不能够完成下图的设计,观察一下,我们还有什么知识没讲呢?
在这里插入图片描述
聪明的你一定能看到:一条长长的线分隔开每一个科目,但是这条长线怎么表示,用什么标签呢?

一、水平线标签

我来告诉你,这条长长的线,我们称之为“水平线”。在HTML中,我们可以使用“hr标签”来实现一条水平线。hr,是horizon(水平线)的缩写。
语法:<hr />
我们通过一张图来看一下它的效果:
在这里插入图片描述
红色的框框里面的内容对应的就是水平线的代码和效果。
请完成以下练习:
在这里插入图片描述

二、div标签

每个科目我们可以看成一部分,那么它可以分成几部分呢?那怎么表示这样的某一部分呢?在HTML中,我们可以使用“div标签”来划分HTML结构。
尝试使用div把以上的两首古诗分成2部分。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>水平线标签</title>
</head>
<body>
    <!--这是第一首诗-->
    <h3>静夜思</h3>                  
    <p>床前明月光,疑是地上霜。</p>
    <p>举头望明月,低头思故乡。</p>
    <hr/>
    <!--这是第二首诗-->
    <h3>春晓</h3>                  
    <p>春眠不觉晓,处处闻啼鸟。</p>
    <p>夜来风雨声,花落知多少。</p>
</body>
</html>

加上div标签:

<body>
    <!--这是第一首诗-->
    <div>
        <h3

标签:及块,hr,标签,元素,水平线,HTML,div,特殊符号,我们
From: https://blog.csdn.net/weixin_53597021/article/details/140402044

相关文章

  • LeetCode 3091. 执行操作使数据元素之和大于等于 K(贪心、数学)
    3091.执行操作使数据元素之和大于等于K思路:数学思维题。先执行操作一让1加到k的平方根向上取整的数t,然后执行操作二,达到数组和>=k即可。classSolution{public:intminOperations(intk){intt=ceil(sqrt(k));return(k+t-1)/t+t-2;}......
  • 元素缩放?一个vue指令搞定
    说在前面......
  • [LeetCode]961. 在长度 2N 的数组中找出重复 N 次的元素
    /*961.在长度2N的数组中找出重复N次的元素已解答简单给你一个整数数组nums,该数组具有以下属性:nums.length==2*n.nums包含n+1个不同的元素nums中恰有一个元素重复n次找出并返回重复了n次的那个元素。示例1:输入:nums=[1,2,3,3]输出:3示例2:输入......
  • Qt/QML学习-动画元素
    QML学习动画元素例程视频讲解代码main.qmlimportQtQuick2.15importQtQuick.Window2.15Window{width:640height:480visible:truetitle:qsTr("HelloWorld")Rectangle{id:rectwidth:50height:50......
  • 输入一个正整数n (1≤ n ≤6),再输入一个n 行n列的矩阵,找出该矩阵中绝对值最大的元素
    /输入一个正整数n(1≤n≤6),再输入一个n行n列的矩阵,找出该矩阵中绝对值最大的元素以及它的行下标和列下标。/#include<stdio.h>voidfun(void){intn,i,j;intmax_val=0,max_row=0,max_col=0;printf("pleaseenternumber,1<=number<=6\n");......
  • leecode 169. 多数元素
     给定一个大小为 n 的数组 nums ,返回其中的多数元素。多数元素是指在数组中出现次数 大于 ⌊n/2⌋ 的元素。你可以假设数组是非空的,并且给定的数组总是存在多数元素。 示例 1:输入:nums=[3,2,3]输出:3示例 2:输入:nums=[2,2,1,1,1,2,2]输出:2思想:在排序后,出......
  • react hooks实现对元素拖拽及鼠标滚轮缩放
    page.jsximport'./index.less';import{useDrag,useZoom}from'./hooks';constDragZoom=()=>{const{handleMouseDown,handleMouseMove,handleMouseUp}=useDrag();const{handleWheel,scale}=useZoom();re......
  • G65 线性基+贪心法 P4570 [BJWC2011] 元素
    视频链接: P4570[BJWC2011]元素-洛谷|计算机科学教育新生态(luogu.com.cn)//线性基O(60*n)#include<iostream>#include<cstring>#include<algorithm>usingnamespacestd;#defineLLlonglongconstLLN=1005;intn,m;structnode{LLnum,val;}a......
  • Day3| 203.移除链表元素 & 707.设计链表 & 206.反转链表
    前两天发烧了,这几天没更的后续会补齐链表结构如下classListNode{intval;ListNodenext;ListNode(){}ListNode(intval){this.val=val;}ListNode(intval,ListNodenext){this.val=val;this.next......
  • 排版元素
    排版元素行级元素块引用超链接图片可通过复制粘贴或拖拽来上传图片;上传后的图片可通过拖拽进行大小调整。​​加粗倾斜下划线删除线标记上标下标快捷键标签#行级代码$a^2+b^2=\color{red}c^2$备注(这是一个行级备注)颜色1......