首页 > 其他分享 >HTML块元素

HTML块元素

时间:2023-01-09 23:14:11浏览次数:34  
标签:很香 工程师 标签 元素 html HTML html5 前端开发

div元素

  • 整体页面布局当中最重要的 HTML 元素

  • 没有任何具体的含义,主要用于网页的布局,通过一个一个的div将页面划分为不同的部分,之后在针对部分进行开发

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--div标签:没有任何具体的含义,主要用于网页的布局,
    通过一个一个的div将页面划分为不同的部分,之后在针对部分进行开发-->
    <!--网页分块要求:先分行 在分列-->

    <!--网页的最外层-->
    <div>
        <!--头部区域-->
        <div>
            我是头部
        </div>

        <!--导航区域-->
        <div>
            我是导航
        </div>

        <!--主要内容区域-->
        <div>
            <!--主要内容上部分-->
            <div>
                上部分
            </div>
            <!--主要内容下部分-->
            <div>
                <!--内容左-->
                <div>内容左</div>
                <!--内容右-->
                <div>内容右</div>
            </div>
        </div>

        <!--底部区域-->
        <div>
            底部区域
        </div>
    </div>
</body>
</html>

h1~h6元素

  • h1~h6 标签分别表示不同级别的标题,<h1>定义最大的标题,<h6>定义最小的标题。
  • 在浏览器默认状态下,每种标题均为加粗效果,各自对应不同的文字大小

1、不要因为标题的字号大小很小,而使用低级别的标题,字号大小可以通过css的font-size来控制

2、尽量避免跳过某一级标题,依次使用

3、需要避免在同一个网页中多次使用h1元素,h1经常用在网页的标题或者是logo上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题标签</title>
</head>
<body>
<div>
   <!-- ctrl+d 复制整个一行-->
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
    <!--标题样式 字号大小:由大到小  默认加粗状态
    默认上下有一定的间隙-->
</div>
</body>
</html>Copy to clipboardErrorCopied

 

段落元素和换行元素

内容讲解:

  • p 标签用于定义一个段落 <p>XXXX</p>
  • <br>标签表示换行,为单标签,通常出现在 p 标签中
  • 每个 p标签 表示一个段落,而使用 br 标签换行,通常被称为软换行,段落的文本从一个新行开始,但是这些文本依旧是一个段落
  • br不要来增加文本之间的间隙 我们可以使用css的margin来代替
  • br标签是一个单标签 也是一个空元素,早期版本 <br /> ,但是在h5中,已经把 / 给省略了
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--meta标签是一个空标签  单标签-->
    <title>p标签</title>
</head>
<body>
    <div>
        <h2>html5XXXXXXXXXX</h2>
        <p>
            html5是html语言的第五次重大修改。。。。 html5 <br>是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次
            <br>重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5
            <br>是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语 <br>言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。
        </p>

        <p>html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀</p>

    </div>
</body>
</html>Copy to clipboardErrorCopied

 

小练习:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>气象新闻练习</title>
</head>
<body>
    <div>
        <h1>40.6摄氏度: 上海创出140年气象史上高温新纪录</h1>
        <p>2013年07月27日</p>

        <!--hr标签代表一个横线-->
        <hr>

        <div>
            style属性是给某个标签添加样式,本案例为添加一个背景颜色(后期课程学习)
            <p style="background-color: #fffbb5;">新华网上海7月26日电(记者李荣)26日13时36分至47分这一时间段,上海徐家汇气象观测站测得当日最高温达40.6摄氏度。这是上海有气象记录以来140年的高温新纪录,打破了此前1934年创下的40.2摄氏度的历史极值。</p>
            <p style="background-color: #655280;">上海已经连续2天发出了最高等级的红色高温警报。上海中心气象台首席服务官满莉萍说,今年副热带高压强度特别强,对上海及江南地区的控制“实在太稳定了”,整个7月份基本上都处在它的势力范围之内。25日上海已出现了气象史上7月份“第四高”的高温值,这使得26日的“基础”气温就很高,超过了30摄氏度,然后不断地升温。此外,26日白天风小,又吹的是西南风,特别是在中午之后这一个最易出现高温的时段,光照又比较强,所以气温“直线飙升”,一举冲破历史极值,出现了“创纪录”的极端酷暑天。</p>
            <p style="background-color: #ff6da2;">在上海历史上,出现40摄氏度以上极端高温的几率并不大。根据相关资料,中心城区徐家汇观测站140年来仅出现了5次记录,除了这一次的新纪录,还有就是1934年7月12日的40.2摄氏度;1934年8月25日、2009年7月20日、2010年8月13日的40摄氏度。</p>
            <p style="background-color: #5df2ff;">由于气温实在太高,上 海2 6日下午不少地区出现了热对流天气。气象台说,首先是浦东地区,下起了热雷雨。到15时05分,全市大部分地区出现了分散性的雷电活动和热雷雨,中心城区徐家汇等地都响起了隆隆的雷声。</p>
        </div>
    </div>
</body>
</html>Copy to clipboardErrorCopied

 

有序列表和无序列表

  • 无序列表
    • ul 表示无序列表,表示出是带有项目符号列表
    • ul元素前边的符号可以是任何的形式 ,我们可以通过css的list-style-type属性控制
    • 没有规定ul和li嵌套的深度
  • 有序列表
    • ol 表示有序列表,显示出是带有编号的列表
    • ol元素前边的编号可以是任何的形式 我们可以通过css的list-style-type属性控制
    • 没有规定ul和li嵌套的深度
  • 无论是 ul 还是 ol ,列表中每个具体的列表项都使用的是 li 标签
  • 使用规范:
    • ul li 、 ol li 是组合标签
    • ol或ul的子元素 必须只能是li,li的父元素只能是ol或ul。根据规范,不建议在ul和li嵌套的中间 书写其他元素
    • li中可以嵌套任何元素

案例代码及效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ol标签和ul标签</title>
</head>
<body>
<div>
    <div style="background-color: red;font-size: 30px;">
        <h2>尚硅谷校区时间排名</h2>
        <ol>
            <li>北京校区</li>
            <li>深圳校区</li>
            <li>上海校区</li>
            <li>武汉校区</li>
            <li>郑州校区</li>
        </ol>
    </div>


    <div>
        <h2>你喜欢吃的东西有哪些</h2>
        <ul>
            <li>上海红烧肉</li>
            <li>北京卤煮</li>
            <li>北京豆汁</li>
            <li>柳州螺蛳粉</li>
        </ul>
    </div>
</div>
</body>
</html>Copy to clipboardErrorCopied

 

ul和ol的其他用法

ul和ol也可以用于重复结构的 大块内容布局。

练习及代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ul和ol的用法</title>
</head>
<body>
    <!--
        ul、ol和li的使用规范:
        1、ul li   ol li  是组合标签
        2、ol或ul的子元素 必须只能是li
        3、li的父元素只能是ol或ul
        4、根据规范,不建议在ul和li嵌套的中间 书写其他元素
        5、li中可以嵌套任何元素
    -->
    <div>
        <h1>前端工程师招聘列表</h1>
        <ul>
            <li>
                <h2>UI前端工程师</h2>
                <p>
                    <span>20K-30K</span>
                    <span>深圳-南山区</span>
                </p>
                <p>求贤若渴</p>
            </li>
            <li>
                <h2>UI前端工程师</h2>
                <p>
                    <span>20K-30K</span>
                    <span>深圳-南山区</span>
                </p>
                <p>求贤若渴</p>
            </li>
            <li>
                <h2>UI前端工程师</h2>
                <p>
                    <span>20K-30K</span>
                    <span>深圳-南山区</span>
                </p>
                <p>求贤若渴</p>
            </li>
            <li>
                <h2>UI前端工程师</h2>
                <p>
                    <span>20K-30K</span>
                    <span>深圳-南山区</span>
                </p>
                <p>求贤若渴</p>
            </li>
            <li>
                <h2>UI前端工程师</h2>
                <p>
                    <span>20K-30K</span>
                    <span>深圳-南山区</span>
                </p>
                <p>求贤若渴</p>
            </li>
        </ul>
    </div>
</body>
</html>Copy to clipboardErrorCopied

 

自定义列表

  • 定义列表包括 dl 、dt 、dd 三种标签
  • 自定义列表是包含 术语 和 对术语描述 的列表 ,通常用来展示词汇表或者是对内容的解释
  • 其中 dl 标签表示定义列表,dt标签表示定义列表的标题,dd 标签定义了列表的内容
  • dl dt dd是组合标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义列表dl</title>
</head>
<body>
    <div>
        <dl>
            <dt>html5</dt>
            <dd>html5是在2014年10月29日宣布完成</dd>
        </dl>
    </div>
</body>
</html>

自定义列表的用法

  • 单条解析和描述

    <dl>
        <dt>html5</dt>
        <dd>html5是在2014年10月29日宣布完成</dd>
    </dl>Copy to clipboardErrorCopied

     

  • 多条术语的描述

    <dl>
        <dt>html5</dt>
        <dt>css3</dt>
        <dt>js</dt>
        <dd>
            他们仨结合起来就是传说中的网页三剑客
        </dd>
    </dl>Copy to clipboardErrorCopied

     

  • 对一个术语 进行多次描述

    <dl>
        <dt>html5</dt>
        <dd>html是真的好啊</dd>
        <dd>学了html5  每天天气真的好</dd>
    </dl>Copy to clipboardErrorCopied

     

  • 在一个dl中 可以有多个 术语-解析 这样的格式(类似键值对)

    <dl>
        <dt>html5</dt>
        <dd>html5 好啊</dd>
    
        <dt>css3</dt>
        <dd>css3 真好啊</dd>
    
        <dt>js</dt>
        <dd>js 真的很简单</dd>
    </dl>Copy to clipboardErrorCopied

     

hr元素

基本使用

  • h5规范:语义表示段落之间的主题转换,并不仅仅用在表现层上
  • 旧版本中:他仅仅就是一个横线 只是表现层 没有什么语义
  • 横线默认和父级一样宽
  • 其实hr标签的表现是一个高度为0 宽度和父级一样宽的元素 拥有上下左右各1像素的边框,所以默认hr的线高度是2px
  • 我们可以通过css来控制hr的样式

一条线的其他做法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一条线</title>
</head>
<body>
    <!--第一种:空标签-->
    <div style="height: 1px;background-color: red;"></div>

    <!--第二种:边框-->
    <div style="border-bottom: 1px solid pink;margin-top: 100px;"></div>
</body>
</html>Copy to clipboardErrorCopied

 

块标签的特性

  • 独占一行,换行显示
  • 可以设置宽高
  • 可以容纳行内元素和其他块元素(p标签、h标签都只能嵌套行元素或行内块元素)

标签:很香,工程师,标签,元素,html,HTML,html5,前端开发
From: https://www.cnblogs.com/z-bky/p/17038796.html

相关文章

  • HTML行元素
    span元素没有任何特殊的含义主要是为了增加额外的结构,方便我们控制样式或者是数据并且使用要求:在其他语义化标签不适用的情况下再使用<!DOCTYPEhtml><htmllang="......
  • html书写规范
    标签换行写法<div><p>今天的天<span>真的好啊</span></p></div>CopytoclipboardErrorCopied 标签需要关闭<p><span>哈哈哈哈......
  • HTML_5_表单
    表单是指发送给服务器的数据。  步骤:1、使用form标签声明一个表单域。属性:action,目的地的url。method,提交方式:get,适合小量数据,显式提交,不安全。pos......
  • HTML超文本标记语言3
    三、HTML表单标签1.form标签<form>form标签name=表单名称,action=表单提交的地址,method_=表单提交方式:get/postget/post详解:1.get提交数据时:把数......
  • Vue判断数组元素是否为undefined
    问题:现在有这样一个数组,没有第一个元素,如何判断该位置为空控制台输出为undefinde首先尝试array[0]===undefined,可以需要修改为array[0]==="undefinde"这样不行......
  • 【java基础】如何创建20元素以上的不可变集合?(Map.of()无法创建20个以上)
    背景由于Map.of()(jdk-9出现)创建的不可变集合无法超过20个参数,所以可以使用下面的办法创建Map<Object,Object>map=Map.ofEntries(hm.entrySet().toArray(newMap.Entry......
  • c# webview2获取网页HTML的绝招
    usingSystem;usingSystem.Collections.Generic;usingSystem.ComponentModel;usingSystem.Data;usingSystem.Drawing;usingSystem.Linq;usingSystem.Text;usingSyste......
  • Echarts做仪表图-含HTML直接保存加个JS文件就可以用
    <!DOCTYPEhtml><html><head><metacharset="utf-8"><title>echarts</title><!--引入echarts.js--><scriptsrc="echarts.js"></script></head><bodyst......
  • 用python处理html代码的转义与还原-转
    本篇博客来源:用python处理html代码的转义与还原&#x27;&amp;&lt;&gt;&quot;&#x27;等特殊字符摘要:html转义:importhtml#字符串转义str="<tag>aaa</tag>"str_out=......
  • 2023新年红包,兔年HTML红包页面代码【2023新年快乐_附源码】
    一.新年红包,兔年HTML红包页面1.1资源获取和效果预览1.源码资源获取:https://download.csdn.net/download/weixin_52908342/87373505快速通道:点击跳转下载新年红包,兔年......